Adobe Creative Jam and NASA UX Design competition
The Challenge:
Help kids to learn more about space exploration by teaching about a single or multiple NASA JPL missions. By designing a tablet app that provides an engaging way for kids to learn and share space stories, facts, and topics.
The Judging Criteria:
Target audience and their needs
Solve the problem in an innovative way
User experience and intuitive interface
Visual design considerations
Problem Space
Let’s begging by saying that we were given complete freedom to develop this idea and that up to the present the JPL NASA website doesn’t have a version dedicated to children. Meaning, even that the fact was just a 10 frame task flow was required we also focus on envisioning the whole app, without forgetting our main challenge.
At the kickoff meeting the representative of NASA talked about how he was inspired as a kid and son of an Astronaut and also the topic inclusion was mentioned, we started ideating and visioning that this app should feel fun and with the flexibility of helping Generation Z to feel absolutely included. The reason why we called our project ExploreZ.
Sketches
Besides creating sketches for the features of the app, we also developed some storyboard sketches. As a team, we wanted to also focus on the storytelling by creating an adventure we the kids can truly feel that they are embarking on an adventure to help NASA on the missions on our Solar System. The reason why we considered how we could animate such elements by using the auto-animate option from XD (one of the requirements from the challenge.)
A raw sketch of the visual storytelling about the fun options, such as creating the astronaut suit, customizing the space ship and having a mission control dashboard where the user can interact with and explore the characteristics of the mission of their choice.
Exploring the option of adding a fob button for the menu, considering the fact that the mission menu at the JPL NASA website has many options. We questioned how to present such a rich menu on a fun way, which we envisioned the menu opening as orbits.
Wireframes
After the task flow was defined, considering all the features that the challenge presented, a series of low fidelity wireframes were developed to quickly visualize the vision of the task flow.
UI inspiration
For this study case, we considered components from in-category apps for kids. We looked for creative menu interpretations, how to make interactive and fun customizing the astronaut suit and spaceship, and different illustration styles that would effectively resonate with the audience. In addition to UI components, we also looked for interactive animations inspiration.
Prototype
Working in remote collaboration, the design of the prototype included digital collages that were developed by using different elements; such as images from the NASA library, stock images, and illustrations to create some of the custom assets. The prototype was designed with Adobe XD, with the support of Adobe Photoshop and Adobe Illustrator to enhance the look and feel of the app.
One of the challenging requirements was to integrate the Adobe Xd auto-animated tool into the prototype. We utilized this tool not only for the behavior of the components but also took the chance to animate other elements of the design, for example, creating the floating sensation of the astronaut micro-animation on the intro page. Thanks to the opportunity of this competition, and by using the auto-animated tool I was able to recognize so many ways of implementing this tool into a digital product, which I believe can be of great use when developing and executing unique user experiences.