Pocket Planetarium

Honorable mention at the 2021 Adobe XD x NASA Design Competition

Background Info

This project was submitted as part of a weeklong UX design challenge hosted by Adobe and NASA. I partnered up with another UX/UI designer, Annie W., for some cross-timezone collaboration.

Timeline: One week, May 2021

Tools: Adobe XD, Zoom

Result: Placed in the top 20 out of 173 submissions and 525 participants.

Project Scope

The Challenge: Help kids (11-13 years old) learn more about space exploration by teaching them about a single or multiple NASA JPL missions. Design a third-party tablet or iPad app that provides an engaging way for kids to share space stories, facts, and topics.

How do we create a learning experience that resonates with middle schoolers?

Designing for kids comes with a whole different set of considerations than adults. The development of a child grows exponentially from year-to-year and designing for preteens can be particularly challenging- we want to ensure that the experience is appropriately aligned with their cognitive abilities and doesn't feel too juvenile or advanced. By constantly thinking about their needs and desires, we can build an experience that resonates with them.

Solution: Guide users on an immersive, engaging journey that teaches about a JPL mission by providing bite-sized pieces of information along the way. Users will collect rewards to receive instant gratification as they work towards completing their mission.

Research and Competitive Analysis

Competitive Analysis - Pocket planetarium.png

While looking at other educational/space-related apps, we noticed that the graphics, language, and exercises were either geared towards a much younger demographic (elementary) or a more mature audience (high school). From what we observed, there seemed to be a void for educational apps for the middle school audience.

We analyzed a few apps geared towards a younger audience (Astrology & Space for Kids, Solar Walk Lite, and Solar System: All About Space), as well as a more mature audience (NASA). The following are the insights we drew:

KEY LEARNINGS & OPPORTUNITIES

1) Introduce a reward system - gamification provides kids with an incentive and reason to keep using the app, whether it is to collect points or to beat their friends

2) Make it easy to take a break - the skip and pause functions were hard to find on some of the apps we analyzed. Kids have a shorter attention span than adults and need to take breaks more frequently so we need to bring these features to the forefront and improve their accessibility.

3) Kids can be easily overstimulated - present only the information necessary and eliminate clutter.

4) Be clear and concise - kids need to know what they are doing, why they are doing it, and their end goals. Kids are less willing to take the time to figure something out if they do not understand the objectives.

5) Storytelling makes learning fun - kids learn by doing so we want to take users on a guided journey with a fun narrative

6) The storyline structure is a great way to present information to kids in a guided manner, however there is a rigid and outlined path users must take. There is no autonomy to choose your own journey option or pick up where you left off - you must go through the entire journey from the beginning even if you have already completed it before which leads to a frustrating experience.

Sitemap and Wireframing

We chose to teach kids about the Juno satellite mission to Jupiter - a mission that enabled us to learn more about the formation of Jupiter and its role in the development of our solar system. Users will be guided through the journey via an astronaut mascot and a narrated storyline.

After gathering the aforementioned insights, we had an idea of what we wanted to incorporate into our designs and how. We developed a site map so that we knew what pages needed to be developed and then proceeded to build out mid-fidelity wireframes.

We divvied up the pages that needed to be created and we each built out our share of mid-fidelity wireframes. Once we agreed on the structure and layout we could shift to focus on the visual direction.

Style Guide

Typography

Prototyping

With these mid-fidelity wireframes in hand, my partner and I built out the high fidelity wireframes for the home screen and mission pages together. With these screens as a baseline, we then decided on the colors and typography and established a style guide. We also settled on using an astronaut as the mascot to guide users on their missions. Once we finished our high fidelity wireframes we prototyped them together; below are some of the high fidelity screens we created:

Usability Testing

To ensure our designs were hitting the right mark in terms of the language and challenge level, we conducted usability tests on Zoom with two family members that were in our demographic range. We wanted to gather their overall thoughts and test the following:

1) How to take a break from the game

2) How to navigate and play the games

3) Readability - is the language easy to understand?

WHAT WE LEARNED

The journey and mission is straightforward and easy-to-understand

The dodging game is similar to another game they like to play where they collect coins

Some of the text was too long and overwhelming

The balance and mix of real photographs and cartoony illustrations was appreciated

It would be fun to have unique customizations for the astronaut

WHAT WE CHANGED

Broke up larger bodies of text into smaller chunks to minimize cognitive overload

Incorporated suggestions for our space store - fun, customizable hats, accessories, etc. to dress up your astronaut mascot

Added a back button to every screen for improved experiences

Final Designs

1. On our quest to make learning fun, we created a journey that gave kids choices and didn't feel restrictive. We prioritized autonomy and wanted to give our users the freedom to make their own choices and explore as they wish, yet still provide support and guidance. From the start, users can choose which planet they would like to explore.

2. Kids can be overstimulated easily. Present only the information necessary to eliminate clutter. When conducting the usability test, one of the participants noted that the mission page was a bit wordy and long. Based on their feedback, we broke up the mission and objectives into two screens.

3. Kids need to know what they are working towards and must understand what is expected of them. The progress bar informs users of where they are in their journey and how much more needs to be completed before they reach the end.

4. Make feedback fun to keep kids engaged. By incorporating animation, we can retain the user's attention. We also utilized the user's name wherever possible, including in the feedback as seen here. While personalization is always a nice touch for any age group, it helps even more to keep kids interested and engaged.

5. Kids enjoy collecting rewards. Kids collect star coins along the way through the games and tests and can redeem them any time at the space store within the app to buy accessories for their astronaut mascot - whether it be a new helmet, purse, etc. This further keeps them engaged and motivated to use our app.

Reflection and Next Steps

This week-long design challenge helped me expand my design skills as I crossed off a lot of "firsts" on my list. This was my first time using Adobe XD, my first hackathon competition, and my first time designing for kids. From this experience, I learned the following:

Working remotely with my teammate taught me the importance of collaboration. I learned a lot from her, especially in regards to UI principles, and know that the more I work with other designers, the better I will become as a designer. Additionally, given the time constraint, it was incredibly important to split up tasks. I certainly couldn't have done this without my partner, Annie!

Kids are very smart - do not underestimate their skills and capabilities. Even through usability testing, I was blown away by how advanced my niece is when it came to her reading comprehension and ability to articulate. She was able to pick bits of information up quickly and intuitively.

The beauty of designing for an app is that we can bring information to life and enable kids to learn beyond the traditional textbook methods.

Due to the constraints of time, we didn't get to incorporate as many animations as we would have liked. I would like to further my skills in this area as it has such powerful capabilities to really bring the user's journey to life and keep the audience engaged. I also would like to harness the voice-over capabilities in my next design.

Thanks for reading!

Please feel free to explore the prototype and reach out with any comments, questions or feedback!