Mars Rover App
A tablet app to help Jr High students learn about NASA JPL missions to Mars
Background:
Overview:
Adobe partnered with NASA JPL to create a Creative Jam challenge. Bootcamp students paired into teams to compete for prizes.
Challenge:
Students aren’t as interested in space exploration as they used to be. Use Adobe XD to create a tablet app prototype to help kids age 11-13 (6-8 grade) learn about JPL missions.
Team goal:
Learn to use Adobe XD and compare it to other design tools
Timeline:
May 13 - 21, 2021 (Results presented a week later)
My role:
UX Design: research, sketching, wireframes, brand conception, high fidelity design, prototyping
Teammate:
Janie Chen
Tools used:
Adobe XD, Slack
Team name:
Chili on the Blinds - inspired by true events. Not a high school band name…yet.
Challenge Kickoff
Rachel Elnar hosted a live Kick Off to present the challenge.
We heard from Zach Thomas, UX teacher for General Assembly and NASA Ambassador. He shared some of the exciting things Nasa-JPL is working on right now, and the challenge to help students feel connected to space through a tablet app.
Jamie Nuzbach led a rapid-fire lesson on prototyping tools in Adobe XD.
Timeline
My teammate and I had eight days to design the app. And we each had other commitments (including recovery from a covid shot).
We sketched out a quick plan for research, brainstorming, sketching, wireframing, and designing the prototype.
Because this design focused on learning XD, we did not plan testing sessions. That is an essential step if this project moved forward.
Research
We began the design process by brainstorming possible focus areas. I find space missions interesting, but never wanted to face the dangers of space myself. My goal was to make the project relatable to students who don’t know much about NASA.
We decided to focus on the missions to Mars, and how rovers are built.
YouTube videos
I started by looking up YouTube videos about space, missions to Mars, and educating Jr. High students. One of our concerns was to make sure there was a way to engage with friends while not hurting the privacy of people under 13 years old.
Journey Map
We put together a Journey Map of a hypothetical Jr High student. If we had more time, I would try to validate our assumptions further.
Moodboard
We each gathered images of Mars, rovers, and the feel we wanted for our app.
Interview
I reached out to a Jr High teacher who is a friend of mine and asked her about her students.
Wide interests - 11 year olds are more like kids, 13 year olds are too cool to engage.
Make it social - kids are on Instagram and Tictok with their friends. They don’t play games by themselves as much.
Cute is a win - a lot of students are into anime and other cartoons, even the boys.
Sketching
I put ideas on paper through some sketches of the rover-building process, then cleaned them up with a low-fidelity prototype. My teammate focused on the exploration part after the rover is built.
I had a lot of inspiration from old computer games with Lego racers. Students start with a few of the rovers unlocked, and gain access to others as they achieve new levels. This is my first game design, and I learned a lot about what to include and how to balance everything on the page.
Building a rover
Using the NASA website, I researched the Opportunity Rover because it looked like it could fit the “cute” aspect of design I was going for. I used a screenshot to build out the pieces of the rover. For a realistic background, I found an image of a clean room. The side panels show students where they are at in the process and how each piece contributes to the rover’s success on Mars missions. There are additional buttons to learn more about each section.
Looking back, I would like to simplify the design further. But I will need more research to make sure I’m not missing vital pieces (like the arm…which is hard to see in this view).
Prototype
Here is the final prototype for the team. In the end, we have some basic ways to share with friends, several different skins to personalize, and a cool way to explore some of Mars.
Next steps:
Test this prototype, iterate
Add more incentives to learn
Merge animation styles so the design is coherent
Winner feedback
The ten semifinalist projects gave three-minute presentations of their app. They were critiqued on design features, age-appropriateness, learning features, and fun.
Use rounded edges to create that “cute look” and simplify complex shapes.
Make sure your app is age appropriate and teaches students about what they are doing in each step.
Use engaging storytelling and interactive animation to keep the students’ attention.
Give kids incentive to engage - prizes, levels, etc.
Voice animation is a great piece to be accessible to more students.
For next time
I reached my goal of playing with Adobe XD and learning the interface through this project. However, there’s a lot I can do differently during my next group challenge.
Coordinate with my teammate better on design style and who is doing what.
Create a compelling storyline for the students from the start.
Make sure there are ways to interact with friends.
Progressive learning - help students learn about the sections of the rover before they are asked to select one.
Keep situations as realistic as possible.
XD vs Figma
XD is a nice tool, and I want to explore it further. But for collaboration, prototyping, and ease of access from many locations, Figma is the winner.
XD
Pros:
Good stock photos available
Great plugins
Easy to use with other Adobe products
Easy prototyping tools for quick tricks
Cons:
Downloads to computer - frequent updates needed
Hard to work on a project at the same time as someone else
Expensive for student
Project owner is the only one able to create a final link to the prototype
Figma (winner)
Pros:
Access from any computer
Good prototyping tools with components
Free
Easy to collaborate
Easy to give project access to others
Cons:
Stock photos from plugins not as good
Not able to access all the file types to edit outside files
Have to remember a password