National Security Agency (NSA | CSS)

Govt. Agency Website Redesign

The National Security Agency (NSA) is an intelligence agency for the U.S. Department of Defense. NSA is responsible for global monitoring, collection, and processing of highly classified information for intelligence (foreign and domestic) and counterintelligence purposes.

Problem: NSA's current website has an overwhelming amount of data and its confusing structure makes it difficult for its users to consume information.

Solution: My team at UC Berkeley set out to reimagine the usability of the website with a restructured IA, content strategy, and integrated tech-forward UI elements to make it more accessible.

My Role: UX Researcher

Duration: 3 weeks (Jan 2020)

Tools: Figma, Abobe XD, FlowMapp, Draw.io, GoodNotes

Methods: Double Diamond Design Process, Content Analysis, Usability Studies, Testing, Interviews, Heuristic Evaluation, Card Sorting, A/B testing, Wireframing, Prototyping, Design System

Overview

My team was tasked with redesigning a government website at UC Berkeyle's UX Bootcamp. After some research, we chose the complex and data-intense powerhouse - NSA! Given their abundant content and confusing navigation, we set out to reimagine the website and make it clean and accessible with a tech-forward UI design.

The Process

We used the Double Diamond design methodology to strategize our new design system. It helped us identify user goals, frustrations, and point points which we incorporated in future site development.

We began our research process by undertaking an in-depth content analysis of the current NSA website and its design. In addition to this, we also looked at other online resources and their social media presence such as their Facebook groups and Twitter handle. Drawing patterns from this data, we created a persona and recruited participants for our initial usability testing. To discover our problems, we conducted semi-structured Guerilla Tests with 5 participants focusing on 3 main functions such as:

Information Architecture

The website's current information architecture lacks organization and content prioritization making the website overwhelming and confusing to access. We recorded patterns of content problems from our usability testing as well. We conducted a closed card sorting exercise with 5 participants and its analysis helped us reorganize content based on significant and logical flow while maintaining NSA's brand voice. By removing redundant content and repetitive links, we were able to make the navigation system more clear and specific.

Sitemap representing the new hierarchy and navigation structure.

Through our heuristic evaluation and annotations, one of the many things we learned that the current website's design system fails color testing affecting accessibility and readability.

With clarity on ideas, we began creating sketches and wireframes. After multiple iterations of our wireframes, we had 2 versions we wanted to test out. We conducted A/B testing with our wireframes with 5 users.

One of the main ideas was to change the navigation from horizontal to vertical, however, through A/B testing, we discovered that users preferred horizontal navigation as opposed to a vertical dropdown so we incorporated this insight into our prototype.

Final Redesign Solution

BEFORE

AFTER

National Security Agency (NSA | CSS)

Govt. Agency Website Redesign​

The National Security Agency (NSA) is an intelligence agency for the U.S. Department of Defense. NSA is responsible for global monitoring, collection, and processing of highly classified information for intelligence (foreign and domestic) and counterintelligence purposes.

​

Problem: NSA's current website has an overwhelming amount of data and its confusing structure makes it difficult for its users to consume information.

​

Solution: My team at UC Berkeley set out to reimagine the usability of the website with a restructured IA, content strategy, and integrated tech-forward UI elements to make it more accessible.

My Role: UX Researcher

​

Duration: 3 weeks (Jan 2020)

​

Tools: Figma, Abobe XD, FlowMapp, Draw.io, GoodNotes

​

Methods: Double Diamond Design Process, Content Analysis, Usability Studies, Testing, Interviews, Heuristic Evaluation, Card Sorting, A/B testing, Wireframing, Prototyping, Design System

​

Overview​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

The Process

​

​We used the Double Diamond design methodology to strategize our new design system. It helped us identify user goals, frustrations, and point points which we incorporated in future site development.

Understanding what the agency does

Access to the pressroom or the Declassified documents

Finding more resources for students interested in a career at NSA

Users rely largely on mental models

They are annoyed with external/third-party links

They prefer intuitive autofill for search functionality

Clear navigation and fewer clicks are key for a smooth experience

Minimalistic layout structure makes them feel more comfortable and valued

The search button is more often used when an action is not immediately discovered

​Information Architecture

​

Sitemap representing the new hierarchy and navigation structure.

Through our heuristic evaluation and annotations, one of the many things we learned that the current website's design system fails color testing affecting accessibility and readability.

With clarity on ideas, we began creating sketches and wireframes. After multiple iterations of our wireframes, we had 2 versions we wanted to test out. We conducted A/B testing with our wireframes with 5 users.

One of the main ideas was to change the navigation from horizontal to vertical, however, through A/B testing, we discovered that users preferred horizontal navigation as opposed to a vertical dropdown so we incorporated this insight into our prototype.

Govt. Agency Website Redesign

Overview

We used the Double Diamond design methodology to strategize our new design system. It helped us identify user goals, frustrations, and point points which we incorporated in future site development.

Information Architecture

Final Redesign Solution