Header Image for emotQuest: iPhone Mockups. Soap & Prose Title Image Header Image for Urban Warrior: iPhone Mockups.
arrow_back

emotQuest

An Emotional Intelligence Game for Autistic Children // Conceptual Project

Duration
  • 6 Weeks
Platform
  • Responsive
Tools
  • Figma // Photoshop
My Role
  • UX Designer // Project Lead
Header Image for emotQuest: iPhone Mockups.

Project overview

EmotQuest is an interactive and educational app that aims to help autistic children develop empathy and emotional intelligence in a fun and engaging way. The project prioritizes creating an immersive and captivating experience for children, where they embark on exciting quests and meet fascinating characters.

Through the game, children learn to recognize and understand different emotions, make empathetic choices, and solve problems to bring harmony to various virtual worlds. They also learn emotional skills that they can utilize in their everyday lives.

Log In Screen Mobile Mockup

The Problem

EMOTION RECOGNITION CHALLENGES //
  • Children with autism often face challenges in identifying and comprehending emotions, making it difficult to empathize with others and navigate social situations proficiently.
LACK OF ENGAGING RESOURCES //
  • Caregivers of children on the autism spectrum have difficulty finding practical and user-friendly resources to aid their child's emotional development and support their social-emotional learning.

The Goal

Empower children and their caregivers with the tools and knowledge to better understand and navigate their own emotions and the emotions of others by providing an interactive and engaging app that helps children develop their emotional recognition skills, cultivate empathy, and enhance their social-emotional learning abilities.

Mobile Home Screen Mockup
MY RESPONSIBILITIES
  • UX/UI Design
  • UX Strategy
  • UX Researcher
  • Art Direction
2
WKs of research
1
WK of User Testing & synthesizing
4
WKS of Prototyping

Understanding the User

I conducted interviews with five individuals to gain a better understanding of my intended users. Among them were two grade-school teachers, two parents of children on the autism spectrum, and one legal guardian of a child on the autism spectrum.

The research revealed that the primary user group is children who could benefit from improving their emotional recognition, empathy, and social-emotional learning skills through a fun and interactive approach. Insights gained from the study helped shape the development of the EmotQuest app, which caters to this user group’s unique needs and developmental stage.

Pain Points

LIMITED EMOTIONAL RECOGNITION //
  • Some children struggled with recognizing and understanding subtle or complex emotions.
LACK OF CLARITY IN INSTRUCTIONS //
  • Children often express confusion or difficulty understanding specific instructions or prompts.
NEED FOR VISUAL REINFORCEMENT //
  • Users Desire clear visual cues to facilitate understanding of different emotions.

User Persona 1

User Persona Picture, Ola and Sade

Ola & Sade Ibrahim

Empathy is a crucial tool in building connections and promoting understanding between people. I hope Sade can come to appreciate the importance of empathy too.

AGE 34 // MBA // Irvine, CA // Marketing Manager

Ola is a working parent, married with two children. His eldest child, Sade, is an 8-year-old girl on the autism spectrum. Ola is tech-savvy and relies on his smartphone for various daily tasks. He prefers using mobile apps due to their convenience and accessibility.

GOALS //
  • Help Sade develop empathy and recognize emotions in others.
  • Find an engaging and educational mobile app that caters to autistic children.
  • Easily monitor Sade's Progress and Track her growth.
  • Gain access to practical strategies and resources to reinforce empathetic behavior.
FRUSTRATIONS //
  • Limited availability of mobile apps tailored to autism.
  • Difficulty finding an app that provides an intuitive and interactive learning experience.
  • Lack of progress tracking and measurable outcomes in existing resources.

User Persona 2

User Persona Picture, Jin and Jae

Jin & Jae Park

I want to unlock a world of empathy and emotional growth for my son.

AGE 38 // BCA // Houston, TX // Software Engineer

Jin is a working parent, married with three children. His middle child, Jae, is a 9-year-old boy diagnosed with autism. Jin spends a significant amount of time working on his desktop computer and prefers using desktop applications over mobile apps due to his familiarity with them and the larger screen size.

GOALS //
  • Help Jae develop empathy and recognize emotions in others.
  • Find an interactive and comprehensive desktop platform specifically for autistic children.
  • Access the platform seamlessly from a desktop.
  • To explore a range of features and resources to support Jae.
FRUSTRATIONS //
  • Limited availability of desktop programs tailored to the specific needs of autistic children.
  • Difficulty finding user-friendly and interactive desktop applications for emotional intelligence.

The competitive audit

I analyzed different gamified emotional learning apps from four companies, including one indirect competitor and three direct competitors. I evaluated various aspects to see how they would affect my strategic objectives and decision-making.

Based on my research, I identified five critical components that will guide my project's development and help it stand out in the market.

FEELU //

Cross-platform

Clear directions

Personalized

Extra Resources

½ Intuitive

FEELINGS IAP //

Cross-platform

Clear directions

Personalized

Extra Resources

½ Intuitive

WONDERGRADE //

Cross-platform

Clear directions

Personalized

