How Rive Supercharged activation on PayZapp
✦ The Brief
We discovered that the first transaction completion rate (activation) among newly onboarded users on PayZapp was underwhelming.
To address this, we decided to conduct multiple gamification experiments on PayZapp. The goal was to incentivise users and encourage them to complete their first transaction. These experiments needed to be highly iterative, allowing us to quickly adapt based on user feedback. Thus, the design-to-implementation timeline had to be as short as possible.
✦ What is Rive?
Rive is a design tool with a primary focus on creating animations that are not only blazingly fast and tiny in size but also fully interactive. It empowers us to craft stunning illustrations and then animate and add interactions directly within the tool with the assistance of state machines. This makes it the preferred choice for our growth hacking initiatives.
While Lottie has enjoyed popularity in the past, it requires interactions to be manually added to the code, which can be complex and lead to longer implementation times. We've discovered that Rive offers smoother animations, better performance, and significantly smaller file sizes.
One of Rive's most significant advantages is its ability to minimize iteration and implementation time. With Rive, we can rapidly iterate on designs, making tweaks and adjustments on the fly without compromising quality. This agility has played a crucial role in accelerating our growth hacking efforts, allowing us to bring ideas to market faster than ever before.
✦ What we made
Immediately after a user completes their onboarding journey on PayZapp, we activate a delightful pop-up powered by MoEngage.
Our aim is to evoke a sense of excitement and achievement in the user, prompting them to eagerly explore the 'gift box' they've just unlocked. With a full-screen display and a clear call-to-action (CTA), we effectively communicate the offer and guide users on how to claim their prize.
Despite being a single HTML page, the experience feels like a cohesive journey, thanks to the seamless integration of multiple animations and transitions facilitated by Rive's state machine.
By embedding interactions within the Rive file, the development of the HTML page was completed by the design team itself in just a few hours.
To implement any modifications to the flow, we simply updated the Rive file and replaced it within the codebase. This process, which only took a few hours, ensured that the changes were swiftly integrated and immediately went live.
✦ Scalability
The combination of MoEngage and Rive has proven exceptionally advantageous in crafting similar experiences for various initiatives, including:
- Jeeto Dhan Dhanna Dhan campaign during IPL: Engaging users with exciting promotions and rewards during the Indian Premier League.
- Prompting Additional Bill Payments: Encouraging users to make another bill payment immediately after completing one transaction.
- Communicating Offers on Tap & Pay (Work in Progress): Providing users with enticing offers and promotions within the Tap & Pay feature.
✦ Next Steps
Rive proves to be a valuable asset in our current setup, particularly because it operates as an external HTML webpage. Currently, its runtime is not yet integrated into PayZapp, so it cannot be used directly within the app at this time.
However, incorporating the Rive runtime into our app could yield significant benefits. By gradually replacing Lottie files, which currently contribute to a considerable bundle size, we can streamline the app's size. This shift enables us to introduce more interactive animations that consume less memory and are quicker to implement, guaranteeing seamless user experiences.
✦ Acknowledgements
Special thanks to the growth product team @Shubhankar Uchil​& @Vishnu S​ for sharing the vision. @Anoop Sethumadhavan​, @Gurpreet Dhalla​ for such swift development. @Ishant Periwal​ ,@Utkarsh Kaushik​, @Aditya Sadhukhan​ & @Simarpreet Kaur​​ for helping with designs & the lovely animations.
This is interesting. If the app is not aware, how is the bottom sheet like element appearing? How and what is the trigger for showing that element? How is transparency achieved for the top part of that element....
Just curious
This is powered through the MoEngage SDK in PayZapp. They have a module called In App which essentially presents its own screen with static background when called...in this case we have made the background transparent, so if the user clicks on any area outside the popup it will get dismissed.
There are a few new In App templates they have released which are truly transparent, i.e., the rest of the screen can be interacted with even if the in app is presented on screen (picture in picture, etc.)
https://www.moengage.com/channel/in-app-messaging/