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.
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
.png){kind=avatar}
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
_edited.png)
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.
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.
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.
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.
Mockups: 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.
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.
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.
.jpg)
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.