• The client came with vibes, not a spec: two reference animations that captured the character and the emotional feel he wanted.
• The task was to reverse-engineer what he loved into an original character - one built to boost engagement and make the app feel more human, not just look good.

A mascot has to do more than look cute: it needs to show emotion as the user's finances change. We explored five directions (a money tree, piggy bank, wallet, coin, and banknote) to find which could carry that range.
The money tree won because it changes with the user. It grows, blooms with coins, wilts, or drops its leaves, an emotional range no static object can show.

We tested the palette for real-world displays: shades of green that stay fresh and readable across different devices, brightness levels, and light or dark app themes.

After several rounds of pose and color variations, the final palette was locked in: #97A836 / #F9D949 / #14180C.

A single static image can't react to what users do. So we built a set of core poses and emotional states the app can switch between depending on the moment.

We also designed a talking version: the mouth became a separate, animated element instead of a painted-on smile, so the character can "speak" to users in onboarding, tips, and notifications.

To make the mascot easy to control inside the app, we split the animation into states using named markers, labels that tell the code exactly which part to play. All of it lives in one Lottie file:

• Idle — the character's calm loop when the user isn't interacting.
• Reacting — an emotional burst when the user taps a button or completes an action.
• Talking — the character speaks during tips and onboarding.

For the client's developers, this means no separate files and no hunting for frame numbers. They call a state by its name in the code, and the app plays that exact part of the animation. New states can be added later the same way.

As the app grew, one set of states was no longer enough. The client returned to expand the mascot's range with two new poses: Listening, where the character leans in with a hand to its ear, and Getting Up, a transition from resting on a cushion to its neutral stance.

Both went through full sketch sequences before the final render, so every movement was approved before animation began.

In the Getting Up pose, the character sits scrolling its phone, and the screen had to glow. In After Effects that's one click. In Lottie, it's a real challenge: the format doesn't support effects like Glow, and what looks perfect in After Effects can disappear or break once exported.

So we built the glow without effects and tested it directly in the Lottie format, checking frame by frame how it would actually render in the app. The result: a screen that feels lit, in a file that stays light and works on every device.

Both new poses were delivered with named markers too, so the developers could plug them straight into the app alongside the original states.