Surepayroll
Surepayroll Illustration System and AI assistant
Credits
Branding, Art Direction and UX/UI: Farco Studio
Illustration System, Lottie Animations and Interactive Motion: Alicia Blasco
Category
Branding / Motion Design
Software
Lottie, After Effects, Figma, Rive, CSS Animation
Year
2026
I designed a scalable illustration system for SurePayroll, built from Farco Studio’s branding and adapted across various sizes and color palettes. To elevate user interaction, I created an interactive AI assistant animated in Rive that feels alive and reacts to what's happening on screen.
Building a master library
I developed a base library featuring the most relevant concepts for the brand. Each illustration was created in 18 different versions, optimised for various color schemes and size requirements.
Establishing the guidelines
Every element was considered (objects, symbols, hand gestures…) in order to create a flexible framework that allows the brand to expand its illustration library without losing consistency.
Meet Max
One of the key tasks was updating MAX, the brand’s AI assistant. I merged the new 2D system with the original 3D brand gradients to give the character a more dimensional finish. This allows MAX to stand out as a while remaining connected to the broader illustration style.
Communication with other departments
As an AI assistant, MAX is designed to be alive, changing its state and screen position based on the user's journey. This was implemented using Rive and Lottie animations and always putting user experience first.
Communication with other departments
In order to keep files as optimised as possible, I planned some animations and transitions as CSS animations. I was in charge of planning them out and sending the CSS properties and values to the dev team for them to be implemented.
