top of page

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.


  • Case Study

  • UCI Project


  • 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.




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


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


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.


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.


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.


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. 


Hi-fi Mockup (Desktop)

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


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