COCOMELON
ココメロン — ボイスゲーム
UX & Narrative Design (Contract) — helped lead end-to-end design for CoComelon's first voice-interactive game suite (Connected TV + Mobile).
01 //
OVERVIEW
概要
CoComelon: Sing & Play with JJ is a voice-interactive game suite built for connected TV and mobile, seven mini-games where kids ages two to four sing along with, talk to, and physically respond to JJ using their own voice. I led end-to-end narrative and UX design alongside a Volley PM, from concept through launch, working with Volley Games and Moonbug's CoComelon IP.
Our researcher ran play sessions with kids ages two to four, one consistent person present in every session, in person and remote, recorded with parental consent. Children that age don't warm up to a rotating cast of strangers, so continuity of who was in the room mattered as much as what was being tested. From those recordings, one pattern mattered more than the rest: these kids lose interest within 2 to 4 seconds if nothing responds to them, and they need that same 2 to 4 second window of silence to actually respond themselves. Same number, opposite directions. Too fast and the game talks over them. Too slow and they've already moved on. That timing gap became the real design problem across the seven mini-games I built for CoComelon's first voice-interactive suite on TV and mobile.
THE CHALLENGE
課題Roku's built-in mics are bad. That single hardware fact shaped more of this project than any creative brief did, because a two-year-old shouting into a cheap microphone from across a living room produces audio a game can barely parse, and CoComelon's brand voice doesn't allow a single frustrated or negative response even when the mic fails them. So the real brief was narrower than "design engaging games." It was: design a system that never punishes a child for a hardware limitation it can't see, works for kids who don't speak yet, and still earns a parent's trust the first time they hear their kid's voice get recorded.
RESEARCH
調査The clearest finding didn't come from what worked. It came from what parents said when asked what worried them. Almost none of them mentioned privacy, even unprompted, even though a voice-activated kids' product sitting in a living room seems like exactly the kind of thing that should raise that flag. What they worried about instead was their kid failing, on camera, in front of the TV, in a way that felt like judgment. That reframed the whole FTUE problem. It was never a permissions screen to get through. It was a reassurance to build.
“Is my child being recorded?”
“What if my child doesn't know what to do?”
“Is this actually helping my child learn?”
PROCESS
プロセスBuilding on the research insights—especially the importance of visual cues, timing, and two-pass loops—I began sketching interaction flows that prioritized clear visual signals over verbal instructions.
- Early FTUE scribbles exploring mic permissions, calibration, and parental hand-off moments
- Low-fidelity Wheels on the Bus flow implementing the listen-first, interact-second structure (listen verse → action verse → location transition → confetti)
- Rough Playroom reward layout showing micro-rewards (toys unlocking) at the end of games
- Mini-game loops showing how kids move from "verse listening" → "participation moment" → "reward" based on the two-pass structure
The core gameplay loop, mapped end to end — how a session moves through listen, participate, and reward across the sing-along structure. Click to zoom in and pan across the full flow.
BUILDING PARENTAL TRUST THROUGH TRANSPARENT FTUE
If the fear was failure, not privacy, then the fix wasn't a clearer permissions dialog. It was giving the parent a way to absorb the failure before the kid could feel it. That's where co-viewing came from: if a child freezes up, a parent can step in and answer for them, so the moment never registers as the kid failing on screen. Calibration steps modeled safe volumes but also gave quieter households, and kids who don't or can't shout, a path that still counted as a full response.
VISUAL CUES & TIMING OVER VERBAL PROMPTS
The pattern across every mini-game had three parts. The narrator's voice introduced the subject, naming what the child was about to sing about or do. Then the visual layer took over: JJ's animation and a special-effects cue, a sparkle, a gesture, something on screen that invited the response. Then JJ clapped and affirmed, no matter what the child actually did.
That last part carried the real design intent. CoComelon can't show a child getting something wrong, not a buzzer, not a pause, not a "try again." So instead of correcting, the game taught by demonstration. If a kid didn't respond, or responded with something off, JJ would casually model the right answer through animation and move on, the same way a parent might just show a toddler how to do something again instead of telling them they did it wrong. No failure state ever existed. Just another pass at showing.
Splitting the narrator's voice from the visual invitation to respond is what made that possible. If the narrator's line had been the prompt itself, "can you clap like JJ?", there'd be no clean way to walk it back when a kid didn't clap. The audio already asked. But because the ask lived in the animation and effects layer, not the voice, JJ could reaffirm through the same visual channel regardless of what happened, then quietly demonstrate again. The narrator only ever set up the subject. The screen carried the invitation, and the screen carried the recovery.
CHOOSING 3D OVER 2D FOR BRAND CONSISTENCY
3D turned out to be the faster path, not the harder one. Moonbug already had 3D assets we could pull from, and scenes we built, the Bus, the Playroom, the Backyard, could get reused across multiple mini-games instead of redrawn each time. 2D would have meant new art for every scene, every game, with none of it transferable.
There was a second reason underneath the production math. Kids know JJ as a specific look, a specific style, built in 3D from the start. That's the version they recognize. A 2D interpretation, however faithful, would have been a different character wearing JJ's name, and preschoolers notice that kind of thing even when adults assume they won't. Familiarity wasn't a nice-to-have here. It was the whole reason a two-year-old trusts what's on screen enough to respond to it.
So the constraint that looked like it should slow things down, matching an existing 3D IP with your own new content, ended up being the reason production moved faster. Reuse the sets, reuse the model, spend the saved time on the actual interaction design instead of redrawing a world from scratch.
08 //
DIEGETIC NAVIGATION SYSTEM IN UNITY
This one was a narrative design call, mine, not a UX default. A menu is a UI convention adults are fluent in and children haven't learned yet, and even once they can navigate one, it's impersonal, a list of things to select rather than a place to be. Kids that age live in make-believe. They respond to a world they can walk into and play with, not a set of options they choose from. So the playroom exists because visiting CoComelon should feel like visiting JJ, not opening an app.
Toys unlock as kids play, each one leading into a game, the room filling up the more time they spend there instead of everything sitting exposed behind a label from the start. I also built it with room to grow: if the structure worked for JJ's playroom, the same idea could extend to other characters across the CoComelon world, each with a space of their own to wander into. Whether that expansion ever gets built is separate from the decision itself. The affordance is there because I designed it to be there, not because a menu happened to evolve into a room.
GAMES DESIGNED
ゲームWheels on the Bus
Action verse participation with two-pass loop
Peek A Boo
Hide and seek with JJ using visual cues
Baa Baa Black Sheep
Color & wool collection with micro-rewards
Bingo
Spelling & rhythm game accepting any sound
Look & Learn Bus
An I-spy type educational game
Yummy Rainbow Popsicles
Giving children autonomy and a role in the game
Twinkle Twinkle Little Star
Emotional regulation and winding-down
KEY VISUALS
ビジュアルVIDEOS
映像ITERATION
反復The first cut of the interaction pattern prompted too often and too directly, which read as encouraging to us and as pressure to a shy kid on the other side of the screen. We slowed the pauses to a full 2 to 4 seconds, delayed the reveals, and softened the language asking for a response. Participation went up almost immediately, which was less a design win than a correction: we'd built something that punished hesitation, and we stopped.
COLLABORATION
協働I created detailed storyboards, flows, and naming conventions in Figma and Notion. PMs used these docs to stay informed on next tasks pre storyboards. Animators used my shot maps to match character motion to voice inputs.
I also created scalable templates for scene structure, interaction points, and reward systems so engineering and animation could build consistently across multiple titles using the same interaction patterns.
OUTCOMES
成果Product Launch
- Multiple interactive titles shipped using the same research-backed UX framework
- The FTUE and interaction loop became a template adopted across new games
- Moonbug approved and praised the educational pacing and tone
Qualitative Wins
- Caregivers found it easy to guide children through the songs
- Kids replayed favorite songs multiple times per session (validating the engagement patterns)
- Internal teams reported improved speed and clarity thanks to reusable templates
Platform Impact
This project established the voice-first, education-aligned design foundation for CoComelon's interactive content on connected TV.
REFLECTION
振り返りWhat I Learned
One extra second of silence changed whether a two-year-old felt like they'd been heard or talked over. That's the whole scale this project operated at. Not features, not mechanics. Seconds, and whether a small kid on the other end of the screen felt like the game was willing to wait for them.
What I'm Most Proud Of
Creating a reusable voice-first interaction model grounded in research findings that became the backbone for multiple CoComelon games.
Biggest Challenge
Balancing parental needs, children's cognitive abilities, and technical limitations while keeping the experience joyful.
What I Would Do Differently
Establish success metrics earlier and implement a lightweight analytics layer to measure attention and participation patterns—quantifying what we observed qualitatively.
Case Study
COCOMELON