Restructuring NSA.GOV • Personal Project
A case study in designing an accessible and transparent website
Role: UX/UI Designer; Team + solo project | Timeline: 4 weeks | Tools: Semrush; Figma; Otter.ai
Background
For the UX/UI design bootcamp I took through Columbia University, we completed an unsolicited website redesign for a government agency of our choice. My teammate and I chose the National Security Agency website: hard to navigate, with an overload of jargon and an inconsistent UI, the website makes the already mysterious organization even less accessible.
Problems
The National Security Agency’s website is hard to navigate, outdated, and filled with jargon and inconsistent UI.
Solutions
Redesign NSA.GOV and create a design system to standardize the UI across the site.
TL;DR
Don’t have time to read this whole thing? Here are the main takeaways.
-
The biggest challenge with this project was not having access to the organization’s data. We had to guesstimate who their target user was, what their goals were, and what the brand’s mission is. To make up for this, we conducted extensive online research, including traffic analysis.
-
The value of branding really stood out to me in this redesign. The way the NSA currently brands itself—through its website design, color palette, and language—is very inaccessible. It’s wordy, dark…it feels like it’s hiding something, which isn’t helping this organization’s murky reputation.
This was also a great exercise in information architecture. I found card-sorting to be valuable—it helped us sift through the mounds of content and get straight to what users want to see.
On a similar note, the number of pages buried on the current site proved the importance of future-proofing. Some of these pages clearly had no home, and thus valuable information was lost.
-
The final design is…
(1) Clearer, thanks to reduced jargon, improved informational hierarchy, and plenty of white space
(2) Trustworthy, with its official-looking color scheme and language
(3) Accessible, thanks to the two points above
-
I’d like to continue to explore visual cues, like button design and placement. I’d also like to get more users’ (and browsers’) opinions on the header gif, which some people found engaging and others found distracting, and, regardless, might require too much bandwidth to be realistic anyways.
Empathizing
Research
Since we couldn’t connect with the NSA, we used traffic analytics tools like Semrush to get a sense of who might be using the site.
The keywords bringing users to NSA.GOV—aside from the obvious “nsa”—told us that most visitors are looking to learn more about the organization and/or apply for a job there.
Surprisingly (or, maybe not), another search bringing people to NSA.GOV has internet lore to thank: “Illuminati” spelled backwards brings about 33,100 people per month to NSA.GOV.
Our traffic data informed our proto persona, Brad, a 20-year-old college student studying cybersecurity at GW.
Brad is trying to decide where to apply for jobs after college, so he’s looking to learn more about the NSA and the opportunities it offers.
Our 5 user tests followed what we’d imagine Brad’s path to be: exploring the NSA site and then looking at the careers page. Many testers complained about the surplus of information and jargon on the site, as well as its outdated design.
“When I see big chunks of text I get intimidated, especially when it has words I don’t know.”
Pain points
“...Now I’m very confused.”
Confusing: Not only is it filled with jargon, this website is designed as a maze, with each page serving more as a storage unit for links to other pages rather than having useful information on it—terrible for usability and SEO. Plus, the navigation bar requires scrollers to remember what page they’re on rather than telling them, making it easy to get lost.
Outdated: A part of me loves that the NSA went for the 1990s cyber neon green, but it’s just not the trust-building color palette we expect today. With parts of pages getting cut off, it felt like it wasn’t designed for today’s browsing.
Inaccessible: With some light text and outlines not passing accessibility standards, not to mention the inaccessibility of the jargon littered across the site, NSA.GOV needed some work.
How might we design a site that’s easy to use and builds trust with visitors?
Brainstorming
Heuristic analysis
Heuristic analysis let us point fingers at what was wrong with the site. Some of the main culprits:
Thin, lightly colored text that’s hard to read
Inconsistent alignment
Poor information hierarchy
A web of buried pages that’s easy to get lost in
Jargon that doesn’t help an already-murky organization
Information Architecture
We wanted to tackle the navigation first. Card sorting proved our hunch—that the current layout wasn’t logical—while a content audit revealed that the website had buried some key resources.
Our new sitemap brought these to light and used everyday language to be more accessible to visitors.
One of the most challenging parts of this process was the content itself: lacking backgrounds in cybersecurity, my teammate and I sometimes were stumped by the jargon we were facing. Google helped.
Market Research
With a redesigned sitemap, we moved onto the solo part of the project.
Before starting the redesign, I wanted to see how other government security sites were structured. While many had UI/UX issues of their own, they also gave me some inspiration with their card layout, patriotic color schemes and half-page divisions.
Designing
Following the atomic design process, I created a style guide and a series of components for my responsive site to follow.
I used a blue color scheme to build trust: blue is used across government sites and is also associated with trustworthiness. I also used the Montserrat font, which has a loose kerning and squat letters to drive home a sense of modernity, approachability and breathability.
With the amount of complex information on the site, I wanted it to be easy to skim. I embraced white space, large text and kept the old website’s cards—though I updated the design for clarity, improving color contrast, de-jargoning the language, and keeping consistent alignment.
A main destination for users, the careers page needed some attention. The current layout doesn’t identify what page it is, has uneven spacing on the hero bar, plus an illogical information hierarchy. For example, the Employee Spotlight is centered at the top of the page’s cards—but the users we interviewed didn’t care about it. What they did care about—career opportunities—was left on the periphery.
I restructured the page to create a clearer design with an emphasis on finding jobs. Buttons for finding opportunities by field, as well as a scroll card for open positions, were placed at the top.
Iterating
I conducted seven user tests on the new site, and received valuable feedback: Certain visual cues—like carrot icons indicating dropdown menus—were confusing to some testers, while there were mixed reviews on the gif in the header (an element that was fun to play around with, though probably wouldn’t be worth the loading speed cost in reality).
In my iterations, I focused on improving these visual cues and maintaining style consistency throughout the site.
Conclusion
This project was a valuable exercise in information hierarchy. The way people expect information to be structured is always fascinating to me, and this was no different. Not to mention the accessibility challenges that come with complex topics—such as international cybersecurity intelligence—reinforced the importance of writing inclusively.
Achieving goals
Improved clarity: The new website is written for everyone—not just people with a background in cybersecurity. Strategically placed white space makes it easy to skim and process information, while the menu bar and a breadcrumb navigation prevents users from getting lost on the site.
Improved branding: This blue and gray color scheme is in lockstep with other government organizations’ and helps enforce the NSA as a cutting-edge organization.
Improved accesibility: With its new color scheme and decreased jargon, NSA.GOV lost a bit of its mystique—for the better. Now, it’s accessible to everyone.
