Indonesia is Shopee's largest market, with over 100M users across its e-commerce ecosystem, while ShopeePay serves 50M+ users locally. As competition from local digital wallets intensified, ShopeePay launched this initiative to strengthen its position as a standalone financial platform and convert Shopee's massive user base into long-term payment users.
My role: Lead Product Designer
Team members: other 2 product designers, 10+ PMs, 10+ FEs
Establish Trust: Leverage SeaBank's design language to create a streamlined, "Banking-Grade" experience that reinforces ShopeePay's position as Indonesia's #1 E-wallet (2023–2024).
Systemic Consistency: Harmonize the SeaMoney product ecosystem (SeaBank, SPayLater, SLoan, Insurance, etc.) through a unified component-based framework to accelerate development and design scalability.
Empower Growth: Refactor information architecture and localized UX to lower the cognitive barrier for non-Shopee users, driving seamless entry into our financial ecosystem.
Indonesia is not one user — it's 100M+ across a fractured archipelago. Three structural realities defined what design could (and couldn't) do here, and shaped every decision that followed.
We conducted a field study in Jakarta, visiting several chain stores with high ShopeePay usage. Here are the key characteristics and feedback from local users:
User Profiles
Diverse locals, including students, employees, and MSMEs, primarily cost-conscious Millennials and Gen Z.
Key Priorities
Driven by free shipping, cashback, and Shopee integration, though they find the current system response slow.
Pain Points & Desires
Frustrated by fees and clutter, they want a lightweight, low-cost standalone app with a professional banking experience.
Our audit on four critical FinTech interfaces (Home, SPM, PIN, P2P) revealed that the legacy UI was fragmented, e-commerce-heavy, and plagued by technical latency (PIN verification). P2P flow required an optimized Information Architecture (IA) and modernized components to elevate operational efficiency.
Due to limited space, only a selection of representative features is highlighted here.
Diagnosis 1: Financial Mindset Erosion
Audit: E-commerce banners dominate the Home screen; SeaMoney's revenue-driving products (SeaBank, SLoan, SPayLater) are not surfaced.
UX Impact: ShopeePay's real role is a bridge between SeaMoney's financial products and Shopee users — but the Home reads like an e-commerce marketplace, breaking that bridge before users see what's behind it.
Diagnosis 2: High Decisional Anxiety
Audit: Disorganized Payment Methods. The dropdown layout — borrowed from web design — packs too much density into a mobile screen. Promotional content and per-country payment variants compound the clutter, making the list hard to navigate.
UX Impact: Decision Paralysis. Cluttered UI increases user frustration and anxiety at the final payment step.
Diagnosis 3: Perceived System Latency — Peak Anxiety Point
Audit: Multi-round Loading Spinners during PIN input and confirmation (backend latency).
UX Impact: High Perceived Drop-off. Lack of Progressive Loading UI causes users to doubt transaction security.
Diagnosis 4: Visual Flatness & Info Density
Audit: Absence of Vertical Visual Hierarchy. All elements are presented with equal visual weight. The transfer list lacks clear segmentation.
UX Impact: High Cognitive Load. Users cannot effortlessly distinguish high-frequency contacts from entry-level actions.
Design Principles — Brand Continuity: Leverage Shopee's massive user base by maintaining core brand equity (Shopee Orange) while upgrading to a high-trust financial aesthetic. Evolution, not Revolution.
| Detailed Design Reconstruction | ||||
| Dimension | Color Strategy | Asset Integration | Space & Layout | Visual Refinement |
|---|---|---|---|---|
| Design Action | Reduce orange overuse. Shopee Orange is energetic — perfect on promotional surfaces, too loud on functional ones. Keep it bold for promotion; pull it back where users need calm and clarity. | Integrate existing SeaBank components and 2.5D illustrations into the ShopeePay and broader financial ecosystem. | Transition from high density to Card-based design with increased margins and white space; avoid excessive screen utilization. | Increased Font Sizes (Titles: 14px → 16px; Body: 12px→14px) and redesigned icons for higher recognizability. |
| Expected Impact | Establishes a professional, trustworthy environment while preserving brand recognition. | Ensures cross-product visual consistency and reinforces the "SeaMoney" ecosystem identity. | Reduces cognitive load and enhances clarity, allowing users to focus on their current task/step. | Improves accessibility and information hierarchy. |
| Image Samples |  |
 |
 |
 |
Applying "Financial Calm" to the most critical entry points.
Before: Crowded banners; fragmented info.
After: "Balance" & "PayLater" consolidated · −40% banner height · Finance entries fully displayed.
Design Note
Before: Web-style list — small text, poor tap targets.
After: Larger icon entries + Favourites for frequent recipients.
Design Note:
Before: Small tap targets; unfiltered list overwhelming in high-variety markets.
After: Methods categorised, recommended first · Dropdown replaced by half-sheet modal.
Design Note:
Before: Each data source triggered its own spinner — stacked loaders looked broken. No progress indication for long waits.
After: One unified loading indicator replaces all stacked spinners · Progress bar for extended flows.
Design Note:
Beyond ShopeePay, other product teams independently pursued a similar design direction — validating the approach across the ecosystem. A/B testing on the SPayLater flow demonstrated that the 2.5D visual treatment combined with a cleaner card layout drove a measurable uplift in click-through rate.
Following the launch, the new experience improved clarity across payment flows and reduced friction during daily transactions. The redesigned framework also became the foundation for subsequent financial service integrations within ShopeePay Indonesia.
