top of page

Emotion Match

Role

UX Designer

Project Duration

November 2021 - January 2022

The Product

The app is a game for kids, designed to support their social and emotional development by teaching about emotions. The accompanying website is informational for adults to learn about the game and the research the design is based on. 

Mockups of Emotion Match

Goal

To create a game that kids can play independently that will help them learn basic emotions and practice empathy by identifying how characters in the game would feel when in different scenarios. 

Responsibilities

User research, information architecture, paper and digital wireframing, low fidelity and high fidelity prototyping, conducting usability studies, iterating on designs. 

User Research

For this project, user research was based on my work with children ages 4-7 as a behavior therapist in school and home settings. I spent 2.5 years working with kids, collaborating with a Board Certified Behavior Analyst, kids’ parents/caregivers and teachers. One of the main goals of therapy was to build social and emotional skills, including recognizing different emotions in oneself and others.

 

Through this work experience I gained insights into the challenges that both children with autism and neurotypical children face when it comes to navigating social situations and dealing with emotions. Designs for the game are based on these challenges, Applied Behavior Analysis (ABA) strategies and developmental psychology research.*

 

*This game is not intended to be a replacement for therapy, and is not an approved ABA tool.

“I like to play on my iPad by myself, but sometimes I get confused because I can’t read yet.” 

Goals

  • Play games on the family tablet

  • To be able to play independently without help from her parents 

  • Be able to play offline

Frustrations

  • Games with words can be confusing because she does not read yet

  • Sometimes she gets stuck when playing a game if it’s too hard

Kayla is a four year old with two working parents and a baby sister. She likes to play games on the family tablet.

 

Kayla has not learned how to read yet, so games with words can be confusing if there is no audio. Kayla’s parents keep the tablet offline when she plays on it independently. Kayla is young and learning about emotions and empathy.

Persona: Kayla

Illustrated avatar of Kayla

Age:  4

Hometown:  Glendale, CA

Family:  Parents, Baby Sister

Occupation:  Preschool student

Problem Statement

Kayla is a 4 year old big sister 

who needs a fun age-appropriate game she can play independently on the family tablet, 

because sometimes she needs to entertain herself when her parents are busy with work or her new baby sister.

“I want to do everything I can to help my son be able to navigate social situations on his own.” 

Goals

  • Provide his child with fun content that helps his social emotional development

  • Keep his child entertained

Frustrations

  • Thinks a lot of content available for children is not beneficial for development

  • Educational games can be expensive

Peter is a dad to a 5 year old child with autism spectrum disorder. His child can have difficulty understanding the emotions of other children, and navigating social situations.

 

Sometimes, Peter will give his child the iPad to play on so that Peter can get work done. He would prefer if the games his son played were educational or would support his emotional development in someway, and could be played without Peter’s help. He also wants games to be able to be played offline for when they are on the go.

Persona: Peter

Illustrated avatar of Peter

Age:  38

Hometown:  Pasadena, CA

Family:  5 year old child

Occupation:  Dad, Civil Engineer

Problem Statement

Peter is a dad to a 5 year old with autism

who needs a fun way for his child to learn about emotions and empathy because it could help his child learn to better navigate social situations.

Ideation

After reflecting on my user research and competitive audit, I thought about how I wanted to solve the problems I identified, and what I wanted the app to include. I used the Crazy 8s exercise to ideate the app design, before moving onto paper wireframing. 

Hand sketched crazy 8s exercise
Screen Shot 2022-03-04 at 1.44.11 PM.png

Digital Wireframes

Once I had paper wireframes that I was happy with, I created digital wireframes. I knew having effective illustrations for the different characters and emotions in the app was essential to the goals of the design, so I chose to include those in the early digital wireframes rather than waiting to add them to hi-fi mockups. I sourced character illustrations from blush.design, creating my own facial expressions in Figma for the emotions that were not available on Blush.

Low Fidelity Prototype

Try out the prototype on Figma

The lo-fi prototype consists of the main user flow: 

  • Starting the game

  • Reading/listening to a character scenario and the emotion options

  • Choosing an emotion

  • Game screens following a correct or incorrect answer, and the end game screen.

all screens of the low fidelity prototype with the connections shown

Usability Study: Findings

Faster Transitions

Some participants thought the time between narrated sections was too slow and disrupted their flow of play, therefore the transition time between narrated sections should be shortened.

Error Prevention

