How Troo Teaches Kids Empathy—and Cut App Size by 67% Using Lottie

Sudha Shankar (Founder, CEO and Head of Product, Troo) and Naishi Shah (User Experience Designer, Troo).

How Troo Teaches Kids Empathy—and Cut App Size by 67% Using Lottie

Sudha Shankar (Founder, CEO and Head of Product, Troo) and Naishi Shah (User Experience Designer, Troo).

Special thanks and acknowledgements: Troo Engineers: Gaurav Sharma, Ritika Garg, Kapil Dhiman and Karthik.

Industry: Education & Parenting

Region: California, USA (with global reach)

Use case: Social-emotional learning through interactive stories

Summary & Key ROI

  • 67% app size reduction from 160MB to 53MB, enabling faster downloads and better accessibility for users with limited storage or bandwidth.

  • Significantly improved load times, leading to smoother user experience and better engagement for young, attention-sensitive users.

  • Faster production pipeline which reduced animation and character delivery time from 10 days to just 2 to 3 days.

  • Enhanced visual quality with lightweight, scalable animations delivered consistently across devices without grain or lag.

About Troo

Troo (formerly Yeti My Friend) is a mindful and playful educational app designed to help children aged between 4 and 11 years build crucial social, emotional, and relational skills (also known as social-emotional learning). Through interactive and animated stories, Troo invites kids to explore a variety of topics, including empathy, disability, inclusion, water conservation, respecting shared spaces, and perspective-taking. With these stories and the lessons learned, Troo encourages children to think deeper about themselves, their community, and the world around them.

But Troo isn’t just another kids’ app. What sets it apart is its purposeful approach to design, one rooted in cognitive science rather than entertainment gimmicks and short-term engagement bursts. The app is ad-free, collects no personally identifiable information from children, and is designed to strengthen parent-child bonding through shared activities and meaningful conversations.

Troo is live in California schools and is expanding globally. Troo will soon launch its hybrid experience on Outschool, one of the largest platforms for homeschooling families, with over 1.5 million learners on their platform. Troo is also expanding its reach to families and educators seeking screen time that is "actually" beneficial for their children.

The Challenge - Creating Rich Stories Without Compromising App Performance

For Troo, the mission was clear: create meaningful, interactive stories that help kids grow emotionally, without falling into the trap of over-stimulating or overloading young users.

But as the team brought their stories to life, they hit a major roadblock: app size and performance.

The early pre-release version of Troo, before its release, was packed with animations, interactive elements, and multiple stories, making it a rich experience — but also weighed in at 160 MB, even before all the interactive stories were added to the App.

The team was concerned with:

  • Potential slow downloads, especially in regions with limited bandwidth.

  • Storage-heavy installs, which might become a barrier for families with older or lower-end devices.

  • Performance lags and long load times, which might compromise the magical experience they desired for their audience, especially for children with attention differences (such as those on the autism spectrum, an audience Troo specifically aimed to build for).

  • The more stories they wanted to add, the bigger the problem became — the product risked becoming too big to grow.

Additionally, the team aimed to maintain an agile development approach. With a small team and ambitious content plans, they needed a production workflow that wouldn’t hinder their progress.

The turning point came when their technical project manager suggested exploring Lottie, a lightweight animation format that could dramatically reduce file sizes without sacrificing visual quality.

Troo’s Design Process: Design Psychology & Animation Approach

Troo has 3 key factors that comes in to play when it comes to their design approach:

1. Color Palettes, Pacing & Interaction

At Troo, the animation styles are shaped by research in cognitive development and learning psychology. The team understands that children aged 4 to 11 are highly responsive to motion but are also prone to distraction and cognitive overload if overstimulated. The animations are therefore purposeful: they help children focus, reinforce story elements, and communicate emotions visually.

For instance, in their stories, characters are animated to reflect the emotions they’re experiencing—whether it’s joy, worry, or confusion—so that even very young children can pick up on emotional cues without needing to read or be told explicitly.

These animations have been leveraged to break down interactions into manageable visual chunks, supporting memory and attention. Every animation is designed to be smooth and sequenced, allowing kids time to process what they’re seeing and doing. Everything from a character’s expression to a scene transition is intentional and aligned with how children naturally learn—through observation, repetition, and emotion-based association. Rather than treating animation as decoration, the Troo team uses it as a tool to support deeper engagement and learning outcomes.

The visual choices at Troo—ranging from color to pacing—are carefully curated to create an environment that strikes a balance between stimulation and calmness. The App makes use of bright, cheerful colors to create a welcoming experience, but avoids the kind of saturated neons or high-contrast pairings that can contribute to short-term engagement bursts and overstimulation. This helps maintain a mood that’s playful but calm and focused, allowing kids to stay engaged with the content rather than becoming overwhelmed by visual noise. The pacing of animations is also tuned for their audience: gentle and steady enough for younger children to follow, while still feeling dynamic for older users.

