How Deliveroo brings
moments of delight
to their product
with Jitter
Deliveroo is a leading food delivery service that connects customers with their favorite restaurants, bringing delicious meals to their doorstep in record time.
The old way
Before Jitter, Deliveroo’s design team relied on traditional animation tools like Adobe After Effects for motion design. The process of creating animations was time-consuming, and translating them into a format that could be used in the product was cumbersome. Files needed to be converted into Lottie with the help of third-party tools, and this conversion was rarely seamless, resulting in broken animations or additional work. This often led to slower development cycles and projects being put on the back burner indefinitely.
“We were always relying on complex tools, which took hours and always involved a lot of manual steps. Even if the animation worked, it wouldn’t always be easy to implement, which often led to delays.”
As a result, the team often had to resort to simple GIFs or static images.
“We always had to jump through hoops with motion design tools — there wasn’t an easy way to quickly create animations and implement them. It was either too complicated or too static.”
The new way
When the team found Jitter, they quickly realized it was easy enough to use for any designer — even those without any motion design experience.
“Jitter gives you no excuse to skip motion. It’s that easy.”
With Jitter, they were able to directly export animations as Lottie files they can instantly hand off to developers. As a result, they could create polished animations much faster, and implementing them didn’t mean any extra work for the engineering team. “When it comes to product animations, designers often assume it’s never going to get built because it’s extra work. But a Lottie animation is just as easy for a developer to implement as a static image”, says Chris.
Product animations
For example, they recently redesigned their order tracker animation, which shows the journey of a delivery in progress. The GIF animations in that product also needed a refresh: they no longer matched the team’s new design system, could take a while to load due to large file sizes, and did not support transparency, making switching out color themes more difficult.
Instead of trying to salvage legacy files, the team took a clean slate approach and decided to rebuild the animations from scratch in Jitter. They used Jitter’s Figma plugin to import the designs, updated the color scheme directly in Jitter, and used the original GIFs as a background to recreate the animations using Jitter’s presets and custom effects.
Deliveroo also used this opportunity to create new animations for new types of delivery vehicles, such as personal mobility aids.
The result was more than a cosmetic refresh.
“By using Jitter and moving to Lottie and away from GIFs, we’ve improved both performance and scalability.”
The updated colors and Lottie format ensure the new animations are fully integrated with the rest of the app’s design language, making the entire experience more cohesive. Because the new assets have a transparent background, the animations will naturally shift with the interface, maintaining their visual integrity in both light and dark themes. The new animations also have a much smaller file size, leading to better load times and less data consumption.
”The flexibility and simplicity of Jitter means that we can animate more frequently, without worrying about complicated export processes.”, says Chris.
Product tutorials
Deliveroo also uses Jitter for creating tutorial animations within their partner hub. These animated tutorials walk users through how to interact with the platform, helping them understand key features in a more engaging, visual way.
“As a visual learner, I wanted to make sure our tutorials were clear and easy to follow. With Jitter, I was able to create simple animations that show the interactions in a clear and engaging way.”
The results
By switching to Jitter, the design team at Deliveroo was able to streamline their animation process, saving valuable time while adding moments of delight to Deliveroo’s products. With a simpler workflow, the design team now has more flexibility to create animations quickly and efficiently, while also empowering developers to implement these animations without a lengthy handoff process.
“Jitter is the easiest tool I’ve ever used to animate anything. It’s helped us add that extra layer of polish and delight to everything we do.”
Deliveroo is a leading food delivery service that connects customers with their favorite restaurants, bringing delicious meals to their doorstep in record time.
www.deliveroo.com