Transaction states, product UI & styleguide

Overview

Ayopop is a digital payment and bill-payment app in Indonesia — electricity (PLN), water, internet, phone credit, and more from one place. Trust and clarity matter at every step, especially when money is moving.

This body of work spanned transaction feedback motion, marketing pages, product UI explorations, and a reusable design language for the team.

Transaction status animation

The transaction-status animation was built in After Effects and shipped via Lottie — advanced keyframed motion running in real time on iOS and Android. It was my first animation featured after Airbnb announced Lottie, and the first of mine to ship in a production app used by hundreds of thousands of users across Indonesia.

Pending, success, and failure were treated as micro-narratives: each state had distinct timing, illustration, and copy so the system could explain itself without a paragraph of text.

This was also my first independent project — and an early step into UI/UX as a career.

Product surfaces

Beyond status screens, the work covered:

• Marketing landing pages with motion-led storytelling
• Card patterns for the payments product
• 404 pages with the same illustration language
• AyoUntung savings / subscription explorations

Styleguide

The styleguide codified typography, color, illustration, and component behavior so product and marketing could iterate without reinventing the system each sprint.

Outcome

A more consistent payments experience where motion explains system status, and a shared visual language that scaled across app and web surfaces.