Cases | Xapa – OnionSquad

Animating Wellbeing for the Workplace

Giving digital characters the power to support mental health

How do you turn static illustrations into emotional companions?

We partnered with a mental wellness platform to design and animate a cast of avatars that weren’t just expressive—they were responsive. The mission: support personal growth through characters that could move, react, and connect with users in real time.

Character Foundations

The Warm. Clear. Emotionally fluent.

We started by crafting a set of inclusive avatars that reflected the emotional tone and diverse audience of the platform. Rounded shapes, balanced palettes, and subtle facial features helped express feelings without overwhelming the interface.

•Illustrated and vectorized for scalability

•Designed for both light and dark UI modes

•Built to convey calm, comfort, and clarity

These characters became the visual core of the platform’s identity.

remaining adaptable to different contexts.
Each character was meticulously illustrated and then vectorized, ensuring that every detail was scalable and clean, ready for both light and dark UI environments. This base became the cornerstone for a flexible and cohesive visual identity across the app.

Rigging for Responsiveness

Designed to move—and react.

Once the designs were approved, we moved into Rive to rig the characters. But we didn’t stop at simple motion.

We engineered modular skeletons and constraints for:

•State-based interactivity

•Triggered animations linked to user events (button taps, mood check-ins, etc.)

•Seamless integration with in-app logic

These avatars weren’t decorative—they became active participants in the user journey.

Animation with Purpose

Subtle, expressive, and always intentional.

We animated each avatar to reinforce moments of calm, encouragement, and emotional support—whether through a gentle nod, a guided breathing motion, or a cheerful greeting.

•Short, loopable animations

•Smooth transitions and friendly timing

•Built for runtime performance using Rive

By delivering lightweight, code-ready assets, we gave developers the tools to build an emotional layer into their app—without adding friction.

Peeling Back the Process

From illustration to interaction, these avatars became emotional guides.

Thoughtful design, smart rigging, and purposeful animation turned simple characters into real-time wellbeing allies—fully integrated into the product experience, and optimized for performance, clarity, and care.