A voucher webview for a well-known charity enterprise
This is a B2C and B2B2C voucher webview designed for a well-known charity enterprise, serving multiple country markets with English and Bahasa Indonesia interfaces. People buy vouchers, pick a payment path, share them, or redeem them at a counter. This article walks the seven flow maps of UI Flow V2. Screens are deliberately low resolution with merchant and client branding blurred; the structure, states and decisions are the point.
Buying, discounts and every payment path
The buy pop up looks simple but covers three behaviors: a single purchase, bulk orders in the hundreds, and typed quantities, with a system cap per voucher type. Payment was the most complex part of the project: one path through an e-wallet, another through ATM and bank transfer via a payment service provider, and every bank has different transfer steps. So each bank got its own bilingual step-by-step guide, plus a countdown that gives the waiting-for-funds period a visible state.
Sharing, redeeming and the long tail
The world after purchase is even longer: people write memos, copy voucher numbers, send vouchers to friends through a messaging app, and receivers open them from a link. The card itself has four states: new, used with undo, history and the single voucher case. Redemption had to support six methods, OTP, barcode, QR code, card number, barcode with pincode and URL, because every partner merchant runs a different counter system. The lesson from drawing these seven maps: a flow map's value is not the screens, it is laying the long tail flat so engineering and support see every path before launch.
