Duolingo-Inspired Mascot Design & Animation

This project involved designing and animating a fully custom educational app mascot inspired by the playful personality and engagement principles of Duolingo. The goal was to create a character that could communicate emotions, guide users through app interactions, and enhance user engagement through expressive micro-animations.

The entire mascot was designed from scratch in Figma and later rigged and animated in Rive, resulting in a production-ready asset with over 10 interactive animation states.

Educational and gamified products rely heavily on character-driven experiences to build emotional connections with users. The challenge was to create a mascot that felt friendly, motivating, and expressive while maintaining a clean visual style suitable for modern digital products.

The character needed to:

Reflect a playful and approachable personality

Support multiple emotional states

Be optimized for real-time use in applications

Include smooth transitions between animation states

Follow the interaction quality standards seen in leading learning apps such as Duolingo

I began by exploring character shapes, proportions, and personality traits that would feel welcoming and memorable.

Key design considerations included:

Simple geometric construction for easy scalability

Strong silhouette recognition

Expressive facial features

Bright, engaging color palette

Animation-friendly structure

Every component was organized into reusable layers and groups to ensure a seamless transition into the animation workflow.

Once the design was finalized, the mascot was structured specifically for rigging.

This included:

Separating body parts into independent layers

Creating pivot-friendly asset organization

Optimizing vector paths

Establishing naming conventions for animation controls

The preparation phase significantly improved efficiency during the animation stage inside Rive.

The mascot was imported into Rive, where I created a complete rig using bones, constraints, and animation state machines.

The objective was to build a flexible system capable of handling multiple emotions and interactions while maintaining smooth performance.

The final mascot included 10+ custom animations, inspired by interaction patterns commonly found in modern learning applications.

Figma

Rive

Character design from scratch

Vector asset optimization

Bone rigging

State machine setup

Blend animations

Interactive animation workflows

UI-ready motion design

The final deliverable was a fully animated mascot system capable of supporting onboarding flows, achievement celebrations, notifications, loading states, and user guidance interactions.

The project demonstrates the complete character pipeline—from concept design to production-ready animation—while showcasing expertise in both visual design and interactive motion design.