Redesigning
NASA. Gov
.png)
Timeline
Three Weeks
Team members
Individual project-responsible for both UX research and UI design
Goal
Restructure and redesign the NASA website, streamline the navigation system, include direct links and eliminate multiple navigation gateways to guide users to career opportunities.
Problem Statement
The existing NASA website aims to offer details on career opportunities. However, the website does not meet users' expectations when it comes to finding the information. This is mainly due to the presence of confusing dual navigation menus and numerous gateways, which make it difficult for users to locate the desired information regarding career opportunities.
My Role
Research, Define, Ideate, Wireframe, Prototype, Test
I worked as a sole UX/UI designer for this individual project,handling every aspect from research, redesigning information architecture to crafting the responsive high-fidelity prototype.
-
created research plan
-
conducted usability testing
-
conducted heuristic and accessibility evaluation
-
analyzed findings
-
created sitemap
-
wireframed design solution
-
designed responsive style guide
-
designed responsive high-fidelity prototypes
Research
Proto-persona, Heuristic & Accessibility Evaluation, Redline & Annotation, Usability Testing
As a UX Researcher, my objective was to evaluate the navigation system and usability heuristics of the overall NASA website, with a specific focus on how users navigate from home page to efficiently find information on career opportunities at NASA.
I developed a proto persona for a recently graduated aerospace engineer who wanted to stay informed about NASA internship and career opportunities.
I began my research conducting heuristics and accessibility testing, followed by usability testing, to understand the pain points my persona would encounter.
Persona
Heuristic Evaluation
Heuristic evaluation allowed me to assess and rate the page under four categories, each comprising 10 subcategories. It allowed me to recognize the issues, and understand what was impacting the performance of the page. I rated them in the rating scale of 1 to 3, 1 being less effective and 3 representing the optimal performance.
This facilitated me to understand that the targeted improvements needed to enhance the performance of the page were in appearance/aesthetics and efficiency/functionality.
.png)
Usability Testing
To gain further insight into the user experience, I conducted usability testing to evaluate how users navigate the website to find pathway internship, and to identify any problems they may encounter while pursuing this goal.
The tasks that the users were asked to perform on page were:
-
Find pathways Internship
-
Get information on selected internship and apply for it
Results
While performing these tasks, users said that they found the website confusing and difficult to navigate.
-
The primary concern stemmed from the split structure of the top navigation, that led to uncertainty about where to find information on pathways internship.
-
Users expressed concerns towards the dropdown menus, noting their complexity and the presence of numerous links which may or may not lead them to internship.
-
An improvement users suggested was the inclusion of a direct link to the career section in the homepage that would streamline information related to career opportunities and enhance user experience.
Define
Redline & Annotate
Heuristic evaluation and usability test helped me uncover issues that I aimed to define as defining them would help me with insights for my design solution. so, I redlined and annotated the homepage to prioritize the issues , aiming to redesign effective and user friendly IA.
Information Architecture & UI Navigation Prototype
User Testing for IA
During the first usability testing, I was able to find some difficulties users had in navigation, I wanted to dig deeper into the information architecture, so, I held the usability testing with the same tasks, but without letting users to use search bar. I tested the tasks on both mobile and desktop.
Key insights
​
“I cannot find it, I tried a lot . I wasn't expecting Career under About section, it's weird.”
" I just don’t see it in the menu either. AH!! I am going through each menu.”
​
​
​
​
Results
-
​Users expressed frustration at having to search through each menu individually and said that the menu wasn't easy to use and didn't stand out.
-
Users felt that the misleading menu labels like "Benefits to you", led them to believe they could find internship information there
-
Users found the menu layout confusing as they weren't expecting "career" under About section. Majority of users tried looking on the footer for career, expressing their common expectation of the placement there.
​
​
​
​
Information Architecture Redesign
Card sorting & Sitemap
From the insights of the usability testing of the IA system of the original NASA page, I identified user pain points, and did card sorting to organize them under relevant headings, creating a structured information architecture system. This created a informed design of a user friendly sitemap.
As the original website of NASA had dual main navigation, multiple gateways and misleading menu labels. I ensured that the redesigned architecture was intuitive and logical.
Card Sorting
.jpg)
Site Map
Design
low-fidelity wireframes & five-second testing
In the wireframe redesign process, I began aligning the navigation with updated information architecture. When crafting the homepage wireframes, my aim was to declutter the layout compared to the original site and present well-organized, uncluttered information for a seamless user experience.
​
Design Goals
-
Highlight Upcoming Launches: Engage users with a hero section spotlighting upcoming launches.
-
Organize Key Initiatives: Streamline homepage with separate sections for Bold Missions, Upcoming Launches and Citizen Science Initiatives
-
Scrollable News: Provide easy access to latest news with a scrollable section
-
Footer Career Links: Ensure quick access to careers with a direct footer link
Desktop Low-Fidelity
Desktop 5-Second Usability Testing
The goal of a this rapid usability testing was to swiftly assess users' initial impression and identify potential issues with clarity and overall appeal of the wireframe.
-
3 out of 4 participants found the page trustworthy
-
2 out of 4 participants recalled Upcoming Events and News section
-
3 out of 4 participants understood the purpose of the page
-
All participants knew the indented audience of the website were users interested in space exploration and research and NASA
-
All the participants felt that the design was clear, well-sectioned and not crowded
Style Guide & High Fidelity
Responsive Style Guide, prototype & High Fidelity Wireframes
The style tile for this project was heavily influenced by my mood board. The mood board highlights the themes of constellations, dark skies and astronauts, setting the tone for the design direction.
-
Design Inspiration: Cosmic, enigmatic, evocative, astral and illuminating
-
Colors: Shades of blue, brown, and black dominate the color palette, reflecting the depth of space and mystery
-
Font: Abriel Fat is the chosen font, known for its bold and impactful appearance that aligns with the exploratory nature of NASA
Mood Board
Style Tile
Responsive Homepage Composition
While designing the Responsive Homepage Composition, I made sure I used the elements aligning my Style Guide. Key aspects I focused on while working on the responsive compositions were:
​
-
Mobile navigation challenge: Designing the mobile navigation required a different approach compared to the desktop version.
-
Grid optimization: Ensured the grid layout was appropriately adjusted for mobile, guaranteeing the text and content were optimized for readability and fitted well.
​
Additionally, I addressed discrepancies observed in the original website, where mismatches between images and description caused confusion. To rectify this I ensured that the UX writing matched the images shown on the homepage in both desktop and mobile versions.
​​
Style Guide
.png)
.png)
Usability Testing Results
In this phase of usability testing, my goal was to assess whether the redesigned responsive wireframe design, UI and IA systems effectively address the original pain points.
Testing Results for Desktop
The users said they found the home page design very professional and bold. They like the hero page, they said that the footer was very simple, the organized and sectioned cards and carousel made the page even cleaner. The suggestion that they gave in terms of difficulty they have to go through while navigating the desktop design were:​
-
the font size in the main and primary navigation is small
-
the next arrow on the section bold mission is very transparent, add visible color
-
the description texts below the cards are difficult to read
​
Testing Results for Mobile
The users thought that the page would look professional if certain aspects of design was worked on or revised. They found the design futuristic, if those suggestion were to be worked. The suggestion they gave while navigating the home page on mobile were:
-
Correct the spelling of Mission on the homepage
-
Change the color of upcoming section background or else changing the scrolling behavior of the section
-
Squeeze the Recent Article section
.png)
Final Thoughts
The restructured Information Architecture and redesigned UI made the page look professional. It made the users easy to search and retrieve information easily from the page.
-
Being able to evaluate the heuristic issues, accessibility issues and usability issues was profound, yet intuitive.
-
Experimenting with the components, cards, carousels and different states was tedious at times. But no wonder it brought so much life to life to our designing skills, and also using them to redesign a website on desktop and mobile. Learning and applying the RWD was insightful.
-
A lot of usability testing was kind of too much sometimes, but it is only the key to make our designs better.
​