Interaction patterns are designed to be intuitive and predictable, so children can navigate independently without needing to read instructions. Lottie was instrumental in building lightweight, responsive micro-animations—such as a softly pulsing icon or a brief success celebration—that worked seamlessly across multiple devices and platforms. These subtle movements helped guide attention and provided instant feedback without interrupting the learning flow. The result— an interface that feels alive and responsive, while staying grounded in purpose and clarity.

2. Balancing Engagement with Overstimulation

The team at Troo is very intentional about striking a balance between engagement and overstimulation, especially knowing that many children, including those who are neurodiverse, are more sensitive to intense sensory input. Troo avoids visual clutter and chaotic motion by limiting the number of animated elements that appear at once. Instead of filling screens with constant movement, we animate only the most relevant elements, using motion to guide focus or reinforce meaning rather than distract from it. This creates a sense of calm and clarity, allowing children to feel grounded as they explore.

When designing for their neurodiverse users, predictability and sensory regulation were especially important. Their animations followed consistent patterns, both in timing and behavior, so children always knew what to expect. Quiet moments, pauses between animated sequences, or static screens after big visual events, prevented cognitive fatigue. This approach not only supported children with different sensory needs but also benefited all their users by promoting deeper attention, emotional regulation, and healthier digital engagement overall.

3. Purpose-Driven Design

Troo’s design is driven by a core set of principles: clarity, emotional connection, developmental appropriateness, and purpose.

The team takes a purposeful approach, believing that everything on screen should serve a role in helping a child learn, feel, or do something meaningful. That means no arbitrary effects or decorative animations every bounce, sparkle, or motion serves to guide, confirm, or engage the user. The characters are animated with intention, expressing emotions that help children recognize and relate to feelings, which supports both comprehension and social-emotional growth.

Moreover, Troo’s interface encourages exploration by using visual cues instead of written instructions, making it accessible to pre-readers and early learners. Feedback is immediate and kind—success is celebrated with a quick animation, and mistakes are acknowledged gently, often with a subtle shake or a visual nudge. The interactions are consistent, calm, and confidence-building, ensuring Troo feels like a trusted companion to children, both engaging and playful, yet never overwhelming.

Thoughtful design Powered by Lottie’s Lightweight Dynamic Motion

As a design-focused early-stage startup, Lottie animations have been instrumental in helping Troo achieve its purposeful, high-quality motion design without the typical overhead.

The Lottie file format provided Troo with access to expressive, lightweight animations that enhanced product experience—something that would otherwise require significant investment in time, tools, and specialized talent.

In many ways, Lottie has democratized motion design, allowing companies of all sizes to create polished, responsive animations that feel handcrafted. For Troo, this meant delivering emotionally rich, playful interactions across platforms while staying lean and focused on what matters most: building a meaningful experience for kids.

Now, instead of relying on heavy video files or rasterized animations, the team adopted JSON-based Lottie animations, known for their ability to deliver beautiful, scalable motion at a fraction of the size.

With Lottie, Troo achieved:

  • App size reduction from 160 MB to just 53 MB — a massive 67% drop.

  • High-quality, non-grainy animations that worked smoothly across devices.

  • Significantly faster load times — a must for keeping young users engaged.

  • A more efficient production pipeline, cutting character illustration and animation time from 10 days to just 2 to3 days.

The Troo design team’s workflow now combines tools such as Adobe Illustrator for illustrations, After Effects for motion graphics, and the LottieFiles editor for fine-tuning animations and managing assets. This streamlined process not only expedited delivery but also enabled the team to experiment and iterate without incurring costly rework.

Why Motion Matters: Animation with a Purpose

At Troo, animation is more than decoration — it’s a tool for learning and emotional connection.

  • Mild, gentle animations help maintain children’s focus without overwhelming their developing brains.

  • Color choices are informed by cognitive and emotional science, creating a calming and engaging environment.

  • Interactive story moments encourage children to reflect, ask questions, and involve parents or caregivers, transforming screen time into a shared learning experience.

Importantly, the Troo team is intentional about not using animation as a gimmick. Sudha Shankar, co-founder of Troo, emphasizes: “Our goal is never to hook kids like a TV show. It’s to help them engage meaningfully — with the story, with themselves, and with the people around them.”

Moving Ahead with Motion

Troo’s journey is just beginning. With a growing footprint in California, UK, and Asia, and their plans to partner with a leading homeschool platform to serve over a million children, Troo is poised to become a leading name in purposeful kids’ learning apps that create a generation of socially confident and responsible children.

At LottieFiles, we’re proud to champion companies like Troo teams who prove that thoughtful motion design can create not just better products, but a better world for the next generation.

Explore Troo: yetimyfriend.comLearn more about Lottie: lottiefiles.com