App redesign | NASA
Overview
The goal of this project was to redesign a few screens of a well-known native mobile app. I chose to redesign NASA’s app because I’m fascinated with astronomy. However, I felt that the current app wasn’t visually optimized and didn’t match the design of their other platforms.
Scope & Constraints
The timeline for this project was only 3 days. Given the limited timeline, our primary objective for this project was to enhance our visual and user interface (UI) skills, rather than focusing extensively on user experience (UX) through user research.
First step
I started by cloning NASA’s screens for Home, Featured, and Sky Map. Through the process of cloning, I had the opportunity to familiarize myself with Figma and gained valuable insights into potential improvements for the selected pages. However, conducting a heuristic evaluation proved to be a crucial step as it allowed me to systematically identify and categorize the issues I encountered while navigating through NASA’s app, enabling me to focus on the improvements I wanted to make.
Main insights from Heuristic evaluation:
I used Nielsen’s heuristics and I evaluated each problem according to how much it blocks users to reach their goals. These were the main problems:
- The current design lacks a call-to-action (CTA) and displays categories without a clear hierarchy.
- Users are required to scroll down to view the last row and see the full-sized image, risking missing the lower part of the image or assuming there is more content below.
- Title categories, such as ‘AR Models,’ are non-clickable. Additionally, black images are presented without any accompanying call-to-action (CTA).
- The preselected icons being in red colour can be confusing for the user as now works when the user is activating the future, but red can be associated with an error.
- The Sky Map menu lacks accessibility, and the Star typography is only utilized in one section and does not reappear throughout the app.
Competitor’s analysis
Before moving to the UI stage, I conducted a benchmark visual analysis: Tesla and Spotify. This helped me to measure how these brands applied their visual identity, their use of colours, and what kind of user interfaces they were using for their native mobile apps giving me inspiration to redesign NASA’s app.
Ideation: Moodboard & Style Tile
I created a moodboard based on the attributes that I believed best suited NASA for the app redesign exercise: innovative, futuristic, timeless, aware, and scientific. When it came to the colours, I aimed to maintain as much affinity as possible, so I decided to preserve the iconic blue.
Atomic Design
Based on my visual analysis and moodboard, I created a style tile incorporating an atomic design structure to organize the new visual identity.”
High Fidelity Prototype
After completing the new identity and logo redesign, I initiated a brainstorming session to explore potential layout changes. The objective was to create a new UI redesign that maintained the existing content while introducing a fresh identity. This new design aimed to align with the brand’s values and offer users an innovative experience by incorporating clear call-to-action (CTA) elements and a well-defined hierarchy. Furthermore, I introduced a new art direction to enhance the overall design.
Before and After results
I enjoyed this quick re-design project, as it provided me with valuable insights into evaluating existing designs. It allowed me to assess the significance of various issues and reevaluate my own decisions, while having the freedom to explore new design possibilities.
Key Learnings
One of the pivotal stages in this project was the Heuristic Analysis and Competitor Analysis. These analyses helped me identify areas for improvement and opportunities to design a more unique proposal that maintains focus on the app’s features while communicating hierarchy in a clear and modern manner.
Next Steps
Moving forward, my intention is to conduct usability testing and A/B testing. These tests will allow me to gather direct user feedback and identify areas for improvement. Implementing these insights will help enhance the design and deliver a more user-centric experience.
