ShopeePay Scan & Pay

Designing a scalable payment experience across Southeast Asia

Overview

ShopeePay and AirPay were operating as separate products across six 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.

My Role

Sole Product Designer

Scope

End-to-end (Research → UX Strategy → System Design → Delivery)

Impact

Unified payment experience across 6 markets
Reduced complexity in multi-payment scenarios
Enabled faster rollout of new payment methods and promotions

The Challenge

ShopeePay operated across six Southeast Asian markets — each with its own payment infrastructure, compliance requirements, and user expectations. The existing designs were fragmented and difficult to maintain.

1. Market Fragmentation — SG, ID, MY, PH, TH, and VN each had distinct flows, inconsistent UI patterns, and separate codebases.
2. Promotion Complexity — Vouchers, cashback, and loyalty points had to display and calculate differently per market, creating confusing checkout experiences.
3. System & Compliance Constraints — Back-end systems and regulatory requirements differed significantly, limiting how much the UX could be unified without engineering rework.

Challenge: original designs across SG, ID, MY, PH, TH, VN markets

Competitor Analysis

I conducted a thorough competitor analysis across all six markets — examining how local and regional payment apps handle scan-to-pay flows, amount entry, confirmation steps, and promotion display. This helped identify patterns worth adopting and pitfalls to avoid.

Transaction Logic

We built a standardized payment flow based on the largest market, then extended it into a flexible system.

C2B

User Scans Merchant

User Scanning

Get Merchant Info

Payment Method & Risk Control

Calling banks/financial institutions Call Bank API

Calling banks/financial institutions Wait for Response

Result Notification

B2C

Merchant Scans User Flow

Generate Dynamic Payment Code

Merchant Scanning

Backend Processing & Deduction Token Validation

Backend Processing & Deduction Payment Execution

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.

User Research & Testing

Prototype Testing

We created two design variations and tested them with 10 users from diverse backgrounds.

Goals:
- Compare usability across different flow structures
- Identify friction points in payment decision-making

* The links are not publicly available due to privacy restrictions

Offline Field Research

We conducted in-store testing in shopping malls and interviewed both users and merchants.

Key learnings:

Users struggle with combining vouchers, balance, and payment methods
The motivation of using ShopeePay is rewards.

After receiving feedback, I discovered that the current design issues require better integration of voucher, top up, and password-free payments into payment.

Offline field research in shopping malls

Additional Feedback Channels

Beyond direct user research, insights were gathered from multiple stakeholder channels to triangulate findings and align on design priorities.

Key Insight

Feedback from app store reviews, local operations teams, and regional PMs often pointed to the same core usability pain points — validating the research findings.

Design Implication

Stakeholder input was used to prioritize which market-specific adaptations were essential vs. optional, helping define the flexible-core model for the design system.

Feedback channels diagram: app store reviews, local PM proposals, regional PM proposals

Real-World Constraints

In large-scale systems, design decisions are deeply constrained by reality. Instead of designing for the ideal case, we designed for adaptability under constraints

Design Strategy

Based on research and constraints, we defined a key principle: Standardize the flow, but allow flexibility in configuration

The back-end system is incompatible

When the amount of development projects is huge, they will choose to modify the design plan to compromise.

Admin system has insufficient functions.

Generally, we will communicate with the local in time to upgrade the admin system.

Compatible with access requirements of different services

Different countries will have access to different services, such as payment methods and different financial services.
Different countries have different compliance content

Business Priorities

Frequent changes in promotions and payment methods

Solution: A Scalable Payment System

The final design establishes a unified Scan & Pay architecture that supports both scan modes — Customer Scan Merchant and Merchant Scan Customer — across all six markets.

Standard Flow

Consistent scan entry point across all markets
Standardized amount input and confirmation screens
Unified payment result and error states

Flexible Adaptation

Promotion and voucher display adapts per market rules
Multi-wallet and payment method selection configurable
Compliance copy and disclaimers injected per region
Cross-border payment scenarios handled as optional layer

Solution: Customer Scan Merchant and Merchant Scan Customer flows across markets

Design Iteration & Variants

The design evolved continuously based on:

Business updates
New payment methods
User feedback

Key Improvements

Increased visibility of payment methods
Simplified layout for smaller screens
Better integration of discounts and rewards
Support for special scenarios (e.g. installment, cross-border)

Design iteration showing 5 versions: Original, content refinement, added payment methods, updated design style, and cleaner layout for small screens; plus special cases for installment and cross-border payments

Impact

Unified Scan & Pay experience deployed across 7 markets
Reduced design and engineering complexity in multi-payment scenarios
Enabled faster rollout of new payment methods and promotional features
Established a scalable design system reusable for future payment flows

Key Learnings

Designing for scale requires separating the universal core from market-specific layers early — trying to reconcile them later is far more costly.
Stakeholder alignment across local and regional teams is as important as user research; without it, even well-validated designs can stall at implementation.
Real-world constraints — system architecture, compliance, business priorities — are not obstacles to good design but inputs that shape a more durable solution.