UX/UI Case studies

National Security Agency
Website Redesign

Project Overview

The NSA exists to inform and protect the public from potential threats to National Security, in both the real and cyber worlds. The current website tries to adhere towards information and transparency, but loses interest quickly for those outside of the security world.

Problem Statement

How do we redesign the product to be more compelling, interesting and fun for the common individual, but keep the tone professional, and not lose sight of the Agency’s goals?

My Role

As a team, we performed user research and competitive analysis, and created user flow, wireframes and prototype in a 3-week sprint. I worked on this project as part of my University of Minnesota UX/UI Design course.

Tools

Figma - Miro - Invision - Adobe Photoshop - Adobe Illustrator

User Research

Our research was based on 3 questions:
1. How easy is the website to navigate?
2. Is the website pleasing to the eye and interesting?
3.How much information is necessary for the average public?

Research Findings

We ran numerous different analysises on the original website, including user testing and Usability, Accessibility and Navigation Heuristics. The data from the tests showed that while not incredibly difficult to navigate, the visual appeal of the website was lacking.

Most users pointed out sizing inconsistencies throughout the site failed to give it proper hierarchy, and far too much use of white/negative space. There were also some color usability issues, which included dark colors on dark backgrounds, and layout problems in specific browsers.

Seeing as none of our users were particularly interested in the site before testing, not a single one claimed viewing the website made them anymore interested in what the NSA does.

Definition & Ideation

Through testing we were able to pin-point user pain points across the site, and created an Affinity Diagram and User Persona to give us a better idea as to how to design the site based on the data. After card-sorting, we were also able to create a redesigned sitemap in hopes of overcoming the confusion caused by the navigation dropdown links and the free up space in the footer.

Our testing also gave us a good deal of feedback on the overall color scheme and the look and feel we wanted to give the updated site. After discussion and a feedback session, we created mood boards showcasing what we thought would be the best direction to go in the overall tone of the website. We decided to play on the history and nostalgia of the NSA, as well as the agencies inspiration in entertainment and media, giving the site a “Noir” tone with gritty “Cold War” imagery, but keeping the technology - both old and new -front and center.

Prototype

After testing and iteration, we came up with an overall design that we thought would not only be visually appealing, but also pique the interest of the users. We wanted to have an air of mystery behind everything, but also keep the user updated and informed. To do this, we adopted a “High-tech” but “Cold War” look, using the main green color from the original page, but adding in darker tones and different shades of gray, as well as black & white imagery.

As stated, the inspiration was the agency’s own history, as well as how entertainment and media has romanticized spycraft throughout the years, stretching all the way back to Hollywood’s Golden Age with films like “Casablanca” and “Notorious,” to Cold War classics like “The Conversation” and “Three Days of the Condor,” as well as new entrants like “Bridge of Spies,” “The Imitation Game,” and film series like James Bond and Jason Bourne.

View Prototype