TippyTippy Avatar : Designing for a Curious Mind

#avatar #react #tailwindcss

Back in 2020, amidst lockdown and uncertainty, a casual conversation with my mentor Mr. Om Verma sparked an idea. I had proposed building an app that teaches programming to toddlers. As a parent himself, he offered a different perspective:

“Rather than teaching code, why not build something that connects children to reality? Help them recognize colors or differentiate between materials like plastic, wood, and metal.”

At the time, I was too wrapped up in my tech-centric thinking to appreciate the simplicity of his suggestion. But observing my two-year-old nephew and his learning patterns soon made me realize, he was right.

The Birth of TippyTippy Top

Later that year, during the TechGig and Google Hackathon, I developed a YouTube-integrated app for toddlers that curated educational videos in an interactive format. I called it TippyTippy Top, a playful nod to the childhood game “Tippy Tippy Tap, which color do you want?”

Although the project paused post-hackathon, my nephew kept asking:

“Chachu, when will you finish the game you’re making for me?”

That innocent question nudged me forward.

A Fresh Start: TippyTippy Avatar

In 2022, I pivoted to something more visual and tactile i.e., TippyTippy Avatar. I imported the open-source Avataaars sketch library into Figma, exported assets to SVGs, and used PhotoPea (an online PSD, SVG, Image editor) to simplify mask paths and customize illustrations.

I added export buttons for PNG and SVG, crafted a basic UI using Ant Design’s drawer component, and maintained a touch-only experience. But the lack of efforts showed, neither my friends nor my nephew were impressed.

An Unexpected Wake-Up Call

Fast forward to 2025, my nephew joined first grade and fell in love with the school’s Computer Lab. I assumed he’d be learning MS Paint, like I did. Instead, he told me about a game called Dragon Drop, a zigzag maze where you drag a dragon without hitting walls or obstacles.

It was a revelation:

The new generation that has mastery in operating touch devices lacks significantly in operating the mouse.
Toddlers love everything that is easy to figure out, and give them Quick rewards.
Any sort of bugs in apps dedicated to a toddler, whether Ui, lack of interaction, or crash, affect the toddler's learning, confidence, and self-esteem.
Simplicity is the answer

A New Purpose for TippyTippy Avatar

With this clarity, I decided to revive the project, this time with a refined goal:

Teach toddlers about Emotions, Face parts and Expression
Help them master mouse control
Familiarize them with colors
Enhance creative skills by allowing them to personalize the avatar

The Redesign Journey

I started with Chakra Ui, and then tried the latest version of AntDesign, both are excellent frameworks but were not offering me the simplicity that I required.

Finally, I landed on TailwindCSS and reimagined the app with these principles:

No hidden drawer, everything will be 1 or max 2 click away.
No congested design, everything will have proper tap target, alignment and proper spacing
Instead of Text heavy, app would have icons and something that toddlers can visualize.