NSA Website ReDesign - UI/UX
Goal: Create a visually pleasing digital platform for NSA users who are frustrated with the existing platform.
Role: UX researcher and UI Designer
Deliverables: Strategy, User Research, Heuristic evaluation of existing website, Card sorting, Persona, Competitor Analysis, Style Guide, Priority matrix, Information Architecture, User flows, wireframes, Design System, Lo-Fi and High fidelity UI, Prototypes, Final specs
Problem Phase
NSA; The National Security Agency provides information for the protection of U.S. communications networks and information systems, It shares up-to-date research and guidelines to build up secure online platforms to keep US citizens' personal & and military data safe and secured. Researchers, new career seekers, and most web developers who are working with people and government information use the NSA to find research papers, new security updates, and build up secure web security specs, face issues with poorly designed and misleading user interfaces.
Art Direction
NSA website redesign is a solo one-month project that enhances my UI/UX Skills and creativeness.
Observations and Evaluation of the Current Site
This was basically conducted to check web site's Visibility of system status, Easthetic and minimalistic ness of the website, Match between the system & real world, User control & freedom, Consistency & standards, Error Prevention, Recognition rather than recall, Flexibility & efficiency of use, Aesthetic & minimalist design, Helping user recognize, diagnose and recover from errors (actions against the error Prevention) and to check how easy to get Help & documentation
Heuristic Evaluation Checklist
Visibility of system status
"User control & freedom"
"Consistency & standards"
'' Error Prevention ''
"Aesthetic & minimalist design"
"Helps user recognize, diagnose and recover from errors"
"Help & documentation"
Evaluation
Evaluation of the Heuristic results
To get a brief idea about heuristic evaluation I summarized all the data and put those into a 2x2 matrix to make my final wireframing ideas easy
Usability Testing Results
Card Sorting Process
User Needs
Site Map
UI Style Guide
Once all the data was finalized with the existing website I started working on my redesigning. The first thing I considered is not to change their color palette but I did add a few gradient options to make some features eye-catching and easier to visible for the NSA users. Also, I did add some meaningful images and San serif font to enhance the aesthetic aspect and make the website minimalistic.
Experience Planning
Once wireframes were created, I created high-fidelity mocks and built a Figma prototype.
Link to Figma File:
https://www.figma.com/file/K0CctYveeQIf4gn2p0hvo0/NSA-Prototyping?node-id=0%3A1&t=XodLn4ThBDR1AE6W-1
Full view of Home Page
Full view of Career Page
Full view of Our Story Page
Home Page
Our Story
Careers
Our Story
Whom I Tested
I conducted 5 user tests to test this prototype and get an idea about the iterations we need to do.
Testing Plan
I conducted 5 user tests to test this prototype and get an idea about the iterations we need to do. What I gathered and observed from users, in brief, is, " Navigation tabs are simply easy to understand, The home page provides a general idea about NSA, Which navigates users to find the information easily, Bottom bar navigation is short and directly focused and All users did the targets without any confusion.
User Success Results