Extra Resources

Intuitive

AHEAD //

Cross-platform

Clear directions

Personalized

Extra Resources

Intuitive

THE RESULTS //

After conducting a competitive audit, I discovered some key findings.

Most of my competitors did not make their app cross-platform, while I focused on providing the same mobile experience on Desktop.

Also, none of my direct competitors had personalization, which I believe is essential for a game designed for children. Some competitors also needed more intuitive features since some buttons and icons needed a more apparent purpose.

Moreover, most competitors provided additional resources for children and guardians outside the game, which I feel is a good idea.

By gaining these insights, I can make more informed strategic decisions that allow me to utilize my strengths and improve in areas that need it.

Defining the problem

Parents with children on the autism spectrum want to provide their children with a simple and engaging emotional intelligence educational experience because the subject can be challenging to approach effectively.

Ideate

emotQuest paper wireframes showing the Sign Up process and Game Play
PAPER WIREFRAMES
  • Creating paper wireframes was helpful in ensuring that my game had a logical flow and was easy to follow.
emotQuest Lo-Fi Wireframe of a gameplay screen.
LOG IN / SIGN UP
EmotQuest Log In / Sign Up Screen Wireframe, mobile
SIGN UP
EmotQuest Sign Up Screen wireframe, mobile
SIGN UP // PART 2
EmoteQuest Sign Up Screen 2 wireframe, mobile
SIGN UP // PART 3
EmoteQuest Sign Up Screen 3 wireframe, mobile
SIGN UP // PART 4
EmoteQuest Sign Up Screen 4 wireframe, mobile
HOME
EmotQuest Home Screen Wireframe, mobile
CUSTOMIZE AVATAR
EmotQuest Customize Avatar Screen Wireframe, mobile
CAMPAIGNS
EmotQuest Campaigns Screen Wireframe, mobile
QUEST
EmotQuest Quest Screen Wireframe, mobile
00

Prototype

Low-Fidelity Prototype

Using the completed set of digital wireframes, I developed a low-fidelity prototype. The main focus of the prototype was on the user flow for signing up and starting a game, as this would be tested in a detailed usability study.

Test

Usability Studies

Through conducting two usability studies, I was able to refine the design process and improve the user experience. These studies provided insight that guided the design from wireframes to high-fidelity prototypes. I could continually optimize the design with a user-centered approach by identifying areas that required further refinement.

ROUND 1 FINDINGS //
  • Users found that certain prompts may be challenging for younger users to answer due to lack of description.
  • Users suggested the need for clear visual cues for game completion.
ROUND 2 FINDINGS //
  • Users needed clarification about their choices of where to start a quest.
  • Users expressed disappointment that there wasn’t a way to re-do a choice within game-play.

Round 1 refinements

I responded to user feedback by including more descriptive language for choices within the game for those children who may need help understanding the options available.

Before Round 1

EmotQuest Game Play Screen Wireframe, mobile

Single word answers.

After round 1

EmotQuest Game Play Screen Hi-Fi, mobile

Added extra keywords.

Round 2 refinements

The 2nd usability study revealed confusion about where a player could start on a campaign. To correct that, I created a visual indication that the player must complete the first quest before moving on to the next.

Before Round 2

EmotQuest Quest Screen, Pre-Usability 2 mockup, mobile

Each level is visible,
causing confusion on
where to start.

After round 2

EmotQuest Quest Screen, Post-Usability 2 mockup, mobile

Unplayed levels are now locked.

EmotQuest Hi-Fi Desktop Screen Mockups

High-Fidelity Prototype

The final high-fidelity prototype presented an engaging and whimsical flow that makes cultivating emotional intelligence a gamified experience.

emotQuest smart animation mobile mockup example
001
SMOOTH TRANSITIONS
  • The Smart Animate feature in Figma was used to create horizontal movement of the background during the sign up and sign in process.
002
CUSTOM ANIMATIONS
  • I used the Apple Memoji feature on my iPhone to create an animated gif of a unicorn, which I imported into figma for game play.
EmotQuest Hi-Fi Mobile Screen Mockups

Considerations & Takeaways

I like it! It reminds me of an article on how the Inside Out movie characters helped teach emotions to autistic kids too.

ACCESSIBILITY CONSIDERATIONS //
  • The app uses high-contrast colors and large fonts to improve visibility.
  • The live app will have a text-to-speech feature to assist those who are not yet able to read.
  • Used a highlighting feature that appears when hovering over or pressing buttons.
IMPACT //
  • Based on the results of the usability studies, it appears that this app is attractive and captivating in terms of its visual design.
WHAT I LEARNED //
  • My project aims to foster empathy and emotional intelligence in children. Inclusive design and technology play a crucial role in promoting emotional understanding, and seeking feedback from others leads to better design outcomes.

Next Steps

I’d like to add some game elements, such as picking up an item and then later having the option to give that to someone in need.

Integrate text-to-speech.

Add resources for guardians in the prototype.

Thank you!

Header Image for Urban Warrior: iPhone Mockups. Soap & Prose Title Image