Overview
Background
The National Security Agency/Central Security Service (NSA/CSS) is a United States government intelligence agency responsible for global monitoring, collection, and analysis of foreign communications and information.
Challenge
The NSA website is difficult to navigate and lacks a clear hierarchy of information. Its design is outdated and does not reflect the NSA's modern image.
Solution
Create a more user-friendly and accessible website for U.S. citizens and residents, members of the media, foreign governments and organizations, and scholars and researchers. Improve the overall visual design of the website.
Role
Product Designer
Tools
Figma
Miro
I devised a user testing plan to determine my objectives for the research and specify the various techniques to be used.
Do users find the website easy to use?
Determine whether users are able to find information on the website successfully.
To examine what areas of the site’s navigation and design need to be improved.
Users were prompted with a scenario of navigating through the NSA website and looking for information on cybersecurity news, articles, and job availability. A total of five participants were gathered.
Users were given the following three tasks to achieve:
Search for overview of NSA Cybersecurity
Search for Cybersecurity Publication
Search for careers in Cybersecurity
From user tests, notes were taken and organized into sticky notes to capture analysis of findings and map out paint points. Four sections were categorized by frequency of responses of high to low from users.
The sticky notes were narrowed down and separated into a 2x2 prioritization matrix to better understand where to focus on the redesign.
High Priority for User and Website:
Clicked on About in Navigation Bar
Found website design outdated
List of About in Navigation Bar is too long
Low Priority for User and High Priority for Website:
Website difficult to see
Glitch in hover function when going to About from Navigation Bar
Taken to different page before being directed to page when clicking on link
Usability and Heuristic Issues
Screenshots of the NSA Website were taken to annotate usability heuristic issues, accessibility issues, user errors, and pain points collected from user testing.
User Persona
Evan Minsky was created from observations made during user interviews. He represents a better understanding of the user’s traits, goals, pain points, and solutions. Evan acts as a reference point, prioritizing design decisions that are user-centered.
Users go to the NSA website to find information efficiently. Users have reported that the NSA website's background pages were dim and that texts didn't show clearly. There was a lack of consistent design, font, and colors. The website has a lot of information and data where the navigation was difficult for users to find relevant information as headers were clustered and there were numerous links to different pages.
A sitemap was built to represent a blueprint for the redesigned NSA website with an organized and intuitive navigation. This map visualizes links between pages and how users will navigate from one section to another to find the information they need.
Desktop and mobile sketches were created to form the structure and functionality of the NSA website. The focus was on the information architecture and how users would navigate through the website.
Mid-Fidelity Wireframes
The sketches and navigation were wireframed for usability testing.
Usability Tests
Usability tests was conducted for desktop and mobile prototypes to observe and improve how users navigated through the mid-fidelity prototype. Participants were given a scenario along with the following tasks:
Go to About section from Navigation Menu
Go to News Publication: NSA Launches 10th Annual Codebreaker Challenge for 2022 in News & Highlights
Go to NSA.GOV on the Footer Navigation
Iterations
Iterations were applied based on user feedback.
Style Tile
A style tile was put together with key design elements in the UI. Throughout the process of redesigning the NSA website, it was evident that the original website was outdated and that there needed to be some improvements with the site’s navigation and layout but it was important to maintain brand image and visual branding. A main design choice was having blue as the brand style. While browsing for designs, I noticed the color blue ranging from dark tones to light tones blending well together with images that included graphic patterns of lights and wires, computer screens, and security systems. There was also glowing blue tones that added a cyber-esque tone and I decided to incorporate imagery with glowing blue tones to have a clear understanding and depiction of the NSA and its purpose.
High-Fidelity Wireframes
From iterations, I modified the wireframes with enhanced features. With NSA's branding defined, I encompassed their identity into final prototypes.
View the desktop prototype below or click here to view it in Figma.
View the mobile prototype below or click here to view it in Figma.
