Space Journey

In 2021, NASA Jet Propulsion Laboratory (JPL) collaborated with Adobe Creative Jam on a design challenge where competitors were tasked with solving a NASA-inspired space challenge. Over the course of one week, my teammate, Yoel Florimon, and I designed and prototyped Space Journey, an educational iPad app aimed at using NASA JPL missions to teach 11- to 13-year-old kids about space.
Bridget Wu - Lead UX/UI Designer
Yoel Florimon - UI Designer
1 week
Adobe XD, Photoshop, Lucidchart, Paper & Pencil, Zoom
Space Journey artist mockup

Design Process

Space Journey design process circles

With 7 days to design and prototype an app with at least 10 unique screens, Yoel and I knew we needed to work quickly. I immediately created a condensed timeline with a goal of completing the app in 6 days, with one extra day for emergencies. The steps we covered in our design sprint included define, empathize, ideate, design and prototype.

We started the first step in the process by answering the 5 W questions according to the design prompt given.
Space Journey essential features
The next step was conducting a quick competitor analysis to determine the pros and cons of other similar apps and sites. From there, we created user stories to better understand our users’ needs and goals.

Our main takeaways from this stage included:
1.   Information needs to be digestible
2.   Information should be supported by real and engaging pictures and videos
3.   Information should be presented in various ways and interactive tasks should be included to promote different modes of learning
4.   Saving and sharing features should be included to encourage and allow users to spread their knowledge
5.   Navigation should be simple and intuitive
Space Journey competitor analysis
Space Journey user stories
Our competitor analysis and user stories helped us  determine the essential features the app would need to make it successful and useful. We also created a user flow diagram to map out these features and see what kind of screens would be necessary for the app.
Space Journey 5 Ws questions
Space Journey user flow
Next, we sketched low-fidelity wireframes with pencil and paper. After we agreed on the general layouts of our screens, we turned to Adobe XD for our mid-fidelity wireframes. As this was a collaborative project, we created a shared file where we could work on the same file at the same time. Before we started wireframing, we decided to apply a 12-column grid to create an organized and consistent look throughout our screens.
Space Journey grid
Space Journey mockup
Style Guide
In our shared Adobe XD file, we compiled all of our components, colors, icons, and typefaces in the Styles page of the file. This later helped us build a style guide to show and instruct others on our final choices for all user interface aspects.
Space Journey style guide
We continued to use Adobe XD to create the high-fidelity wireframes and an interactive prototype. We also used Adobe XD’s auto-animate feature to make the app more fun and engaging for our users. We incorporated as many interactions and animations as we could, while making sure that they made sense in the overall flow and were not distracting or disruptive to the experience.
Space Journey prototype
Mock Ups
Space Journey mockups
Next Steps
While we were not selected as finalists in the competition, our ambitious timeline paid off when we were awarded 6 free months of Adobe Creative Cloud for being one of the first 100 teams to submit a qualifying project.

During this project, I was able to explore the collaborating and auto-animate features of Adobe XD. As my first team project, it was exciting to experience the collaborating features firsthand.

As for next steps, I would like to add more auto-animate features, such as speech playback, to make the app even more appealing. I would then conduct usability tests to validate concept so far. It would be important to find out if the app’s flows and visual design resonate with users or not. I would also like to see where there are areas of improvement as continuous iterations are an integral part of the design process.