Overview: Redesign the navigation of a complex government website to make it more accessible while maintaining a brand message in a responsive web design.
Problem Description: The NSA has taken great steps to make their often misunderstood role in society more accessible to the general public. They provide training and education for security specialists and novices alike. However, the hierarchy of their navigation is convoluted and overwhelming. This case study was designed to maintain their professional brand message and make demystify their function and purpose.
My Role: UX/UI Research and Design, Interviewing, UX Writing, Wireframing, Brand Creation Prototyping, User Testing.
Collaborator: Kyle Petersen
Time Frame: 4 Weeks
The original site, upon first glance, seemed as though it was well organized. Cards allowed for quick travel around the website. However, when exploring the actual site navigation, it was granular to the point of being overwhelming.
Research and Analysis
Original site map with 135 different navigational links
A site map was made for the header and footer. After, the site map was adapted into a navigational test using Treejack. When asked to navigate the test, every user who attempted struggled to find the necessary links they were asked for, and some gave up partway through.
Key Takeaways Were:
The wording on the site is confusing and high level, alienating the beginner security experts and those who would like to use the site for educational purposes.
Navigation often included multiple links with worded differently but leading to the same page, which made getting lost much easier.
Some links went to older pages designed different, creating inconsistent brand messaging
New site map with simplified navigation.
The goal to simplify the navigation was to reorganize categories and to rely on secondary navigation on the subsequent pages to make finding information easier and more accessible. Primary navigation was reorganized into the sections About Us, Products & Services, Publications, Education, and Doing Business with Us representing the functions a user would be going to the NSA for, rather than vague disorganized sections. The “Join Our Team” Navigation was eliminated completed and built into the “About Us” category along with a new “Employee Hub” link for all employed users.
Wireframing and Prototyping
The goal was to not only reorganize the primary navigation but to also give the home page an updated feel the would allow the user to find quick links and new information easier. With videos (did you know the NSA has a YouTube page?), news, events, and the latest in cybersecurity information without having to navigate any further than the homepage.
User Test Results
All testers were able to communicate the potential uses of the website.
Design helped to demystify the NSA reputation
Things to Improve
Navigation links felt a little cramped - Make target areas bigger for mobile, and switch to a vertical menu.
Too much white space
Switching the cards and the videos
All changes were made in later iterations.
Brand Message and Style
When looking at the history of the NSA, it became clear early on how proud they were of their history and heritage, even being the major founder of the National Cryptologic Museum. For the brand message, the history of the NSA is combined with their modern presence to show that while their tools have changed, they are steeped in the same integrity and history they were founded with.
This style tile would become the basis for a larger style guide that could be applied to all existing pages and eliminate design debt.
Hi-Fidelity Prototypes
Desktop Redesign
The redesign replaces a static hero image with a carousel presenting the latest stories and opportunities. Videos previously buried behind layers of navigation are moved to the front page along with simple dropdown navigation patterns. While secondary and tertiary navigation exists, it is simplified through reorganization so that users can easily find what they need.
Mobile Design
With the mobile design, the main navigation was condensed into a dropdown menu. Navigation was restricted to two layers, relying on additional navigation on the pages for tertiary navigation so the user didn’t feel overwhelmed.
Final Thoughts
While it would be impossible to redesign the entire site without significant help, the steps taken to bring consistency and accessibility to the site greatly improved users’ opinion of the NSA and what their function in our society is. It would be great to show our work to the NSA and see if our design could help them grow their professional and historical footprint.