Company overview

Industry: Technology

Challenge Areas: Workflow efficiency, File format optimization

Summary

LottieFiles has transformed the way Zomato integrates animations into its app. From micro-interactions to large-scale festive campaigns, the Lottie file format has allowed them to deliver engaging, high-quality animations while maintaining performance. This has enhanced their user experience and strengthened their emotional connection, powering their vision of becoming India’s evolving lifestyle app.

Key outcomes and ROI

• Massive Reach: The Zomato Lookback 2024 project, powered by dynamic Lottie animations, captivated users with 18.7 million impressions (18,731,771 to be exact!)

• Optimized Performance: Using the dotLottie format reduced file sizes by 60-70%, ensuring faster loads and a smoother web experience.

• Stronger Brand Connection: By weaving cultural and festive themes into their Lottie animations, Zomato deepened its emotional bond with users, setting itself apart from competitors.

• Effortless Design Workflow: Seamless integration with Figma, After Effects, and LottieFiles Workspace empowered their designers to save countless hours and resources.

Making Zomato more engaging with culturally relevant Lottie animations

Zomato is all about making food ordering effortless and enjoyable while staying true to India’s diverse cultures, cuisines, and festivals. As the platform grew across different regions, the team realized that visual storytelling was a powerful way to connect with users and enhance their experience. Animations, in particular, made interactions more intuitive, engaging, and fun.

But there was a challenge—using videos and GIFs slowed down the app and affected performance. To fix this, Zomato teamed up with LottieFiles and switched to JSON and dotLottie animations, which significantly improved loading times while keeping interactions smooth. From loading spinners to coupon reveals and large-scale festive animations, motion design became a key part of the Zomato experience. This shift worked so well that the company built a dedicated animation team to bring even more creativity to the platform, making every interaction feel seamless and delightful.

Use case: Year end wrap - Zomato Lookback 2024

In 2024, Zomato spiced things up with Zomato Lookback—a personalized rewind of the users food journey through the year. Whether they explored new cuisines or stuck to their go-to comfort meals, the project captured it all (stats about the customer’s orders and dining transactions). They could choose between two fun modes: Nice Mode, a heartwarming celebration of their foodie milestones, and Roast Mode, where Zomato served up some cheeky humor about their ordering habits (all in good fun, of course).

From highlighting how adventurous (or loyal) their taste buds were to celebrating every late-night craving, Zomato Lookback 2024 was all about reliving delicious moments and making their customers the star of their food story.

The primary objective of using LottieFiles was to keep up with the evolving trends and growing demand for dynamic and engaging experiences. Zomato aimed to:

• Bring designs to life in a way that static elements couldn’t.

• Make user interactions more engaging and enjoyable.

• Keep users engaged longer.

Discovering LottieFiles: An efficient & reliable ecosystem for motion design workflow

By integrating multiple software through the LottieFiles platform, teams were able to enhance cross-functional efficiency and streamline the design workflow. Serving as a central hub for the entire design process for Lookback 2024, the platform allowed designers and developers to access visual assets and effectively communicate with one another. From concept design in Figma to animation development in After Effects, and seamless implementation with dotLottie for powerful optimization, LottieFiles proved to be the key to delivering a memorable user experience with eye-catching animations.

Here’s how Zomato brought Lookback 2024 to life:

Step 1: Concept and design exploration

Once the concept was finalized, their design journey began. The team explored different design languages for both Nice Mode and Roast Mode, aiming to craft distinct yet cohesive visual styles (think of a heavenly feel for the Nice mode and a burning hell for Roast mode). Simultaneously, they mapped out the user flow using Figma.

• Adapting Design Language and Animation Testing

With a design language locked in, the team adapted it across the entire flow while testing early-stage animations using the LottieFiles for Figma plugin. This step was crucial in previewing how their designs would come to life interactively, allowing them to refine and iterate before diving deeper into development.

Step 2: Animation development with Lottie

Once the designs were finalized, the focus shifted to accommodating the dynamic storytelling in their flow. To accommodate dynamic storytelling in their flow, the initial screens were designed in After Effects using three distinct layers:

• Background Layer: A Lottie animation themed around "Nice/Roast" mode.

• Story Context Layer: An animation depicting context-specific visuals related to the story.

• Dynamic Text Layer: Text dynamically fetched from the backend.

Despite the complexity of managing multiple Lottie layers, the flow ran smoothly thanks to the optimized size of the animations.

Creative Personalization: Alongside the animations, their incredible creative team worked on the final Personality cards that users received at the end of the flow. These cards featured fun, food-themed characters tailored to each user's ordering behavior, adding a layer of delight to the wrap-up experience.

Step 3: Implementation

Lottie was a game-changer, enabling Zomato to craft high-quality, lightweight animations that were not only visually engaging but also seamlessly integrated into the app - all while keeping file sizes as small as a few kilobytes (most of the lotties came out to be less than 100kb around 70-80kb). This not only sped up the animation loading time but it also helped us to save 60 - 70% of file sizes with dotLottie compression.

18M memorable experiences with Lottie

With the help of engaging Lottie animations and storytelling, Zomato achieved over 18 million user impressions. By leveraging LottieFiles, the team ensured their animations were not only visually polished but also highly efficient, delivering a smooth, engaging, and memorable Lookback 2024 experience for users. It was a perfect fusion of creativity, design, and technology.

** To learn more about how Zomato optimized file sizes through dotLottie compression, check out dotLottie.io.