top of page
NSA_1.Landing.png

National Security Agency Mobile Web Restructure

The National Security Agency /Central Security Service (NSA/CSS) leads the U.S Government in cryptology that encompasses both signals intelligence and cybersecurity products and services.

​

Newly renovated NSA web mobile brings better usability to find documents for users who are looking for information in the security field.

Context

  • Case Study

  • UCI Project

​

Role

  • UX Designer

  • UI Designer

​

Tools & Methods

  • Figma

  • Photoshop

  • Miro

  • Information Architecture

  • Card Sorting

  • Site Map

  • A/B Testing

  • Guerilla Testing

​


Problems and Goal
 

I found that it was difficult to find certain documents and information on the website because
they were categorized under topics that users wouldn’t normally navigate to. 

​

I redesigned the website’s IA structure, layout, and navigation to allow people to quickly access and easily find the reliable resources they are looking for.

​

Because I want to maintain the brand characteristic to be reliable, transparent, and committed, we upgraded the design by adding a minimalistic and tech-oriented style.

​

Heuristic Evaluation.png


Guerrilla Testing
 

I conducted the desktop version and mobile version of the Guerrilla Usability Test. I tested 5 participants on each device to understand how users currently find their national cyber security information.

 

The purpose of the Guerrilla usability test was to determine if the participants can find the proper documents or information without struggling and feeling overwhelmed.

​

Through the test, I discovered that the participants had difficulty navigating the website because the materials were placed under certain tabs where users did not expect them to be.

​

NSA-UserPath.png


Takeaway
 

Ryan

Does not know where to start when looking for cyber security documents and was having trouble finding the information under the correct categories

Ted

While trying to apply for the job, could not find an apply button. Also, he had difficulty finding the link/button to go back to the main page

Justin

Used the search bar
to find what he was looking for but was not able to find the documents and had a hard time navigating through the search pages


How Might We?
 

NSA-How Might We.png


Card Sorting
 

A potential visitor and I performed closed card sorting to create a new navigation structure for the site. Through this methodology, I learned how users to sort content items into each NSA category.

​

Card Sorting.png


Site Map
 

I organized all of the topics and their contents on this site map. From the useability test and card sorting, I found that some contents did not match well under certain topics. So I rebuilt a solid Information logic by using the LATCH method.

​

Site Map.png


Low-fi Wireframe
 

I drew lo-fi wireframes to ideate the future website in mobile version and desktop version. While creating a lo-fi wireframe, I considered what would be the best interface for users when they are navigating provided that the website had much information.

​

NSA_LowfiWireframe.png


UI Style Guide
 

I created a UI style guide to improve brand recognition. I built a comprehensive style guide using new logos, fonts, color palettes, and other components.  My team used this guide to conform to the standardized visual specification.

NSA_UIstyleGuide.png


Navigation A/B Test
 

Based on the UI style guide and site map, I created high-fidelity navigations and conducted A/B test. Based on the feedback, I re-constructed the sitemap and changed the layout, colors, and font for users to have a better experience.

NSA_NavigationTest.png


Hi-fi Mockup and Prototype
 

As a validation process, I introduced the high-fidelity prototype to the users for their feedback. This process plays an important role in improving our product because it enables the users to interact with it and specify which navigational elements need improvement. 

NSA_17.Hi-fi_Wireframe_M.png


Hi-fi Mockup (Desktop)
 

Below is a desktop counterpart of the mobile version described above. 

NSA_Hi-fi_Wireframe_D.png


Future Work
 

The current layout of the search results is disorganized and overwhelmingly abundant: there is so much information with the same font, color, and size without highlighted keywords; what aggravates this issue is the absence of a filter feature. Such a presentation exhausts users and warrants the need to conduct more research on optimizing information presentation. 



Thank You!

 

​

SoPet App Case Study

​

For More Projects Section.png
bottom of page