Some participants were frustrated that when they tapped the x, the game immediately ended, therefore, an option to cancel the x-out action and go back to the game should be added.

 

Longer Game

Some participants were confused that there were six emotions in the game but users only need to earn 5 stars to win the game, therefore, there should be a longer version where users need to earn at least 6 stars.

Usability Study

I conducted an unmoderated usability study to get user feedback on my prototype. The study resulted in three main findings, which I used to iterate on my designs. 

Mockups

After the usability study I added an overlay that will pop-up after tapping the x-out button. This is an error-prevention measure that will allow users to either confirm that they mean to end the game, or go back to playing without losing their progress. 

Mockup screen before usability study
Mockup screen after usability study, with overlay to either confirm exiting the game or keep playing

Mockups

Another design change I implemented was to add a longer version of the game, where the user works for 10 stars instead of 5. This allows for younger users/users with shorter attention spans to still be able to play and win the game, but also allows for longer game play for more practice. 

Mockup game welcome screen before usability study with one 'Play Game' button
Mockup welcome screen after usability study with a 'play short game' and a 'play long game button

Mockups: User Flow

High fidelity mockups of main user flow

Emotions and Characters

The game includes 6 characters: Andrew, Emma, Danny, Mia, Fatima, and Isaac. The character illustrations were sourced from and customized on blush.design.

 

Six different emotions are included in the game: happy, sad, angry, surprised, scared, and disgusted. These emotions were chosen because they are basic emotions -- emotions that children learn to identify first, typically in preschool and early elementary school. In a later version of the game I would add a second level of game play for self-conscious emotions (pride, embarrassment, guilt, etc.) that are more complex and children learn to identify later, typically early and middle elementary school.

 

The faces for the emotions happy, angry, and scared were part of the Blush illustrations, and I illustrated the expressions for disgusted, surprised, and sad. 

Andrew avatar
Emma avatar
Danny avatar
Mia avatar
Fatima avatar
Isaac avatar

Scenarios

Each turn, a character experiences a different kid-friendly scenario. Users are asked how the characters feel, and are given 3 different emotion choices. Below are examples of scenarios users will see in the game.

Scenario: Isaac drops his donut on the ground and now he can't eat it.
Danny sees his teacher at the grocery store.
Mia plays a fun game with her friends.
Danny gets a present for his birthday.
Isaac is playing with a ball, when a bigger kid steals it.
Emma steps in dog poop.
Mia runs a race and finishes in last place.
Andrew's brother won't let him have a turn on the skateboard.
Mia is about to go down the big slide for the first time.
Fatima takes a bite of an apple and realizes there is a worm in it.
Emma's brother teases her.
Andrew opens his backpack and his cat jumps out.
Fatima sees a big spider.
Andrew accidentally lets go of his balloon and it floats away.

High Fidelity Prototype

All screens of the high fidelity prototype connected by their interactions

Accessibility Considerations

The app will include audio reading of the text on the screen. As the text is highlighted on the screen, the words will be read aloud. This will help users who are not readers be able to play the game independently, as the app is targeted for young children. 

The colors in the app meet contrast standards for accessibility. This will help those with low vision use the app. 

Users can select to play a shorter or longer version of the game. The shorter version allows for users who may have difficulty staying focused for a longer time to still play the game and be able to win.

Responsive Website

I designed an accompanying responsive website, for adults to learn about the Emotion Match app and to be able to reach out to provide feedback or ask questions about the app.

Mobile screen size mockup of Emotion Match website.
Tablet screen size mockup of Emotion Match website.
Desktop screen size mockup of Emotion Match website.

Takeaways

Impact

“A great resource for parents looking for content for their kids to learn about emotions!”

  • Usability Study Participant

What I learned

This was a great exercise in using my design skills alongside my psychology education and my experience working with kids as a behavior therapist, to create an app with a positive social impact. In this project I also had to think about how to design for kids rather than for adults, which came with some different challenges than previous projects I had worked on. 

Next Steps

Next I would conduct a usability study of my high fidelity prototype. In this study I would be sure to include parents/caregivers and their children, as well as some child development specialists to provide feedback. 

After conducting another usability study and iterating on my designs, I would pass off my designs to engineering. 

Once the app was launched I would get feedback from real users, and iterate on my designs again. 

Eventually I would add more levels of play to the game, targeted at older kids, featuring self-conscious emotions.

bottom of page