Redesigning the NASA app
Overview
Challenge
The challenge is to redesign the user interface of a popular app. I decided to redesign the app of NASA since it has amazing content, but it looks and feels pretty outdated.
Goals
Validate assumptions through research.
Redesign the NASA app based on these research insights.
Create a high-fidelity redesign including a prototype.
Tools
Figma, Google Forms, Notion, Slack, Zoom.Role
UX/UI DesignerDuration
24 hours (2-week period, part-time)Scope
Designing 3–7 screens, UX process optional.
Are you ready? 3, 2, 1, Lift-Off!
What do people think of the current app?
As a user of the NASA app, I love that they offer so much content about the amazing work they do. However, it’s tough to find information, challenging to read, and not an engaging experience overall.
“At NASA, we make air and space available for everyone.”
Let’s see if I can help make air and space more accessible for everyone!
Current design
Let’s take a look at the current design.
Assumptions
Looking at this design, I have the following assumptions:
It’s difficult to find information for the user due to the chaotic information architecture.
The app looks outdated and unexciting.
As a UX designer, I can’t build a redesign based on assumptions. Let’s validate them to find out what the users think.
Research
By doing some secondary research and guerilla testing, I want to find out what the user thinks of the current app. I discovered what they like and what they think could be improved:
Insights:
The user likes the content NASA offers.
The user thinks it’s difficult to find content due to usability issues.
The user says the content is illogically organized which results in a lot of clicking and confusement.
Current information architecture
So what makes it difficult to find content for users? What is the problem with the organization of content? I created a sitemap to unravel the current information architecture — and yeah, it’s pretty big:
Insights:
Lot’s of levels thus clicking before reaching content
The categorization is inconsistent and chaotic which results in an unlogical information architecture
Proto Persona
To have all these insights visible throughout the design process, I created a proto persona. At every next step, I’d be able to ask the question: “How might this help improve James’ experience?”
How could I improve the app?
Visual Competitive Analysis
What works well for the competitors? And how could NASA differentiate itself from the competition? Let’s analyze what its competitors look like.
Insights:
All competitors use the colors black, white and blue.
They have their categories listed instead of tiles, which gives way more overview.
They use only 1 style typography — A sans serif.
Brand attributes & mood board
Having learned what the competition does, it’s time to think about how NASA can differentiate itself from its competitors while staying true to its brand attributes. I wrote NASA’s brand attributes down and created a mood board around them to create a visual direction.
Colors
The color palette I created is based on NASA’s visual corporate identity. I added the bright red/orange color to make it stand out from its competitors and tested these colors by creating different card combinations. Lastly, I created extra gradient colors to make it even more exciting.
Typography
I decided to go with two different types of typography to stand out from the competitors. I chose the font Nasalization for the headers since it's used in NASA’s worm logo. For the titles and the body text, I went for Work Sans. It is a font that’s modern, simple, and easy to read. You can see these in the previous picture and on the style tile.
Style Tile
This style tile helps me to communicate the new visual language for the redesign. I included custom-made icons, buttons, cards, and a unique bottom navigation. It resembles the shape of the earth, moving as the user interacts with it, including the background lighting (see prototype).
Redesigned NASA app
Comparison between current vs. redesign
Homescreen
The home screen has a search function, featured content, and a toolbar at the bottom for quick navigation.
Search & Categories
There is now a dedicated page for searching and browsing instead of showing topics directly on the home screen. The topics have been categorized and each topic has its own icon for visual clarity.
Profile
The profile page is optimized for motivating the user to personalize their experience. In this way, they could access their favorite topics even faster and get notified.
Loading screen
An improved (skeleton)loading screen for better visual feedback.
Content page
The new content page allows the user to read the article’s text on the entire screen, show the picture on fullscreen, add it to favorites, and offer other options in a minimized menu.
High-fidelity prototype
Conclusion
This redesign of the app could offer their amazing content in a more accessible way. I would love to test it with users to iterate and further improve this design. Overall, I was over the moon during this project — pun intended.
Next steps
Testing and iterating the design.
Further improving the deeper layers of information architecture by applying sorting and filtering options.
Testing these solutions.
Adding animating pictures or 3D objects instead of 2D pictures.
What did I learn?
Optimizing screen space by building features in an efficient way thus understandable and continuous through the design — like the categories.
There is not one solution for restructuring the information architecture. The users all have their own preferences own searching for information.
Testing colors with cards is very effective to check if the color and contrast balance works well.
Main takeaways
NASA app users love the content but have a difficult time finding this content due to usability problems.
The information architecture’s problem is the categorization. This is visually and structurally inconsistent and chaotic.
The new design tackles this problem by improving usability, information architecture, and the visually improved user interface.
Thank you for reading this case study. Have you got any questions regarding this case study or do you want to get in contact?
Feel free to contact me!
— Robin 👋