Summary & Key ROI

botim, the MENA region’s leading communication platform, recently evolved into a full all-in-one app—bringing communication, payments, investments, and financial services together in one seamless ecosystem. To support this transformation, the team reimagined motion design as a core part of the product experience.

The challenge was achieving a premium, 3D-inspired visual style without slowing down an app used by millions. Traditional GIFs and videos were too heavy, while pure vector animation lacked the depth needed for botim’s new brand direction.

By adopting a hybrid raster + vector workflow inside Lottie, the team unlocked rich, textured animations at lightweight file sizes. Combined with classic animation principles, motion became a strategic tool for clarity, guidance, and brand differentiation—helping users discover features faster while keeping the app fast and accessible across all network conditions.

• Ultra-light assets: Hybrid Lottie animations reduced file sizes by up to 95%, delivering a rich 3D feel without increasing app weight.

• Faster feature discovery: Motion-guided UI improved discovery of complex flows by 50%, especially for financial services.

• A distinct visual identity: The hybrid workflow unlocked a unique 3D-style aesthetic that differentiates botim in the super-app market.

• More efficient workflow: The new raster-plus-vector process became a repeatable team capability, speeding collaboration and delivery.

• Ready for interactivity: With Lottie as the foundation, botim is now expanding into interactive, state-driven animations for deeper, more responsive user engagement.

  
  

  Beyond communication, botim’s product integrates a suite of essential services, including digital payments, investments, consumer credit, and international money transfers, creating a single, seamless ecosystem for its users.

  “In botim, motion helps us translate intent into experience. It’s how we make complexity feel simple, and technology feel human.” - Sherizan Sheikh, Chief of Design

  The full redesign and re-architecture of botim opened the door for us to rethink motion as part of our product’s DNA.

  However, we faced two major hurdles:

  Performance: Traditional formats like GIFs and videos were far too heavy. They would bloat the app's size and cause slow load times, which is unacceptable for an app serving millions of users across diverse network conditions.

  Visuals: Standard vector animations were lightweight, but they couldn't achieve the rich, textured, 3D-like depth that the team envisioned for botim’s new brand assets.

  The core challenge was: How could they deliver rich, 3D-style animations without crippling app performance? Lottie was the only format that offered the potential to solve this by providing lightweight, code-based animations that could be orchestrated creatively.

  Delivering Rich, 3D-Style Animations Without Slowing the App Down

  The Solution: A Symphony of Art and Technology

  The breakthrough was a two-part strategy: pioneering a hybrid visual workflow and grounding it in smart animation principles.

  1. The Hybrid Raster + Vector Workflow

  By animating sequences of PNG images within Lottie, the team crafted a 3D-inspired aesthetic that delivers the richness of 3D renders without the heavy load.

  The Process:

  • A static 3D icon (as a PNG) was deconstructed into individual, animatable layers in Photoshop.

  • Each layer was meticulously compressed to keep file sizes minimal.

  • These layers were then animated in After Effects to create the illusion of fluid, three-dimensional movement.

  • The final animation was rendered as a lightweight, code-based Lottie file.

  2. Core Motion Principles for a Smarter UX

  This visual technique was elevated by applying a suite of classic animation principles to make the interface feel alive and intuitive. Principles like Squash and Stretch were applied to give illustrations a satisfying, tactile feel, while every movement was crafted to follow natural Arcs for visual appeal.

  The use of Ease In and Ease Out ensured animations accelerated and decelerated smoothly, feeling both natural and physically believable. Anticipation was used to subtly signal an impending action, making the app feel more responsive. To add richness, Follow-through and Overlapping Action ensured animations resolved in a fluid, realistic way rather than stopping abruptly.

  
  

  The Impact: Motion That Moves the Needle

  The impact of their hybrid animation strategy was immediate and significant.

  • Lean App Size: Lottie animations proved to be up to 95% smaller than the traditional GIF or video formats we considered. This allowed them to maintain a lightweight app while delivering a premium visual experience.

  • Improved Feature Discovery: Motion started doing what good design always does: guide, reveal, and delight, they saw a 50% faster feature discovery rate for complex services like international transfers.

  • Groundbreaking Aesthetic: They successfully established a unique, 3D-like visual style that sets botim apart in the market, without compromising on performance.

  • Mastered a Unique Workflow: botim’s team developed an expert-level, in-house process for blending raster and vector animation, which has become a core competency.

  This success has made motion an inseparable part of the botim brand and their design process. It's no longer an afterthought but a fundamental tool for improving usability and delight.

  
  

  From botim’s Playbook: A Pro Tip

  Don't be afraid to push the boundaries of what Lottie can do. People often think of Lottie as purely for vector animations, but its real power lies in its flexibility. Their best practice is the hybrid raster + vector workflow:

  Deconstruct static raster assets (like PNGs) into layers and animate them in After Effects. By carefully managing the compression of each layer, you can create the illusion of complex 3D movement inside a highly performant Lottie file. This allows you to achieve a rich, textured aesthetic that vectors alone cannot replicate.

  What's Next: The Interactive Frontier

  The next frontier for botim is interactivity. They are now exploring Lottie’s State Machines, which allows animations to react to user input in real-time. The team envisions an onboarding mascot that waves when you tap it, or a payment icon that transforms as your transaction completes. This will push botim's user experience into a new era of intelligent, responsive, and dynamic design.

  Voices Of the Team

  "We weren't just adding motion; we were giving botim a new heartbeat. The old, static interface didn't reflect the dynamic 'all-in-one app' we had become." Yitong, Design Manager at botim