noon: Scaling expressive motion with Lottie across a multi vertical ecosystem

Summary

noon is a UAE-born digital commerce platform spanning e-commerce, food delivery, quick commerce, and more.

In 2025, noon is live across the UAE, Saudi Arabia, and Egypt and significantly reduced motion-related development effort by shifting to a standardized, dynamic, and lightweight Lottie-based motion system, enabling faster shipping, localized experiences, and high-quality animation at scale without performance trade-offs

noon uses Lottie as the foundation of its motion design system to deliver high-quality animations at scale without sacrificing performance. It powers everything from premium experiences to micro-interactions, improving clarity, responsiveness, and brand consistency. By standardizing lightweight, cross-platform motion, noon enables teams to ship faster and scale consistently across iOS, Android, and multiple products.

Key Outcome & ROI

• Faster delivery and approvals: High-fidelity, standardized Lottie previews reduced back-and-forth and cut iteration cycles across design, product, and engineering
  
  

• Lower dev overhead: Dynamic Lottie animations offloaded repeated development work while remaining easy to integrate and trigger
  
  

• Performance at scale: Ultra-lightweight Lottie files (avg. 8–60KB) kept app downloads small and playback smooth across devices
  
  

• Localized motion, zero duplication: Variable Lotties enabled country-level personalization without maintaining separate assets
  
  

• Stronger engagement: Noticeable uplift in key surfaces like noon One, Delivery Dash, Trivia, and core micro-interactions
  
  

• Richer interactivity: Enabled dynamic triggers, seasonal moments, and in-app easter eggs with minimal engineering effort
  
  

• Optimized infrastructure: Reduced load on CDN and CMS while maintaining expressive, brand-forward motion quality

Lottie as a Growth Lever

In 2025, design became a direct driver of retention at noon through motion-led gaming experiences. With six in-app games launched and ~40% of game flows powered by Lottie, design shaped core loops like onboarding, progression, rewards, and feedback. Customer segmentation and state-based animations enabled fluid, personalized gameplay without added dev overhead—allowing design to actively influence engagement, iteration speed, and repeat usage rather than just visual execution.

Delight → Loyalty → Revenue

Lottie-powered motion helped noon One move beyond BAU experiences to create moments of delight that made the subscription feel premium and immersive. Expressive, lightweight animations across onboarding, benefits, and rewards increased perceived value, driving stronger loyalty and repeat engagement. At scale, variable Lottie states enabled rapid iteration across three regions, two languages, and multiple pricing and partner variants, directly supporting subscription growth and long-term revenue.

Making Boring Flows Better

Traditionally transactional flows like onboarding and address addition were reimagined as a single, continuous experience. Instead of feeling like multiple disconnected screens, motion helped these journeys flow together—guiding users through most of the journey in one cohesive narrative. Lottie-driven transitions reduced friction, improved clarity, and added moments of delight, transforming routine tasks into experiences that feel intuitive, lightweight, and complete.

Cross-Functional Learning Through Lottie

Over the last year, motion designers doubled down on interaction design, using Lottie as a catalyst for smoother, more intentional experiences. This shift naturally empowered visual and product designers to learn the basics of Lottie, collaborate earlier, and prototype interactions themselves—leading to better alignment, faster iteration, and stronger end results across teams.

Looking ahead

Lottie will continue to serve as the foundation for motion across the noon app. From microinteractions and gamified experiences to premium surfaces and campaigns, its lightweight and scalable nature allows motion to evolve without introducing complexity.

By treating motion as a system rather than an afterthought, noon can extend animation into more personalized and dynamic journeys while maintaining consistency, performance, and design integrity across the ecosystem.

A tip from the noon design team

noon uses variable Lottie animations driven by backend data, decoupling structure from content. This makes motion assets highly reusable and easy to scale across screens, contexts, and campaigns without rebuilding files. The result is faster iteration, less duplication, and a motion system that behaves consistently rather than as one-off assets.

“We adopted dotLottie to retain our existing After Effects-based animation workflow while enabling a more structured and scalable system. By developing a centralized template library in After Effects, we established a single source of truth for all animations, ensuring consistency and simplifying updates. The dotLottie format is also lightweight and easy to integrate, making it an efficient choice for seamless cross platform implementation.”

Saswata Dutta- Senior Motion and Interaction Designer