Designing a scalable payment experience across 7 regions
Due to the confidentiality agreement, some content has been modified
ShopeePay and AirPay were operating as separate products across 7 countries. I led the end-to-end design of a unified Scan & Pay experience that could scale across all markets while accommodating local requirements and business priorities.
Product Designer and Researcher
Designing a unified Scan & Pay experience that adapts across different markets and constraints — without increasing cognitive load for users.
We faced three layers of complexity:
We collected 18 apps across 7 countries to study the competitive landscape — analyzing each market's features, design patterns, user habits, and compliance requirements. This deepened our understanding of local rules and habits, helping us identify patterns worth adopting and pitfalls to avoid.
We took Indonesia — our largest market — as the baseline to optimize the core payment flow. In parallel, we mapped the variables across all 7 markets, placing each detail element into the standardized flow as a modular component to validate cross-market compatibility.
C2B
User Scans Merchant
User Scanning
Get Merchant Info
Payment Method & Risk Control
Result Notification
B2C
Merchant Scans User Flow
Generate Dynamic Payment Code
Merchant Scanning
Banking Gateway Interaction
Real-time Confirmation
Key Systemic Differences Across 7 Markets
Compliance & Identity Verification
Local laws dictate varying requirements for payment limits, KYC tiers, and data retention.
Settlement Mechanisms & Gateways
Brazil: Deeply integrated with Pix
Indonesia: Fully supports the QRIS standard
Thailand: Compatibility with PromptPay
Vietnam: Compatibility with VietQR/NAPAS
Payment Tool Preferences & Connectivity
SPayLater has high penetration in ID and PH. In regions with unstable infrastructure, the system prioritizes Offline QR generation and Retry Logic
Banking Partnerships
The list of supported Direct Debit banks varies by country. This requires a highly modular UI.
We created two design variations and tested them with 10 users from diverse backgrounds.
Key learnings for users:
* The links are not publicly available due to privacy restrictions
We conducted in-store testing in shopping malls and interviewed both users and merchants.
Key learnings for users:
Based on direct user research and CS reports from 7 countries, we mapped the C2B Scan & Pay flow as a representative example — to better understand user behaviour at each stage and provide more targeted design direction.
| STAGE | 1. Open Scanner | 2. Input Information | 3. Confirm Payment | 4. Select Payment Method | 5. Select Voucher | 6. PIN / Face ID (Critical Drop-off) |
7. View Result |
|---|---|---|---|---|---|---|---|
| ACTIONS | Opens the scanner from the Shopee homepage or ShopeePay in Me page. | Enters the payment amount and fills in the description field. | Reviews the total amount, payment method, and available promotion combinations. | Selects a payment method; tops up ShopeePay balance if funds are insufficient. | Browses the voucher list and selects a voucher. | Enters PIN or authenticates with Face ID; waits for verification. | Views the transaction result and shows the confirmation screen to the merchant. |
| THOUGHTS | "The scanner is easy to find on the Shopee homepage — but other entry points are quite buried." | "Do I enter the full price or the discounted price? What's this Description field for?" | "Looks about right, I think." | "Topping up is such a hassle — why do I have to leave just to add balance?" | "Which voucher should I pick? And how do I even buy one?" | "Is it frozen? Did my money disappear?" | "Was I charged the right amount?" |
| EMOTIONS | 😐 Neutral | 🤔 Confused | 😐 Neutral | 😣 Frustrated | 😖 Overwhelmed | 😠 Anxious (PEAK) | 😌 Relieved but Uncertain |
| PAIN POINTS | Scan & Pay entry buried under marketing banners; fragmented IA. | Description field purpose is unclear; amount input ambiguity (original vs. discounted price). | No price breakdown; total amount is unclear before confirming. | Top-Up completely breaks the flow — users must restart from scratch. | No "best value" indicator; voucher discovery and post-purchase return path are too long and complex. | Severe PIN verification latency; no progress feedback — app appears frozen. | Cluttered result screen; no clear visible balance update. |
| OPPORTUNITIES | Improve the IA hierarchy of the ShopeePay homepage; reduce visual noise and elevate key actions. | Improve input prompts and placeholder text so users clearly understand what to fill in. | Cleaner order summary with transparent payment breakdown. | Simplify the Top-Up flow to reduce steps; or introduce additional direct payment methods to avoid Top-Up entirely. | Add category tags to vouchers; clearly label the best-value option for quick selection. | Reduce visual glitches; provide clear, real-time status messaging so users always know what is happening. | Clearer payment success state with a well-structured breakdown hierarchy. |
Beyond direct user research, insights were gathered from multiple stakeholder channels to triangulate findings and align on design priorities.
Feedback from app store reviews, local operations teams, and regional PMs often pointed to the same core usability pain points — validating the research findings.
Stakeholder input was used to prioritize which market-specific adaptations were essential vs. optional, helping define the flexible-core model for the design system.
Designing across multiple Southeast Asian markets required balancing business goals, technical constraints, and diverse user behaviors.
Several core principles guided the system design approach.
Clarity & Trust
Simplify payment flows through clear hierarchy and transparent transaction feedback.
Consistency Over Complexity
Maintain a unified interaction model to reduce learning costs and improve trust.
Flexible Localization
Support local payment needs through modular and configurable design patterns.
We built a standardized payment flow based on the largest market which is Indonesia, then extended it into a flexible system. This allows different markets to customize behavior while keeping a consistent structure.
The system supports:
Customer Scan Merchant
Merchant Scan Customer
The design evolved continuously based on:
Key Improvements
Scaling a product across 7 markets isn't about redesigning for each country — it's about replicating core design capability into different markets. Here are the six principles that shaped how we built a scalable, cross-market payment experience.
1. Abstract Commonalities First
2. Core + Local Architecture
3. Design Tokens
4. Components, Not Pages
5. Governance
6. Localisation ≠ Translation
