How CARS24 revved up interactions and engagements

When Senior Motion Designer Dushyant Dubey and Motion Designer Aryan Verma joined CARS24 in November 2024, the app’s design handled more like a Honda Civic than a Mercedes-Benz. This felt like a missed opportunity for a leading e-commerce automotive platform, so they set out to add richer, more personalized user experiences. To turn this vision into reality, they first had to overcome their toolkit's technical limitations.

Roadblocks with previous tools

When the two designers first joined, CARS24 used After Effects and Lottie for animations deployed within a React Native codebase. 

"Our main challenge was with dynamic content for the app," Dushyant explains. “With Lottie, we faced issues with fonts – you can't easily change text at runtime. We'd have to convert text to vectors first. There were also size and performance issues." 

This meant less flexibility and more cumbersome workflows when aiming for top-of-the-range features.

Changing lanes with Rive’s capabilities

Their search for a flexible solution led to Rive. Dushyant first heard about Rive on LinkedIn. They were inspired by subtle micro-interactions in other leading apps, so Dushyant systematically explored Rive's potential. 

"We looked at what other companies were doing and categorized the different use cases Rive enabled," he says. Aryan adds, "It became obvious that Rive could give us the personalization and control that was missing."

State changes were a major win. “With Rive, complex animation flows and image-to-animation state changes that react to users can all be in one file controlled easily by input,” he notes. 

Responsiveness and personalization were also key. “Rive supports auto-layout, meaning one file can adjust dynamically to a screen size. A huge draw was Rive’s ability to dynamically change text or numbers within the graphic, making it much easier to personalise content.” They also saw potential for mini-games and playful elements. 

Once he presented the possibilities and demonstrated the capabilities, the adoption process began.

Navigating the learning curve

The team began to test drive Rive around January. They used a step-by-step approach and moved from simple to more complex use cases. "The learning curve for designers felt like adding an additional layer, specifically for the state machine logic," Dushyant notes. For Aryan, some aspects of Rive required focused learning. "The keyframing interface and how you animate paths and vertices in Rive is different from After Effects.”

However, Rive’s learning resources proved invaluable. "Rive's documentation and tutorials, especially on their YouTube channel, were very helpful,” says Dushyant. Agreeing, Aryan’s advice to newcomers is: "Follow their Rive 101 playlist and don't be scared of the State Machine!”

Standout features and unexpected wins

As they grew more proficient, the unique advantages of Rive became clearer. Aryan highlights practical workflow improvements like nested artboards, which function like After Effects pre-comps, as well as features like sharing links, integrating with 'Play' and 'Framer' for prototypes, and version control.

Dushyant points to the creative possibilities. "The continuous release of new features like Vector Feathering, aka glows and shadows, was particularly exciting for us." 

Aryan emphasizes the shift in control over interactive output. “Previously, simple micro-interactions required a lengthy process with the dev team. With Rive, we can build that logic directly and free up developer bandwidth.” 

Transforming workflows across design and development

Rive’s impact reshaped their workflow, and they now prefer to work directly in Rive. The development team also embraced the change. "They can now just add the Rive file, and they don't have to do as much custom coding for interactions,” Dushyant points out. Aryan adds that developers like Rive’s GPU performance benefits and now want all Lottie files to be converted to Rive.

The results speak volumes, and Dushyant proudly shares the metrics: ”By switching to Rive, we achieved up to 90% smaller animation file sizes (from ~150KB to ~15KB), leading to a 10% reduction in app launch times, and a 50% faster design-to-development handoff."

Fuelling UX innovation

With a few months of Rive under their belt, the future looks bright. "We're exploring ideas like including micro-games as a way to include more engaging experiences,” Dushyant reveals. Aryan is also excited by the new creative potential, particularly how enhanced prototyping will facilitate design innovation.

By providing a new roadmap for innovation, Rive has enabled Dushyant and Aryan to craft more responsive, customised, and delightful experiences, ultimately putting CARS24 in the driver’s seat of interactive mobile design and performance.