Xero UX Animations

A collection of UX animations created for Xero’s accounting software product, designed to bring clarity, delight, and storytelling into key onboarding and setup flows. I collaborated closely with illustrators Renee Chin and Magda Ksiezak, with all of us contributing to the early ideation and visual direction.

I animated each sequence in After Effects, building smooth, lightweight motion that enhances the product experience without distracting from it. The final animations were exported as Lottie files, optimised for seamless performance across desktop and mobile.

🎨 Illustration — Renee Chin & Magda Ksiezak
💡 Ideation — Renee Chin, Magda Ksiezak & Domenic Iaria
🎞️ Animation — Domenic Iaria
🏢 Produced at — Xero

Desktop

Ideation & Animatics

We focused on clarity first, ensuring each sequence clearly communicated what was happening, why it mattered, and what options were available to the user. Through quick ideation sketches and animatics, we explored multiple visual approaches before refining each animation into three clear stages. This structure helped simplify complex workflows and made the experience feel intuitive, purposeful, and easy to follow.

Final

These animations were designed specifically to work within a Lottie workflow, so they were all manually animated without relying on external After Effects plugins. While the original intention was to build the sequences in Rive, allowing interactions to directly trigger the animations, that approach would have required a more complex implementation and approval process for the product team. The examples shown here illustrate how those interactions were intended to behave, while still delivering a solution that was practical to ship within existing constraints.

Mobile

Below are some of the animations created for the mobile onboarding experience. Due to limited screen real estate compared to desktop, animation was used selectively, focusing on the Welcome screen and the “Setting up” step. Alongside the final animations, I’ve included early animatics exploring alternative ideas and directions, showing how different concepts were tested before landing on the most effective solution for mobile.