UX Research and Design
Kelcie Matousek
Kelcie Matousek
National Security Administration
Responsive Web Redesign
Conceptual project to update the NSA website with a responsive web design focus.
January 2023
About
Project Summary
The National Security Administration’s website is poorly responsive and not user-friendly due to unclear navigation titles and too much reliance on cards as navigation devices. How can we create a more responsive and enjoyable product for the average user of the NSA’s website?
Why
Context
Government websites are often wordy and poorly organized for the average user. The general public, for whom these websites are typically built, often cannot find the resources that are buried under confusing pathways or obscure naming conventions. Government website need to be redesigned in order for critical resources to be accessible to the average citizen.
The Goal
A significant portion of the US population uses only their phones to access the internet. This means that government sites can’t afford to have unresponsive websites that make accessing their content impossible for some. The goal for this redesign was to create a responsive site with a simple navigational system to make finding (and relocating) critical information, such as job postings, student opportunities, and technical guidelines easier.
User Persona
Introducing
Meet Craig. Craig is a 45 year old software engineer from Dallas, TX. He’s married with two young kids and is looking for a career change. He desires the stability and structure of a government job so he has more time to be with his wife, coach his kids soccer team, and BBQ.
Craig has been working as a software engineer for a majority of his professional career but doesn’t feel like he’s making a true impact with his work. He’s interested in working for the National Security Administration out of a desire to contribute to something larger and make the world a safer place for his children.
Research
Research Plan
The first step in this redesign was to understand the current website, their goals, and pain points users face. A heuristic evaluation was used to identify some problem areas on the current website, including: font choice reducing readability, navigation was too dependent on cards for critical information, breadcrumbs were used but not consistently making information difficult to relocate, and on the mobile version of the site the main navigation was unusable. After completing the evaluation, some key tasks a user may go to the site to complete were identified for testing.
Research
Key Take-Aways
With several potential users for the NSA site, the initial problem in the research was identifying what someone really needed when going to the site. A large portion of the site is dedicated to the technologies the NSA produces along with information on how to use the technologies and publications on them. Originally Craig was looking to partner with the NSA in order to use their technologies. Our original user test tasks included finding cyber security job postings, finding the NSA’s patent portfolio, and finding information on partnering with the NSA.
But through our interviews we learned that those tasks are two, if not three different users. Craig decided he didn’t have the qualifications or company size to partner with the NSA, so he leaned into working for them. All of our user tests successfully located the job listings but only 60% of users were able to locate the Patent Portfolio, many users finding it by searching rather than utilizing the primary navigation. While our average user may not need to find the Patent Portfolio, these tests highlighted key shortcomings in the existing navigation system.
Inspiration
Mood Board
In order to get a more well-rounded understanding of an effective government website, a mood board was put together, consisting of clear, clean, and straight forward designs. Additionally countries with strong government sites such as the United Kingdom and Norway were analyzed for key insights into navigation and informational hierarchy.
Information Architecture
Card Sorting
A main opportunity in the redesign of the NSA’s website was a restructure of their navigation system. Crucial information, such as their patents and information on their student programs, were hidden in pathways that required the use of cards in the body of the site and could not be found solely through the primary navigation. A study of the site and each of its pages was conducted, placed on stickies, and then rearranged into a new site map that was more intuitive and allowed all information to be accessed from a primary or secondary navigation system.
Information Architecture
Site Mapping
Prototyping
Wireframing
With a better understanding of the site’s user and a restructured navigation system, wireframing the navigation system was next. The National Security Administration is a large entity with a lot of information to share. What is the best way to visualize all of the pages in a navigation system that doesn’t overwhelm the user but is straightforward to use?
Several navigation styles were considered during the wireframing stage- a header navigation that opens up to a sidebar, a series of drop down menus, or an entirely sidebar dependent navigation system. Ultimately it was determined that Craig, and users like him, wanted to see where an action is going to take them before they pursue it so a header navigation with sub-nav options that appear was chosen to be developed. To keep in line with the clean and concise designs found in the mood board, drop down menus and boxes were eliminated in favor of just the text with color and weight formatting working together to indicate user location.
Prototyping
Mid-Fi Prototyping
Now that a responsive navigation system had been created, it was time to build out the pages Craig might need. Since he decided he wants to work for the NSA, rather than partner with them, the design focus was shifted to pages that educated the users on the NSA’s mission, plus various employment and student opportunities available.
At this point in the design process, a tentative style guide was also being assembled to choose colors, fonts, and the overall feel of the site. The current NSA site harkens back to the origins of the computer with the use of dark blues, bright greens, and big, imposing photographs of computer screens, security software, and dark, computer filled rooms. Wanting to stay true to their technological roots but make the page feel more accessible to the average person, lighter shades of greens and blues were chosen, along with images that still include coding and computers but now include a wide array of employees and overall are brighter and more welcoming.
Testing
Mid-Fi Usability Testing
During the mid-fi prototyping stage, three different forms of testing were done on the prototype: A/B testing, 5-Second Testing, and a round of usability tests.
A/B testing was done to determine whether the secondary navigation bar should appear upon click or hover. The results were overwhelmingly in favor of “on hover.”
5-Second usability testing was done on the homepage and navigation to determine if the site was recognizable upon glancing as a tech or security oriented site and what information people thought they’d be able to access. Five 5-second tests were conducted and 4/5 identified the logo and navigation bar as what stood out the most and all 5 respondents identified the site as something to do with cyber security, national security, or tech.
As the mid-fi prototype developed, a round of user testing was conducted. This time the tasks were geared more accurately towards users like Craig and how they’d interact with the navigation system: find the NSA’s mission statement, locate job openings in cybersecurity, and find student opportunities.
Iterations to the site were made based on the feedback and results from the user testing, including: adjusting font sizes and color, adjusting information in footer, pinning the header to the top on scroll in mobile devices, and adding some additional graphic elements to aid in clarity.
Testing
Usability Testing
Prototyping
UI Style Guide
Introducing
The "New" National Security Administration
On desktop and tablet, the primary and secondary navigation span the width of the page. The secondary navigation appears on hover. When clicked, primary elements turn green, secondary nav sticks, and then when clicked, secondary navigation links become bolded. On mobile, the primary navigation collapses into a hamburger menu.
Responsive card design highlighting some of the key elements of the National Security Administration. The use of bright green and blue plus more inclusive imagery can be seen here.
Left: New home page in desktop view.
Right: Mobile Work with Us page that leads into career listings.
Conclusion
Insights
For users like Craig, being able to find basic information on the NSA and opportunities with them is crucial to a successful interaction. Users exhibited a strong desire to know where the path was going to take them and were hesitant to click on navigational elements they were unfamiliar with- this made navigating the original site challenging for many. The use of a simple but bold primary navigation with visible secondary navigation stood out to users and made navigating the site easier and a reorganization and rewriting of information made the site feel more accessible for users, resulting in more engagement with the site.
Next Steps
Should I get to revisit this project, next steps I'd like to take are:
-
More development in the mobile menu navigation
-
Additional page build out on both mobile and desktop
-
Alternate user personas constructed and additional testing to learn the needs of users looking to partner with the NSA and/or those who have more knowledge of government level cybersecurity.