For kids by kids
I designed the UI and set creative direction for a children's iPad app aimed at empowering kids to create their own stories and experience the magic of publishing a real app to the App Store by themselves. This was the main project I undertook while with Virid Digital.
Early Beginnings
Overview
Initially, I wanted to recreate what my grandma did for me.
Inspired by childhood story tapes with books my grandma used to send and the early days of learning to code while in design school, Cabbit Tales began as an idea for a small friend who grows with the user like a Tamagotchi that talks (I was imagining Link's fairy from Ocarina of Time). During COVID-19, it became the foundation for a kid-driven publishing tool that produced real, App-Store-ready storybooks.
Early sketches from a train on the way to downtown Los Angeles.
A painted sketch. I really liked using a workflow of camera > Photoshop/Illustrator at the time.
The first story visuals.
Vision Into Product
The challenge
Product goal drift and adapting to a shared vision within constraints.
Cabbit Tales started as a personal idea I’d carried since design school, a small companion who lived with the user, guiding them through stories (kind of what my grandma did for me with books and reading tapes), choices, and gentle challenges. Part choose-your-own-adventure, part Tamagotchi, but with purpose: help kids learn logic, math, and reading through a character that feels alive.
The spark returned near the end of my studies at design school when I first encountered HTML, CSS, and JavaScript together as part of a design project. I immediately sensed a future where design and code would merge, and I began imagining how the childhood experience of listening to story tapes from my grandmother could evolve into something interactive, adaptive, and modern.
After the pandemic hit, a friend and former co-worker asked me to join and co-found Virid Digital that he had started a bit earlier. I used Cabbit Tales as the anchor project to introduce something creative, hopeful, and technically interesting at a moment when the world needed all three. As the team grew, so did the input. The project shifted from an evolving companion to a kid-powered publishing platform, enabling children to create stories in Figma and publish them directly to the App Store. The slogan “By Kids for Kids” naturally emerged.
The challenge became personal as well as creative: How do I protect the essence of my original idea while guiding a team toward an expanded product vision during a chaotic global moment?
The spark returned near the end of my studies at design school when I first encountered HTML, CSS, and JavaScript together as part of a design project. I immediately sensed a future where design and code would merge, and I began imagining how the childhood experience of listening to story tapes from my grandmother could evolve into something interactive, adaptive, and modern.
After the pandemic hit, a friend and former co-worker asked me to join and co-found Virid Digital that he had started a bit earlier. I used Cabbit Tales as the anchor project to introduce something creative, hopeful, and technically interesting at a moment when the world needed all three. As the team grew, so did the input. The project shifted from an evolving companion to a kid-powered publishing platform, enabling children to create stories in Figma and publish them directly to the App Store. The slogan “By Kids for Kids” naturally emerged.
The challenge became personal as well as creative: How do I protect the essence of my original idea while guiding a team toward an expanded product vision during a chaotic global moment?
My favorite was the unicorn - it still makes me laugh for some reason.
Fluid Creation
Strategy development
Have fun while learning.
I approached Cabbit Tales through a blend of personal philosophy, design discipline, and long-held intuition about how kids learn best.
Memories of Lisa Frank.
A Character That Lives With the User
My original concept was a companion who grows through shared activity like an “invisible friend” with form. Something that liberated the mind, created escape, and adapted to the child’s performance and choices. Not instruction, but gentle, indirect education.
Learning through subtlety
The learning model emphasized:
- Logic
- Reading
- Comprehension
Empowering kids to feel like ,akers
I’ve always admired Apple’s focus on polish and interaction. But the reality is harsh: getting anything into the App Store is challenging even for adults. So we built a framework to lower that barrier.
On the creative side, I designed a simplified Figma component system kids and teachers could use intuitively.
On the development side, we engineered a pipeline that consumed parts of their Figma file and generated and injected a functioning iOS storybook including visuals, text, voiceover, and interaction logic.
The goal was simple:
Give kids real creative power, and let the quality of their work improve naturally through feedback and iteration.
On the creative side, I designed a simplified Figma component system kids and teachers could use intuitively.
On the development side, we engineered a pipeline that consumed parts of their Figma file and generated and injected a functioning iOS storybook including visuals, text, voiceover, and interaction logic.
The goal was simple:
Give kids real creative power, and let the quality of their work improve naturally through feedback and iteration.
Process maturity
The build
Direction and team
My role involved design direction, prototyping, UI/UX, animation, interaction logic, component creation, and shaping the system that turned Figma files into working apps.
Cabbit Companion Logic
I developed early behaviors and adaptive responses tied to user decisions. Even though the companion system was minimized during the platform shift, its DNA still informed the tone and spirit of the final experience.
Narration and audio experience
To preserve the “grandma reading story tapes” feeling, I helped design the audio flow: voiceovers recorded by the kids themselves, giving each story genuine warmth and peer-level relatability. We also recruited an audio engineer to help with music and interface responses.
Creative ecosystem & mini launches
We encouraged kids to treat each book as a tiny product release:
- Make it
- Share it
- Compare
- Improve
This naturally created an upward cycle of self-guided betterment, something core to my original vision.
The text read along with the User. We played with assistive highlights and different voices. We ended on actual children's voices that Users could easily add through Figma.
Introducing Interaction
Activities Prototypes
The next stage of interactivity.
Later in the project, we explored a robust “Activities” feature. I helped shape early UI and interaction concepts bridging learning tasks, small challenges, and story branching.
Personal growth
Reflection
Cabbit Tales is one of the most meaningful projects I’ve ever worked on.
It taught me the value of holding onto a core concept while staying adaptable, the complexity of guiding a team through shifting product identity, and the power of frameworks that let people — especially kids — create with surprising polish.
Even though the project shifted away from my original companion-driven vision, the foundation we built proved something important: Children can learn when given tools that respect their intelligence and creativity.
The next chapter will return to the early idea, an evolving AR companion, anchored by the lessons learned, the Figma pipeline, and the clear potential for a hybrid model of story, play, and growth.
Contact Me
Have an app or game experience you want to create?
Use my form, send me an email at hello@johnhansen.design or schedule a call.