NSA WEBSITE REDESIGN: IMPROVING THE ONLINE PRESENCE OF A U.S. GOVERNMENT AGENCY
PROJECT OVERVIEW
PROBLEM:
Users of the National Security Agency Website are confused and overwhelmed by the amount of content on each page and find it difficult to navigate around efficiently.
SOLUTION:
The aim is to completely re-create the website and enhance the user experience to streamline access to critical information. The NSA website will undergo a redesign focused on intuitive navigation, optimised layout, using user-centred design principles.
IMPACT:
I was able to reduce the search time for the Cybersecurity page by 18 seconds: 30 seconds on the original NSA website, down to 12 seconds on the redesign.
MY ROLE:
UI and Interface Designer
TOOLS:
Figma, Adobe Photoshop and Illustrator
TIMELINE:
4 weeks
April 2024 – May 2024
RESEARCH
- The website
https://www.nsa.gov/
- For whom is the website designed?
Government Agencies and Officials, Military Personnel, Cybersecurity Professionals, Educational Institutions and the public
- What is the main purpose of the homepage?
To provide information about the agency’s mission and initiatives to the public. It serves as a platform for sharing news and public statements related to national security and cybersecurity
- What is the mission of the agency?
To provide cybersecurity solutions and protect the US security systems against cyber and international threats and improve the weapons security. They also want to produce foreign intelligence information and support national security missions including counterterrorism, counterintelligence and homeland security.
I started this process by trying to understand who would be going to the National Security Agency website. From here, I created my proto-persona, a woman named Sarah Ann. She is a Cybersecurity Analyst working for a private sector company that collaborates with government agencies on national security initiatives. Her goal is to access information about the latest and most up-to-date information from the National Security Agency.
Why does Sarah Ann need to visit the NSA website?
Sarah visits the NSA website to access vital information related to her work, resources, and updates essential for her role as a cybersecurity analyst. As a professional dedicated to safeguarding national security, she relies on the website to stay informed about emerging threats, policy changes, and best practices in cybersecurity. It is very important for Sarah to receive accurate and up to date information that is compliant with the laws around information and she relies on government websites to retrieve that information for her line of work.
EMPATHY MAP
HEURISTIC EVALUATION
I conducted a heuristic evaluation of both the desktop and mobile versions of the NSA website. I observed several significant issues with the current NSA website. Primarily, there was a lot of jargon used for navigational menu’s, making it difficult to understand for the average user. Additionally, there is also a lot of clutter and a not so prominent option for contacting the NSA, which would hinder users who may need help while navigating the website or finding the information they need. Lastly, the placement of elements including images and text, seemed inconsistent and lacked an intentional and organised arrangement on the page.
COLOUR ANALYSIS
After the heuristic evaluation, I went to check the accessibility of the colours, and fonts of the NSA website. I felt the colours were inconsistent so I decided to alter the colours to make it more consistent whilst also maintaining the theme of an official government organisation along with passing accessibility guidelines.
- AAA
- Webpage failed most of the AAA tests
- AA
- Webpage did not pass all of the AA Test
- Colour Blind
- Webpage passed most of the colour blind tests although had some potential colour conflicts
USER RESEARCH PLAN
Objective:
The objective of this user research plan is to conduct usability tests on the National Security Agency website to identify and analyse usability issues that users encounter while performing essential tasks. The insights gained from these tests will inform improvements to the website’s design and functionality, ultimately enhancing the user experience.
Participants:
I will interview five participants from various backgrounds or interests in cybersecurity
Tasks:
– Navigate to the section on Cybersecurity: Participants will be asked to find and navigate to the section of the website that provides information on cybersecurity.
– Navigate to the section on NSA Cybersecurity Advisory and guidance page: Participants will be asked to find and navigate to the section of the website that provides information on cybersecurity.
– Find contact information for the agency: Participants will be asked to locate the contact information for the public affairs office of the agency.
– Provide feedback on the website’s design and usability: Participants will be encouraged to provide general feedback on their overall experience with the website, including any usability issues encountered and suggestions for improvement.
Procedure:
– Introduction: The interviewer will welcome participants and explain the purpose of the usability test.
– Task Instructions: The interviewer will provide clear instructions for each task, emphasising that participants should think aloud while performing the tasks.
– Task Execution: Participants will independently attempt to complete each task while the interviewer observes and takes notes on their interactions with the website.
– Post-Task Interview: After completing each task, the interviewer will conduct a brief interview to gather feedback on the task experience, including any difficulties encountered and suggestions for improvement.
Debrief:
The interviewer will thank participants for their participation, answer any questions they may have, and provide information on how their feedback will be used to improve the website.
USABILITY TESTS ON CURRENT SITE
Key questions
- Why do people navigate the website the way that they do?
- What are they trying to do?
- Identify pain points using navigation.
Pain points from the NSA website
- “On the mobile version, the contact NSA was hidden under ‘Helpful links’ and it wasn’t immediately obvious where to find the contact page. I had to scroll all the way down followed by trying to figure out where the contact page was actually located. The most important pages should not be hidden within sub-menus and also should be easy to access and minimise the effort it takes to get to that page.”
- “The colours were inconsistent and it was hard to read some of the text due to the poor contrast between the text and the background colour.”
- “All the Cybersecurity links were scattered all over the place instead of being placed in a centralised location where all the relevant links are in one place. Users should be able to access everything they need from one centralised location.”
- “I rely on intuition and the navigation should be designed in a way that caters to the intuition of users.”
I conducted around 5 usability tests of the current site to see what Sarah, my user persona, would go through if I gave her four tasks. All users were able to complete the tasks but it took them longer and also were initially confused upon first visit. They also commented on how the colour scheme and accessibility needed improvement. I combined my notes from the tests into a diagram.
2x2 MATRIX FOR GUERRILLA USABILITY TESTS
From the empathy map, I took what was important to our user Sarah and created a 2×2 competitive matrix to show the range of importance to the user and the NSA. This shows us what specific adjustments to the site have priority over the others.
ANNOTATIONS
Using my findings, I went through and made annotations of the desktop website to help myself visualise things that needed adjustments.
Annotating the NSA website served several important purposes:
- Identify pain points: Annotations highlight usability issues and user frustrations for focused improvement to the website
- Document observations: Annotations serve as a record of findings and insights for reference throughout the redesign process
- Facilitate collaboration: Annotations enable visual communication and feedback among team members and stakeholders
- Support data-driven decisions: Annotated findings provide empirical evidence to guide design choices and enhance the user experience
- Track progress: Annotations help monitor changes made to the website ensuring issues are addressed and objectives are met
DEFINITION AND IDEATION
To make improvements to the NSA website, the first step was to assess the current branding used on the existing NSA website along with the existing navigation.
I started by creating a moodboard of images and design patterns that most inspired me and fits clsoely with the branding guidelines of the NSA website.
UI STYLE GUIDE
The UI Style Guide I created uses a colour scheme of blue and green colours. I kept the font consistent and used a modern sans serif font to capture the modern government corporate tone to it.
The original website has colours of green, purple, along with blue. For the redesign, I wanted to go with a consistent colour scheme and portraying a more corporate vibe. The original colours on the website came across as more of a video game vibe and I needed to incorporate a font that portrays the corporate and government vibe to enable users to perceive the NSA brand more seriously.
I wanted to use typography and colours that are consistent and captures the serious and government vibe that I wanted for the NSA website. Since the website deals with serious topics relating to national security and counter-intelligence, it was important to me that I infused elements of serious, authoritative colours and imagery into the design.
This way, the style guide ensures a pleasant user experience while maintaining the seriousness and professionalism required for a government agency.
CARD SORTING AND SITEMAP
I utilised card sorting methods to improve the navigation of the NSA website. With a volunteer, I instructed a volunteer to follow the instructions:
- Examine the topics on sticky notes
- Group them based on patterns in the spaces, allowing category names to emerge naturally
- Create “Other” category for uncertain or unmatched topics, explaining the reason (e.g. lack of understanding or unfitting categories).
I decided to merge some categories together to simplify the navigation process and created new categories. By reducing clutter and simplifying it, this helps to build a sitemap that is more organised and easy to follow for users.
I noticed that the footer on the original NSA website was too cluttered with overwhelming amount of links. It was also clear that there is no personality or branding behind the NSA. I decided to adopt a simple approach of merging related items together so they can be accessed from one single location.
From here, I was able to take the results of the card sorting and make an improved sitemap. For the sitemap navigation, I used the LATCH principles of displaying the pages on the menu in alphabetical order to make it look more cleaner and organised for the user.
WIREFRAMING & PROTOTYPING
After finalising the sitemap, I transitioned to wireframing the navigation and homepage of the NSA website. These simplified visuals allowed me to do some five second usability tests on the home page with volunteers.
5 SECOND USABILITY TESTS
The five-second usability test is a quick and effective way to evaluate the initial impression of my design of the homepage within a very short timeframe. I aimed to assess whether the target users could quickly understand the purpose, content, and key elements of my design and if they found it visually appealing. At least around 5 volunteers participated in the five-second usability test, which was conducted via online meetings.
- For this test, we focused on testing the navigations for both the mobile and web prototype of the homepage.
- User tests resulted in an overall success of usability with some feedback to address for the high-fidelity prototype design.
OBJECTIVES
- Goal is for all of the users to find the page they want through the navigation menu.
EQUIPMENT
- The usability test was done via Microsoft Teams meeting.
PARTICIPANTS
- At least 2 participants for both the desktop and mobile version of the NSA prototype. Anyone who’s looking for the Cybersecurity page.
PROCEDURE
- Participants were asked to navigate between the menus and report any issues with finding the page.
- The test begins when the user is at the homepage for the NSA website.
- Once the test finished, user was asked to give feedback for the iteration.
FEEDBACK
- Navigation menu could be made simpler or have fewer options to go through (Is history needed on the menu or relevant?)
- The stock imagery could be improved through using licensed imagery and one that portrays the vibe about NSA
- Do we need the ‘Home’ button on the menu when we can click on the NSA logo to return to the homepage.
- The navigation menu for the desktop should have arrow symbols to indicate to the user that there’s a secondary / tertiary menu.
- The button sizes should be consistent and similar size to each other when displayed on the same page as the user is scrolling down.
- Apart from the above points, users thought the navigation was well designed and easy to navigate around with minor issues.
I took the negative feedback from the usability tests and made the necessary adjustments to the navigation and webpages. This included adding in arrows to the menu’s to make it more clear that there are secondary and tertiary menus hidden within the navigation header. The button sizes will be similar and consistent in sizing once we develop the high-fidelity prototype of the desktop and mobile version.
MID-FI WIREFRAMES
From there, I created the rest of my navigation pages and created mid-fidelity prototypes for the desktop and mobile versions of this site.
DESKTOP WIREFRAMES
MOBILE WIREFRAMES
HI-FI WIREFRAMES & PROTOTYPING
By combining the style guide with the mid-fidelity wireframes, I was able to create high-fidelity wireframes and prototypes that showcase the visual aesthetic and design elements while implementing the feedback from the usability tests of the original website. This integration ensures that the prototype reflects the intended look and feel of the final product, providing a realistic representation of the user experience for the NSA.
DESKTOP WIREFRAMES
MOBILE WIREFRAMES
USABILITY TESTING
I utilised the usability testing plan to come up with information. From here, I conducted around 8 usability tests: I then recorded the feedback and prepared some iterations to the final prototype.
USABILITY TESTING PLAN
PRODUCT WE ARE TESTING
Navigation of the NSA Redesigned Website
OBJECTIVES
- For users to find the Cybersecurity and Signals Intelligence page and report any challenges or difficulties finding the target page
EQUIPMENT
- Usability test done via Zoom meeting and recorded
LOCATION & DATES
- Online on 7th June 2024 via Zoom link
PARTICIPANTS
- At least 2 participants will be testing the prototype for both the Web and Mobile versions. Anyone who has an interest in National Security or working in Cybersecurity or related fields to find out information.
PROCEDURE
- Participants will be asked to navigate the NSA website and look for the Cybersecurity pages
- The test starts at the NSA homepage where they have a navigation menu along with other buttons to choose from
- Once task is completed or incomplete, participants are also asked to provide feedback on what can be improved for the website design in the comments section.
REPORTS
USER ONE – Feedback
DESKTOP
- Secondary menu of navigation does not work well on hover
- Icons are oversized
- Consider adding a drop shadow effect for blog post cards
- Spacing from the logo to the company name is not equally spaced
- Some navigation links are not working as intended
MOBILE
- Spacing needs to be improved with more white space to feel relaxed in layout, less cramping
- Padding needs to be applied left and right of the text, at the moment it is too wide. Aim for 30px
- The header needs to be amended for spacing to allow for the camera on the iPhone/Android devices.
- Darken the navigation menu with a more intense blue hue/
- Icons are oversized
- The images used are pixelated, replace with high quality stock imagery
- There needs to be equal width on the sides
- Enable horizontal scrolling in the prototyping
- Frames and groups need to be equally aligned and centred properly
USER TWO – Feedback
DESKTOP
- Add Chevrons to show the users where the dropdown menu’s are
- Add Breadcrumbs to show users where they are on the website
- Fix the little gaps in the menu between the navigation and the dropdown
- Some links are not working as expected, check the prototype
MOBILE
- Add padding in the menu – think of users with big fingers to improve accessibility
- Have colour hierarchy instead of padding with the menu’s and sub-menu’s
- Cybersecurity sub-menu needs a hyperlink to navigate to the Cybersecurity page
FINAL PROTOTYPE
CHANGES MADE
- Colour coded sub-menu’s to differentiate hierarchy of primary, secondary and tertiary menu’s.
- Added in Chevron’s on the desktop navigation to highlight to users that a dropdown menu is present
- Spacing and padding added
- Added breadcrumbs label on the pages
- Amended the hyperlinks on the menu navigation
- Added drop shadow effects to some layers to make it pop more
- Added a darker shade of blue hue to the navigation menu on mobile
- Fixed spacing between NSA logo and website title text
Below you can find the link to the final prototype.
REFLECTION
Lessons Learned
- Redesigning an existing website within branding guidelines is challenging and sometimes requires thinking outside of the box
- High-fidelity designs allow for detailed exploration
- Heuristic evaluation and annotations can be challenging
- Defining the mood for a government website has its challenges
- Prioritising a clean, user-centric, and intuitive webpage is crucial for an optimal user experience
- Interesting to hear user perspectives on the existing NSA websites regarding accessibility and navigation
- Colours could be improved significantly to make it more modern looking
- Best practice to build a responsive design on mobile wireframes first before transitioning to Desktop wireframes to ensure consistency in spacing and padding
- Useful to refer to other existing government websites for inspiration, both well designed websites and also not so well designed websites to learn from the mistakes of others
- Branding often requires a lot of thought and experience to convey it effectively to target audiences. Found it challenging to tweak the colours in a way that’s visually appealing but also in alignment with the NSA branding guidelines. Always learning new principles and concepts with branding guidelines and representation
- If given more time, definitely spend more time on the design and layout to ensure it captures the best interests of the target audience. Can be challenging to deliver a complete high-quality product within a short timespan but also being aware this is one of the challenges I can face when working on a design project in the real world
In summary, redesigning a government website on your own is difficult, but a rewarding experience. The high-fidelity designs helped me to dive deeper. The heuristic evaluation and annotations were challenging but was a positive learning experience as it helped me identify factors that can impact the user experience and it was important that I take these factors into consideration when designing my next webpage. Creating a mood and developing a unique style that aligns with the government brand is difficult. I am pleased with the design I was able to come up with in this project.
What’s next?
To enhance the user experience, I aim to focus on iterative improvements for the navigation and homepage UI elements. Conducting additional usability tests, including 5-second usability tests, will allow me to make informed iterations based on actual user feedback. Furthermore, I plan to expand the website by creating additional pages that dive deeper into the various topics featured on the homepage. This will help provide users with more content to explore beyond just the home page and navigation.