How an Indonesian payment app cut dev time in half

When Kredivo’s product team jumped into gamification, three rules guided the pilot project:

1.    Launch in eight weeks

2.    Minimize dev time

3.    Use Rive for design and animation

Kredivo is Indonesia’s first digital payment app with over 50% of the country’s Buy Now, Pay Later segment. Its emphasis on playful product design makes it popular with tech-savvy, aspirational Gen Z and Millennials. That's why Kredivo's small product team believed gamifying their annual SALEturahmi#RameRame campaign and creating a fun interactive experience would encourage sign-ups and increase usage.

Given everything at stake, an efficient and flexible workflow was critical to success.  Rive was brought on board based on Senior UX Illustrator Esther Puteri’s recommendation. “I’d come across Rive on a previous project. With only two months from ideation to release — and limited dev time — Rive’s features for creating interactive UI made it the best choice,” she explained. 

Designing a bus ride, stop by stop

The campaign centered around a gamified bus journey that celebrated visiting family and friends during Ramadan. At each of the fifteen stops, users completed “check-in” or “transaction” missions to earn rewards.

Esther and Senior Fullstack Engineer Deta Aditya led the design and dev teams. With limited time to learn Rive, they hit the ground running and figured out how best to work together.

Esther was in charge of creating the UI, characters, and animations. She started by creating the flow and UI in Figma, then the characters in Adobe Illustrator. Once the design was finalized, she exported the SVG files into Rive.

Powerful design features 

Esther was keen to test Rive’s features with fellow illustrator, Neil Adri. 

She began by exploring Layouts and Nested Artboards. Compared to After Effects, she loved how Rive’s Nested Artboards cleaned up her workspace, giving her a better way to track assets. 

Neil used Joysticks to bring a subtle 3D polish to her 2D graphics. Once all the screens were set up in Rive, she added logic using Rive’s State Machine. 

It wasn’t always straightforward, but trial and error paid off. “Once I got the hang of how the UI should adapt based on different user flows, using the State Machine became fast and easy,” she said. “We didn’t need extra dev time to hook up every animation. Rive handled it dynamically.”

In fact, the many advantages of Rive’s features, which give more control to the design team, outweigh the challenges of learning on the fly. “With Rive’s online resources, tech support, and Community, the learning curve was easier than I expected,” Esther tells us. 

She did wish Rive had deeper Figma integration, noting that rebuilding layouts manually slowed her down. Still, the time saved elsewhere more than made up for it.

Collaboration that moves faster

On the engineering side, Deta focused on performance and implementation. With a week of upfront research, he quickly became familiar with Rive’s React SDK and browser behavior. 

To streamline the handoff, Deta created a simple contract system: a checklist of required inputs, events, and run texts for each artboard before exporting to developers. That allowed both teams to work in parallel and shaved the timeline in half.

“Animations were smooth, load times were fast, and using out-of-band assets for audio files and sound effects helped keep file sizes small,” he said. “Rive gave the designers more control over UI design, animation, and interaction, while minimizing what devs had to build from scratch.”   

The campaign launched on time, ran for four weeks without a hitch, and saw a strong join rate. Moving forward, it will remain part of Kredivo’s toolbox, helping the design team create fun and engaging mini-games, animated explainers, and more without adding to the dev team’s workload.  

Cut dev time with Rive

Learn how Rive can benefit your company’s workflow on our pricing page.