Lumio — A Tablet App for Curious 8-12 Year Olds, with a Firefly Companion
An end-to-end kids' science learning app for iPad, with a mascot-led onboarding, a card-collection world map, an AI companion powered by Claude and ElevenLabs, and a separate parent dashboard.
Project Overview
A kids' EdTech studio building an AI-powered tablet app for curious 8-12 year olds wanted an end-to-end onboarding that did not feel like school. They wanted a mascot kids would get attached to in 30 seconds, a world map kids would obsess over, and a parent app calm enough that grown-ups would actually trust it.
The brief was a 10-screen onboarding plus a Zone 1 gameplay loop plus a parent companion app, all tablet-first, all character-led, with an AI companion that talks naturally inside a safe topic perimeter. The hero promise was simple: the firefly lights up curiosity.
Luma, the firefly mascot, leads every screen. She appears in six character states (idle, talking, thinking, celebrating, confused, sleeping) and her amber glow is the visual signature of every reward, lesson cue, and CTA. Card collection sits behind every interaction, with a 25-card grid as the long-term anticipation ladder. The world is structured as five biomes, only the meadow unlocked at start, the rest visible-but-silhouetted with padlocks so kids see what is coming.
The parent app intentionally breaks the kid app's palette. Where the kid app is warm meadow and firefly amber, the parent app is charcoal and muted gold. It is calmer, denser, and focused on three things parents actually ask about: time today, skills covered, and the ability to set limits.
What's Inside
10-screen onboarding
Mascot intro, profile setup, skill check, interest selection, world reveal, first card, first puzzle, parent connection, ready-to-play close.
Luma mascot system
Six character states (idle, talking, thinking, celebrating, confused, sleeping) rigged in Rive for smooth in-app animation.
Card collection (25)
A 5x5 journal kids open between sessions. Cards earned per win, with category filters and flip animations.
5-biome world map
Meadow, deep sea, sky, forest, lab. One unlocked at a time, others silhouetted so kids see the journey ahead.
AI companion conversations
Claude-powered persona with ElevenLabs voice, age-appropriate prompt engineering, and a 3-layer content safety filter.
Parent companion app
Separate iPhone app with progress, skill heat-map, daily time limits, weekly recap, and topic controls.
What the Client Provided
- A detailed 3-phase Product Requirements Document with user stories, screen specs, and data models
- A character concept brief for Luma the firefly companion, with personality voice and tone guidelines
- Brand guidelines, color palette, typography, and reference illustrations for the meadow biome
- Ready scenario content: dialogue scripts and challenge designs for the first 5 scenarios in Zone 1
- An HTML interactive prototype demonstrating the key onboarding flows
Design and Build Process
Mascot Bible
Locked Luma in five concept variations, picked one, then drew the six character states with motion principles for the animator. Mascot art was the single most-referenced asset in every later screen.
Design System
Built the color system (warm meadow + firefly amber + deep navy), typography scale, button states, card components, and a 12-column responsive grid tuned for iPad portrait and landscape.
Onboarding Storyboard
Wrote the 10 onboarding beats as a session arc, locked the copy first, then drew the screens. Every beat introduces exactly one new affordance, mirrors the Duolingo/BitePal masterclasses kids' teams have studied for years.
Zone 1 Gameplay Build
Designed five scenarios for the meadow biome, each ending in a card unlock. Built the drag-and-drop puzzle mechanic, the success and gentle non-punishing failure states, and the card-earned celebration moment.
Parent App + Safety
Designed the parent companion as a deliberate visual break: charcoal + muted gold instead of meadow + amber. Wired the AI companion through a 3-layer content safety filter with topic-perimeter enforcement.
Tools and Stack
Deliverables
- Full Figma design system with 40+ screens at iPad and iPhone resolution
- Luma mascot character system: concept art, six animated states, motion guide
- 10-screen onboarding flow, fully clickable prototype
- Zone 1 gameplay loop with five scenarios, card collection, and progress system
- Parent companion app (iPhone): progress dashboard, time limits, weekly recap, topic controls
- AI companion proof-of-concept: Claude prompt persona, ElevenLabs voice, 3-layer safety filter
- iOS and Android builds ready for App Store and Google Play submission
- Handoff documentation, motion specifications, asset exports at 1x, 2x, 3x
Other Relevant Work
Mission Ops Dashboard — A Space Course for Curious 12-Year-Olds
A custom interactive dashboard at the centre of a K-12 space course, with a world map, hotspot events, telemetry, an activity feed, and a 3D orbital globe.
Cell Architecture Studio
A 3D interactive atlas of the cell, with cross-sections, microscope views, and side-by-side comparisons.
Immersive AI Roleplay with Avatars
A multilingual avatar roleplay coach that speaks, listens, and responds with facial expressions and lip sync generated on the fly.