ZigoPay: Rive and Lottie animations for a UPI payment app

ZigoPay is a UPI payment app on Android and iOS. Along with UPI payments, users can recharge their mobile, pay DTH and utility bills, book travel and pick up coupon codes. ZigoPay needed a full visual identity and its in-app animations ready for launch: a logo, app icons, a splash screen, an onboarding flow and the animations around every payment.

The payment screens were the hard part. Once a user pays, the app waits for the bank to respond, and nobody knows in advance how long that will take or whether the payment will go through. A fixed-length animation either finishes before the result arrives or is still playing after it has.

In a payment app, that gap matters. A user who sees a success animation for a payment that then fails, or who watches a loader that has stopped moving, starts to doubt whether their money went through.

We split the work between two formats. The splash screen plays the same way every time, so we built it in Lottie. The onboarding flow and the payment animations respond to what the user does and what the bank sends back, so we built them in Rive.

The payment animation is a single Rive file with three states: loading, success and failure. The loading animation loops for as long as the payment takes. When the result comes back, ZigoPay's developers fire a success or failure trigger and the animation moves straight into the matching ending, so what the user sees always matches the real result.

Every animation went through the same steps: we worked out the idea, designed the artwork in Adobe Illustrator, rigged and animated it in After Effects for Lottie or in Rive, then exported it in the format the app needed. The full set was delivered in two weeks.