MoodBalance

Overview

‍

MoodBalance is a mobile game designed to help kids build emotional recognition skills through play rather than instruction.

‍

The concept responds to a real gap: research from the National Library of Medicine has observed that children can struggle to identify emotions in faces. Rather than approaching this as a clinical or educational tool, I designed a hidden-object game where players find and match feelings , like frustration, confidence, or regret  to a broader emotion, like curiosity, anxiety, or shame.

‍

Each character in the game is a distinct illustration representing a specific feeling, so recognizing an emotion becomes a visual, intuitive act rather than a memorization exercise.

‍

Key Services & Role

‍

Role: Illustrator & Product Designer

‍

I conceived the game concept and designed the complete illustration system a custom character representing every emotion in the game. I built the interactive prototype using GSAP and led usability testing with 10 users to validate the core mechanic before finalizing the experience.

‍

Responsibilities

‍

• Concept Development
• Illustration System Design
• Character Design
• Interaction Design
• Prototyping (GSAP)
• Usability TestingUI Design

The Challenge

‍

Mental wellness products often rely on lengthy assessments, that can make emotional self-reflection feel overwhelming.

‍

The challenge was to transform emotion identification into something engaging and playful rather than instructional.

‍

This meant creating an illustration system capable of communicating nuanced emotional differences , such as the distinction between worry and panic, or guilt and regret in a way that felt intuitive and easy to understand. Players needed to recognize emotions quickly under time constraints, without the experience feeling confusing, overly literal, or frustrating.

Goals

‍‍

Player Goals

‍

• Recognize and correctly match feelings to their related emotion.
• Understand the "anatomy" of an emotion — that any single feeling like anxiety is made up of several related feelings.
• Feel encouraged to keep playing and improve, rather than penalized for mistakes.

Product Goals

‍

• Design an illustration system expressive enough to carry emotional meaning without text.
• Create a game mechanic simple enough to play in short sessions.
• Validate that players could actually learn from the mechanic, not just play it.

Design Approach

‍

The concept started with the illustration system rather than the interface. Each feeling needed its own character , distinct enough to be told apart at a glance, but part of one consistent visual world.

‍

The game centers around three main emotions: curiosity, anxiety, and shame. Each emotion has around ten related feelings, represented by characters hidden throughout the scene. Players have to find each character and drag them into the right place before time runs out.

‍

I built an interactive prototype using GSAP to bring the illustrations to life and simulate the actual drag-and-match mechanic, rather than relying on static mockups. This let early testers experience the real pacing and difficulty of the game, not just look at screens.

Project Solutions

‍

A Character for Every Feeling

Designed a complete illustration system with a distinct character for each of the roughly 30 feelings across all three emotion categories, giving every feeling its own visual identity while staying part of one cohesive world.

‍

Hidden-Object, Drag-and-Match Mechanic

Designed the core game loop: players search for hidden feeling-characters and drag them to the emotion they relate to, all within 40 seconds.

‍

Encouraging, Low-Stakes Scoring

Designed the scoring and feedback to keep the experience encouraging rather than punitive. Players receive supportive messages for successful matches and can retry as many times as they want without losing progress.

‍

Interactive Prototype in GSAP

Built a working prototype using GSAP animation to simulate real gameplay pacing, rather than testing static screens, giving usability testers an experience close to the finished product.

‍

Usability Testing

Tested the prototype with 10 users to see whether the core mechanic—recognizing and matching feelings under time pressure—was intuitive and effective, rather than simply looking good.

Outcomes

‍

Usability testing confirmed that players could understand and complete the core matching mechanic, and that the illustration system successfully communicated distinct emotional states without relying on text.

‍

The project demonstrates how illustration can carry functional, not just decorative, weight in a product , each character had to be legible enough to support a real recognition task, under time pressure, for the game to work.

‍

Scope

‍

• Illustration-led product concept
• Custom character system (~30 illustrated feelings)
• Interactive prototyping (GSAP)
• Usability testing with real users
• Game mechanic and scoring design

‍

Why This Project Matters

‍

MoodBalance shows how illustration can play a real functional role in a product, rather than simply making it look good. Each character needed to be recognizable at a glance, even under time pressure, so users could complete the recognition task without getting stuck or confused.

‍

It also represents a complete, focused product process: starting with an idea grounded in research, turning it into a working prototype instead of just static screens, and testing it with real users to see what actually worked.