A kids mindfulness app built around box breathing. I owned it end to end: the problem framing, the roadmap calls, and the design itself. Short, repeatable, and actually usable in the moment that counts. Mobile-first for children ages 6-12.
Reading this case study: Box Buddy shipped in two phases. Phase 1 is the delivered product: the Figma prototypes and the two live Unity mini-games. Phase 2 is where it is now: a rebuilt design system and a playable build you can use further down this page.
Kids with anxiety and many neurodivergent kids need practiced, accessible tools to downshift quickly. Box breathing is clinically effective, widely taught, and nearly useless when a child needs it most: mid-meltdown, no adult nearby, phone in hand.
Existing apps either entertain or instruct. Box Buddy had to do something harder: coach in the moment with short repeatable exercises, clear feeling-labeling, and no reading required. Completable in under two minutes.
I set that as the product bet and the bar we measured against: if a distressed child can't finish it alone, it doesn't ship. Every scope call below came out of defending that one line.
The most critical early finding: kids want to feel better fast. Parents want to trust the tool and see whether it's helping. Compatible goals, but only if the design keeps them in completely separate lanes.
Mobile-first from wireframe one. Primary frame: iPhone SE, the smallest most constrained target. Click any phone to expand details.
Single CTA. Cloud mascot centered. Sound toggle and Grownups access tucked into corners. One screen, one decision.
Three large face buttons. Cloud mascot mirrors the child's selection instantly. Faces occupy 60%+ of the screen. Words are secondary labels only.
Illustrated tiles with mood filter on the right rail. Kids choose their world, not their exercise. Mood state carries forward from check-in.
Mood Log, Screen Time, Audio, and Settings in four quadrants. All data stays on-device. No account, no cloud, no COPPA exposure.
Play the current build right here, then open either Phase 1 Figma prototype to see where the interaction design started.
🎮 Phase 2 · Playable now Phase 1 · Original prototypesThe Figma files the product was first built from. Kept live so the starting point is visible next to where it landed.
Both games are fully built and deployed as Unity WebGL builds. Each wraps the 4-4-4-4 box breathing cycle inside a game mechanic. Play them here.
Follow the wave through the box breathing cycle. The ocean environment guides kids through each 4-second phase using movement and sound. No instruction text required.
🌊 Play Mini-Game ↗Navigate the cosmos through the box breathing rhythm. A spaceflight metaphor carries kids through each breath phase without any instruction text. Built entirely in HTML/CSS/JS.
🚀 Play Mini-Game ↗I ran playtest sessions with children ages 6-12 across three rounds, watching for hesitation, tap errors, and whether kids smiled or furrowed, not what they said they thought.
The cloud tells me when to turn.
I didn't have to think. I just followed it.
She actually used it on her own. That's never happened with any other app.
Measured across three playtest rounds against baseline. Results reflect specific calls I owned: larger tap targets, faces-first mood selection, visual path coaching, and cutting the numeric timer over stakeholder objection.
"Short wins build durable habits. A tool kids will actually use in the moment beats a thorough one they abandon after day two."Design principle, Box Buddy
Product Owner · Product Designer · Game UX · Mobile-First Design
