NSA Redesign
Timeline
Overall: July 2023 - August 2023
Discovery & Research: 3 days
Design & Testing: 10 days
Team (3)
Yarisel
Krissalys
Michael
Roles
UX/UI Designer
Wireframing
Prototyping
Usability Testing
Research & Analysis
Design Iteration
Tools
Figma
Miro
Trillo
Google Forms
Slack
Overview
The NSA, an American intelligence agency, collects and distributes information on foreign nations. As part of a design challenge, the goal was to improve the NSA's website and mobile platform. This redesign aimed to enhance user experience, making it easier for people to understand the NSA's activities. My research and analysis focused on the NSA's functions and user needs to create a platform that effectively communicates the agency's role in national security.
Problem
The NSA's website and mobile platforms had several issues, including difficult navigation, outdated visual design, and inconsistent user experience across different devices.
Goal
The primary goal of the NSA redesign was to improve the user experience by enhancing website navigation and layout, modernizing the visual design, and ensuring consistency across desktops, tablets, and mobile devices. Additionally, the aim was to create a platform that accurately represents the NSA's mission and values.
Solution
To address the identified issues, the redesign focused on reorganizing the website layout for better navigation, updating the visual design to reflect the NSA's innovative work, and providing a seamless user experience on all devices. By focusing on accessibility, engagement, and user needs, the solution ultimately led to a more effective and user-friendly platform.
Research
Competitor Analysis
To enhance the National Security Agency's (NSA) online presence, we analyzed the websites and mobile apps of direct and indirect competitors to understand their design choices, navigation, and user experiences.
Direct Competitors
LookingGlass Cyber Solutions
Strengths
User-friendly, modern, and clean layout with easily identifiable keywords and consistent design.
Weakness
As an outsourced company, it lacks the intrinsic alignment with government operations.
Strengths
Promotes innovation in regtech, fintech, and cybersecurity, aiding in IT audits and setting standards for cyber resilience in Indian banking.
Reserve Bank Information Technology (ReBIT)
Weakness
Focused solely on Indian banking cyber resilience, limiting its global applicability.
Indirect Competitors
Strengths
Offers sustainable cybersecurity solutions, leveraging a global network for innovative, environmentally beneficial results.
Hitachi Vantara
Weakness
Pentaho Business Analytics software vulnerabilities, which can be exploited by attackers.
Strengths
Connects industry and government stakeholders, providing tools and resources for enhancing cyber, communications, and physical security in the US.
Cybersecurity and Infrastructure Security Agency (CISA)
Weakness
Limited to the US government without outsourcing to external partners or companies.
To view the Competitor Analysis in more detail, click here!
Persona Development and Impact
To design a user-friendly NSA website that caters to the needs of student interns like Alexander Devi, we focused on understanding our target audience. We gathered data on the demographics, challenges, and preferences of student interns in the technology sector and used this information to create a persona representing their needs, goals, and expectations.
Throughout the design process, we referred back to Alexander's persona to ensure the website's usability and user-friendliness. We prioritized streamlined navigation, clear information on internship opportunities, and an overall user-friendly experience. By keeping Alexander's needs in mind during ideation, prototyping, and implementation, we were able to create an NSA website that effectively serves potential student interns.
Proto-Persona: Alexander Devi
Alexander Devi is a student engineer passionate about technology. He visits the NSA government agency website with the goal of applying for their student internship program. His goal is to gain hands-on experience in the field and make a valuable contribution to the agency.
Integrating Research: Wireflow Representation, and Heuristic Evaluation
To view the Heuristic Evaluation report in more detail, click here!
-
![Wireflow: User Flow]()
Wireflow: User Flow
As Alexander navigated the NSA website, he struggled to find the student internship page due to poor navigation. He was also disappointed by the website's lack of user-friendliness and frustrated with outdated content and limited transparency in the application process.
-
![Heuristic Evaluation Home page]()
Heuristic Evaluation Home page
Alexander found the NSA website's outdated design and inconsistent layout disappointing, particularly the student internship page, which seemed out of place. These issues led to a poor user experience, highlighting the need for government websites to prioritize modern, consistent design and user-friendly navigation.
Interview Insights:
Our primary objectives for the interview questions were to understand the user experience when navigating to the student program page on both desktop and mobile devices and to identify any pain points or areas for improvement in the website's design and functionality.
Objectives
Our interview questions aimed to understand user experiences on desktop and mobile devices and identify areas for improvement in the website's design and functionality.
Users interviewed
We conducted interviews with a diverse group of users to gather various perspectives and experiences.
Main insights
The interviews revealed issues with navigation, content organization, application process, and design elements, causing difficulties for users.
Application of findings
We used the insights to make the following enhancements:
Improved website navigation and content organization for a more intuitive experience.
Streamlined the application process and made relevant information easily accessible.
Addressed user feedback on design elements to improve the overall user experience.
These interview insights greatly contributed to our redesign approach, leading to a more user-friendly and functional NSA website.
Ideation & Design
Card Sorting and Site Map
Our primary goal for card sorting was to better understand user preferences for organizing content on the NSA website. We used an open card sorting method in which participants grouped content cards into categories based on their understanding. This revealed a preference for a simple, intuitive navigation structure with clear labels.
To meet user preferences, we created a new website structure with streamlined navigation and improved search functionality. We modified the original NSA site map by extracting a column and aligning it with our objectives. The updated site map includes categories such as Home, About, History, Press Room, Careers, and What We Do, reflecting user-centric content organization and an enhanced navigation bar.
Card sorting visualizations and the revised site map demonstrate user preferences, resulting in a more accessible, efficient, and user-friendly NSA website.
-
![Open Card Sorting]()
Open Card Sorting
-
![Completed Card Sorting]()
Completed Card Sorting
-
![Site Map]()
Site Map
Visual Identity
To create the final screens for the NSA website, I focused on a sophisticated visual style that aligned with the brand's values and message. The color palette featured deep blues, greens, and golds to convey professionalism and trustworthiness. I followed popular design guidelines like Material Design principles for a modern, user-friendly experience across multiple platforms and devices.
To ensure consistency with the visual branding of the NSA, the design process implemented the use of a comprehensive style guide. In addition, inspiration was taken from existing user interface designs to identify specific elements that best captured the mood and atmosphere conveyed by the moodboard. This approach helped create a cohesive and visually appealing website that effectively represents the NSA's brand and complements the aesthetic of the moodboard.
Streamlining the Design Process with Wireframing
In order to optimize our redesign process for the NSA website, we decided to transition directly to the wireframing stage. This allowed us to focus on enhancing the user experience while effectively managing time constraints.
We chose Figma as our primary wireframing tool, thanks to its collaborative features and versatile design capabilities. It facilitated real-time collaboration within our team and made it easy to share our progress.
Testing with wireframes was a crucial component of our design process. We conducted usability tests with a small group of users. Their feedback led to improvements in navigation, content organization, and layout. Throughout the process, we completed three iterations, incorporating feedback from our team and design critiques.
Homepage Wireframe
Mobile Wireframe
We emphasized responsive design and carefully adjusted the wireframe to ensure an intuitive and efficient user experience. After finalizing the wireframe, we proceeded to create a clickable prototype. Using usabilityhub.com, we gathered feedback and evaluated the prototype's usability by asking participants a series of questions.
“I noticed the footer wasn't on the homepage when we tested the prototype.”
“It's super easy to use, and everything flows nicely.”
“I had a pleasant experience exploring the website.”
“The website was easy to navigate and understand.”
Presentation
User Insights to Final Implementation
To ensure the NSA website was accessible and user-friendly, I designed it for both desktop and mobile devices. This approach provided a seamless user experience across different screen sizes.
The final design reflects my learnings about the users by addressing their needs for clear, intuitive navigation and easy access to information. User testing revealed challenges with navigation and clarity, which were addressed in the redesign. The improved website now features a user-friendly interface and comprehensive content.
User testing was essential in identifying and fixing potential issues before the site's launch. This process highlighted the importance of user feedback in creating a successful online platform. During the design process in Figma, I encountered unforeseen difficulties with website animations, which required adaptability and perseverance to overcome. The final desktop and mobile designs adhered to a consistent style guide, ensuring visual branding consistency with the NSA and resulting in a cohesive and visually appealing website.
Mobile design before
Homepage design before
Mobile redesign
Homepage redesign
Key Takeaway & Future Projects
Despite facing challenges during the website creation process, I was able to achieve the desired look and feel through persistence and adaptability. When my initial animations were not successful, I demonstrated flexibility by adjusting my plans and exploring alternative solutions. To address potential issues proactively, I conducted a thorough testing process to identify and rectify any concerns.
Next steps
If given the opportunity to continue this project, I would prioritize:
01
I would focus on adding new pages and enhancing existing features.
02
expanding the website’s functionality with additional interactive elements.
03
work on incorporating more user-centric features and improving performance across all devices.
Revisiting the final design
I would enhance the site's responsiveness and accessibility, refine the user interface for better intuitiveness, and focus on improving visual consistency.
My advice To the next designer
I recommend prioritizing user feedback and performing thorough testing at each stage to detect and address problems early on. Be adaptable and open to exploring alternative solutions when initial ideas don't pan out. Maintain persistence and flexibility, and always carry out comprehensive testing to catch potential issues.
Growing as a Designer
Throughout this project, I significantly developed my skills and gained important insights that will influence my future design practices:
I enhanced my abilities in responsive design and user accessibility, understanding the importance of creating an inclusive experience for all users.
My problem-solving skills improved as I adapted to challenges and discovered alternative solutions.
The project reinforced the significance of perseverance and adaptability, teaching me to embrace feedback and carry out extensive testing to ensure optimal user experiences.
These learnings have broadened my perspective as a designer and will shape my approach to future projects, emphasizing user-centered design principles and a commitment to continuous improvement.