menu screen mock up hero image
hello adventurer screen mockup
mockup of mini game
mock up of earth start screen

Project Overview

The App

Beyond is a tablet app for 11- 13 year olds, created while participating in the Creative Jam conducted by Adobe and NASA for designers during their bootcamp.

My Role

We were a team of two (The Jam Theorists). As we had a very short turn around time to create polished high fidelity prototypes, we shared the following tasks between us as we went through the design process- UX Research, Persona creation, User flows , Task analysis, Ideation, Prototyping and Testing.

Timeline

One Week

Challenge

The challenge is to help kids, to learn more about space exploration by teaching about a single or multiple NASA JPL missions. It can be an Android tablet or Apple iPad app that provides an engaging way for kids to learn and share space stories, facts, and topics.

Audience

This app experience is to be designed for kids between 11 to 13 years old. It may include gaming, gallery, educational content, or any combination of functions that would help them learn more about the latest science, robotics, and spacecraft.

The Solution

We created an immersive tablet game with an underlying narrative game play.

icon of rocket

The user would be going on an exciting mission to different planets in the solar system .

mock up of earth start screen
fat rocket icon

Playing these mini games will teach our audience the different missions that NASA sent to various planets.

mock up of tasks  screen in the game
rocket icon to show the features of the app

But first they need to build their spacecraft by playing many mini games.

mockup of second page of the game with GRACE project

My Process

1/ Empathy

Competitor Research

We explored two games that are popular with the age groups of our audience- Among Us and Blooket

The questions that we wanted answered during this stage were

question icon

What format of games was most popular among children in this age group?

question icon

What was the visual aesthetics- the color, look and feel that appealed to this age group?

question icon

How is the problem of making educational content "fun" solved currently in the market?

Our key takeaway's from this stage were:

Blooket screen shot

Children in this age group liked bold colors with illustrations that had thick outlines

among us screenshot

Game formats with mini games appealed to this age group

User Interviews

interview icon

We conducted 2 face to face interviews

objective icon

Our objective was to understand-

  1. How our users usually learn about a new subject?

  2. What types of games do you usually play?

icon for what we learned

What we learned from this step:

  1. Users at this age usually ask advice from peers

  2. They liked playing different games and not just one type of game

  3. At this point we were leaning towards a mini game approach for our app to teach new information

2 / Define

We created two user personas considering two different goals of the users at this age.

Charles
Problem Statement

Charles needs a way to explore the topic of science in a fun and engaging way, because he is growing older and becoming increasingly interested in the world around and above him. We will know this to be true when he engages with the app more completely.

Pain Points
  1. He is only 10 years old and thus, his main motivation is overwhelmingly to have fun and spend time with his friends

  2. Loses attention very quickly when it feels like he’s studying

  3. His friends like to text him a lot, and he loves distractions

Behaviour
  1. Usually likes to spend his free time after school playing with his friends

  2. The time he most plays on his phone is in the evening when he is at home

  3. When he uses his phone, it is usually to watch YouTube videos or play games

picture of a 10 year old boy
“I think that there’s a lot of cool stuff out there that I just haven’t seen yet.”
Abby
Problem Statement

Abby needs a way to study JPL missions for a state competition, because she is intelligent, competitive, and wants to win. We will know this to be true when she produces something that is interesting and informative for her competition.

Pain Points
  1. Science is not her favourite subject

  2. She will complete a task if asked to do it, but may only do the bare minimum to pass

  3. To assure long term engagement, Abby needs something that intrinsically motivates her rather than extrinsic motivation

Behaviour
  1. Usually the first to raise her hand in class

  2. Does not particularly enjoy studying, but is willing to do it to receive the benefits and praise

  3. Abby’s friends are less interested in studying than her, so she is less likely to share her achievements on an app about JPL

“I just want to get into a good uni and get a good job.”
photo of a teenage girl

User Flows and Task Analysis

User flow and task analysis diagram

Affinity Maps

affinity mapping image 2

Affinity Maps

image of affinity mapping 1
icon for what we learned

What we learned from this step:

  1. From the previous step our solution was leaning towards mini games.

  2. This step gave us an idea to include project based learning in the solution.

3 / Ideate

Our biggest problem to solve was how do we keep the users engaged while assimilating a lot of information about  each mission? So these were our solutions

lightbulb icon

Using the idea of project based learning,  each NASA mission was to have many mini games.

lightbulb icon

Each mini game will teach one concept about the mission in the form of interactive play.

Low Fidelity Wireframes

low fidelity start up screen

We started with the homescreen that would give a quick idea of all the planets NASA sent their missions to.

Users would get to explore each mission by building rockets.

When all the mini games are completed, the rocket is finished and the next planet and mission can be explored.

They can build a part of the rocket when one mini game is completed.

low fidelity choose avatar screenlow fidelity dashboard screenlow fidelity inside mini game screenlow fidelity choose mini game screen

4 / Prototype

We spent the most part of the week polishing the illustrations, high- fidelity wireframes and the prototype. We aimed to create meaningful interactions and animations that evoked the feeling of floating in space.

High Fidelity Wireframes
menu screen mock up hero image
Beyond first page tablet mockupmockup screen of choose avatarmockup of dashboard with arrow pointingmockup of choosing the mini games on GRACE missionmock up of task list mini gamemockup of task 3 tapped on mini gamemock up of watching video in minigamemock up of task 5 tapped to do the experimentsmockup of experiment mock up of shop pagemock up of rocket building page
The Prototype

Please find a clickable prototype here and feel free to play around!

gif of the first page of the game. Click to see  the prototype

6 / Test

The brief was to complete the challenge in one week. So we had very little time to test. But we did test with our family and friends after setting clear objectives in accordance with the brief.
interview icon

We conducted 4 in-person usability tests

objective icon

Our objective was to -

  1. Test for the usability and flow of the app

  2. Test if the app could be understaood and played intutively.

icon for what we learned

Key Iterations:

  1. As the game had many levels, we found that users did not fully understand the depth of the game until later in the game. So we increased the interactivity through staged onboarding and incorporating voice.

  2. At certain points of the game users did not know what to do. So we added timed animations like arrows or other cues guiding the user to the next step of the game.

Result and Learnings

It was hard work and we spent many a late nights during the week. But it was worth it.

icon of clock

We finished the project with 12 hours to spare and got free subscription to the Adobe Cloud Suite for 6 months worth $300

icon of score sheet

We got a score of 21 out of 25 for Innovation with an overall score of 75 out of 100

icon of medal

We were ranked top 50 out of 200 entries.

This challenge over one week was a huge learning curve. I learnt to -
  1. Effectively collaborate with a team member

  2. Use Adobe XD at an advanced level incorporating effective workflows and animations.

  3. Choose different methodologies for a design sprint while going through the design thinking framework.

Thank You for stopping by. I hope you enjoyed going through my process. I am always looking out for interesting projects.
So please get in touch to say Hi