The Problem
Daily reflection tools feel serious and effortful. Users who want gentle emotional check-ins have no tool that feels approachable, low-pressure, or fun.
My Role
I owned this project end to end, solo: research, UX/UI design, and the physical build.
The Solution
A mobile companion app where dressing up a character named Ear becomes a daily ritual, turning reflection into play rather than a task.
Key Design Decisions
Three choices that defined the direction, each grounded in research not preference.
01
Play over journaling
Research shows play lowers cortisol and supports emotional resilience in adults. Dressing up Ear creates a low-pressure emotional state where reflection happens naturally, without the intimidation of a blank page.
02
System before screens
The component library and design tokens were built before any UI screen. Naming every clothing component Category/Type/Color made variant switching fast and consistent, every downstream decision got easier.
03
Accessibility from the start
WCAG AA entered at the user flow stage. Contrast ratios, 44x44px tap targets, and label pairings were treated as quality bars from the first wireframe, which made the product better for every user.
01
Research and Design Principles
Every feature is backed by published research.
Secondary research grounded each product decision:
Play is associated with lower cortisol levels and helps buffer daily pressure. (American Academy of Pediatrics)
Adult playfulness supports positive emotion and resilience. (Frontiers in Psychology, 2022)
Playful reframing of everyday routines promotes positive affect and stress relief. (Proyer et al., PMC)
02
User Flow and Information Architecture
Accessibility constraints were mapped before a single wireframe existed.
The flow was mapped horizontally to reflect industry standards, with WCAG considerations annotated at each decision point.
Open Diary → Meet Ear → Dress Ear → Reflect → Save Memory (or Skip)
03
Design System
Tokens defined before screens, visual cohesion was a constraint not an afterthought.
A scalable token-based system was built first, ensuring WCAG AA compliance across all surfaces. All color pairings verified via WebAIM Contrast Checker.
04
Component Library
Naming structure enabled scalable clothing variants with zero ambiguity.
Every clothing item was structured as a named Figma component using hierarchical slash notation (Category/Type/Color), with color variants grouped into component sets. This enabled fast lookup and consistent variant switching across all screens.
05
Character Testing
Two directions, one clear winner but the other had its own fans.
Before finalizing Ear's visual direction, two character concepts were sketched and tested with 19 participants to understand which personality resonated more with the app's emotional goals.
Tested with 19 participants
Warm and approachable. Broad appeal across age groups and consistent with the app's reflective tone.
Selected directionDeliberately goofy and absurdist. Polarizing but memorable, those who loved it said they would buy it as a sticker.
Strong niche appealFriendly direction selected for its broader emotional fit with daily reflection. The Humorous version revealed a secondary audience with strong attachment potential, which is a direction worth exploring for future merchandise.
Sketches
Final
From four hand-drawn concepts to Ear.
06
UI Screens
Five core screens designed.
Sage green and warm cream carry the calm non-clinical tone. Ear's presence creates emotional continuity across every step of the flow.
07
Physical Companion
The digital experience extends into a pocket-sized physical diary. A sealed envelope and an end-page QR code work as a two-layer surprise, 30 daily prompt cards give the reflection ritual a physical home, and a sticker and background-scene system mirrors the app's dress-up flow as a tactile extension of the digital companion.
08
Reflection
Building the component library before touching a single screen made every downstream design decision faster and more consistent.
Embedding WCAG at the flow stage changed how I see contrast ratios and tap targets as quality decisions.