The team had 5 weeks to simplify content on an information-heavy government website. The NSA website was difficult to navigate for the general public and employees needing to locate information on it. We rearranged sections on the website and gave it a more modern look. Please enjoy our redesign concept and update below!
Researching + Testing + Prototyping for our Team of Three
Educators need to use the NSA website to gain information for their students who are interested in pursuing careers there. The NSA needs these educators since they partner with schools to develop talent in the next generation of employees in their growing careers. These partnerships were very difficult to locate on the website.
Partnerships information was very difficult to locate on the website because most information was dug deeply into the website. In order to make it easier for busy education professionals to find resources they needed, our goal was to design a website that helped Educators and students discover information about partnering with the NSA more easily.
We accomplished the website redesign with research, definition, ideation, prototypes, and user tests. Below are the deliverables from each week of designing.
The navigation analysis and accessibility failures gave insight to our focus for the redesign. We were going to make the redesign feel trustworthy for users. To do this, we highlighted the NSA mission statement and purpose. We also removed jargon, repetitive titles, and made the website look and feel more current.
Conducting a heuristic evaluations checklist is essential for all website redesigns.
As a part of the re-design, we created an Invision mood board to understand what other .gov and even finance websites were doing well to gain understanding about breaking up large amounts of text into quickly readable cards. From the start of the redesign, we laid out a fast guide to set our UI foundation, preferences and stylistic concepts as a team.
Style board explorations played an important role in guiding our design decisions and helping us convey trustworthiness to the public. We then used a heuristic evaluation that evaluated the original NSA website to check for usability issues that were causing problems with navigation.
View Heuristic EvaluationWe updated the colors on the original website to be in compliance with the WCAG AAA standards with higher contrast ratios. It is imperative for government websites to place accessibility in the forefront of all designs and development.
We were testing the navigation bar at the top of the screen and also the footer. We asked our testers to complete actionable tasks by using engaging task scenarios to provide context for them. We did this by reason of gathering qualitative insights about what may cause problems on the website.
Below is the list of tasks, the ones in bold were the 3 most difficult for them to locate.
This week, we spoke with five users who confirmed what our heuristic checklist said about navigation. We had a guide of where the illogical placement of categories on the original website were. There were 44 pages under the primary navigation and 27 sub navigation sections we needed to reorder in one week. Our goal was to cut the clutter so that government employees and educators could use the website to locate what they needed to.
I learned that having great information architecture was the most important part of the government redesign.
I took a special focus on the education flow for the NSA. It was very difficult for our testers to find information and forms educators needed. The unorganized content made it difficult and made them feel "lost and annoyed". The flow of the original website was problematic to navigate and "confusing".
We performed a card sorting experiment and had four outside participants join. We organized and re-labeled the sections and learned about what the sections meant. Information was easier to find and provided a more effective experience for users. Users did not waste their efforts clicking through the website to get to their end goals anymore.
Our first step was to tackle the grayscale UI for the header and footer. After that we looked at the home page hero section on the original website which contained an image carrousel that caused the alignment on the home page to brake. We also started making decisions on colors and components for the future high fidelity prototypes.
To make our design process more fast-moving, we should have made sharable component symbols early on.
The style tile used color, font and consistent components to provide a professional look for the NSA website. We looked at the U.S. Design System (USWDS) component library to stay under the website guidelines of the government.
Through testing we discovered that fixing vertically stacked links was a priority for the redesign. Our solution was to use an accordion component that allowed one item to expand at a time. Having the accordion helped users find more relevant information and reduced visual overload.
We counted 24 different links visible on this page and no clear explanation of where they may take a user.
Our first iteration broke down the links into buttons instead, we also used color blocking and hierarchy.
After attempting several ideas about how to display all these important links, our solution was an accordion.
This week we completed design system components to create engaging and consistent interfaces. We had a great start on our high fidelity prototype and had users try to do tasks on it. We observed and took notes on how they interacted with the new navigation to see if it was easier for them. We leaned on our mobile and web tests to help us complete the high fidelity pages.
We learned that designing and testing low fidelity prototypes before moving to our high fidelity ones, gave us a chance to refine the user flow before spending the extra time on more in-depth designs.
To balance to the composition we selected a more dark palette so that the NSA images would stand out more. The colors are professional and accessible for users of all backgrounds and abilities.
Information in the navigation was repeated in sections and there were too many ways to get to Students & Educators sections. One of the pages took you to a single page with links that took several clicks until getting you got to the right page. Our goal was to reduce the number of clicks it took to find information. Through our experiments, we knew navigation was the main issue we faced when updating this website. Card sorting and reviewing the original website helped us come to our final design decisions.
There were ten pages that needed to go under the "About Us" section. User testing the navigation showed that people preferred having it right aligned. There were so many pages to view and this made it easier to scan the available pages.
When a user makes an error and clicks on partnerships twice after the drop-down shows up, this page was designed to guide them to all partnerships NSA supports. They can go here if they want more information about partnerships in general as well.
View Usability Testing Plan
Our final week of design was our chance to tighten up the look and feel of the user interface. We were then able to test our high fidelity clickable prototype on mobile and desktop. We made our final iteration by taking the feedback we received from testers and completed the design.
I learned how and when to add drop-downs and accordion components to make a design look more clean.
With our problem above, the "Contact us" page had a total of 27 overlong links. We decided to simplify the page by adding an email inquiries drop down list so that people could find the email address they needed. We also added a map of their headquarters to make the page feel more updated and trustworthy.
During usability testing, users were unsure how to locate the "contact us"page. Every person tested, tried finding it under "Doing Business with us" or scrolled to the bottom of the page, sometimes resorting to typing into the search bar. We placed a new "Contact" button on the primary Navigation to ensure that people would find it quickly and easily.
I learned that creating quantitative experiments, such as card sorting and A/B tests, was crucial to gaining insight for the product launch.
The menu on mobile would have benefited more from conducting guerrilla testing to see if we could have received more constructive user feedback about it . As a team of three, we made more sense of the Education and Students aspects of the website and app. In three weeks, we were able to connect as a team by creating a culture of learning.
Side note: Through user testing, we discovered that NSA was very active on Twitter and posted on it. We would have never known based on their current website, so we made sure to highlight the feed on the homepage.