background.

Payoo is one of Vietnam's leading payment intermediaries, processing millions of transactions daily for over 40 banks and 15,000+ merchants. However, rapid growth led to fragmentation. We had consumer apps, merchant portals, and internal tools built by different teams using different patterns. The product suffered from significant "Design Debt," slowing down development and confusing users.

Problem.

Rapid scaling across 5 squads led to ecosystem fragmentation. The lack of a shared design language caused significant technical debt (~30% dev time wasted) and created disjointed experiences across Mobile and Web, ultimately eroding user trust during critical flows like KYC and B2B transactions.

Goal.

To architect a unified Fintech ecosystem. The goal was to build a scalable Design System that accelerates delivery while ensuring a secure, consistent, and compliant experience for both Consumers and Merchants.

My role.

UX/UI designer

Contribution.

  • UX Research
  • UI/Visual Design
  • Prototyping
  • Motion Design

landing page.

I created motion design for the landing page to present the product in a clear and engaging way, helping users quickly understand its core value and key features. The motion was designed to increase engagement, support the content, and enhance the overall landing page experience.

Design process.

Planning

Define ProblemsFind Solutions

UX Design

WireframeUser Flow

UI & Interaction

Visual DesignMicro-InteractionsAnimation

Prototype Testing

PrototypeUser Testing

design iteration.

We brainstormed and sketched solutions to address the trust issues found in research.

Ideation.

1

Standardized Transaction Patterns.

Instead of unique layouts for every service, I sketched a unified structure for Transfer, Deposit, and Bill Pay. This consistency reduces the learning curve for users.

2

The Solution

To address the user fear of "losing control" with auto-payments, I ideated a "Spending Cap" feature (bottom right sketch). This allows users to set a maximum limit (e.g., 200,000), giving them the confidence to opt-in.

Icon services.

The icon set uses a reference grid as a visual guideline to ensure consistent sizing across all service icons. The line art style preserves the original visual identity of the Payoo e-wallet system. The icons are designed for shared use within the SDK and allow up to three color variations to align with partner's brand identities.

Payoo icon services board

key user
journey

We brainstormed and sketched solutions to address the trust issues found in research.

Secure Onboarding (eKYC)

1

The Challenge

Manual identity verification was a major bottleneck, causing high drop-off rates due to friction and branch visit requirements. We needed to balance strict banking compliance (KYC) with a seamless, high-conversion digital experience.

2

"Safety Guardrails" for Auto-Pay.

I designed a native mobile flow that leverages hardware capabilities to automate verification:
• NFC Data Extraction
• Biometric Liveness
• Resilient Error Handling

eKYC / KYB

Core Financial Actions

End-to-End Bill Payment

Smart Auto-Payment

The Web Gateway
Ecosystem

We brainstormed and sketched solutions to address the trust issues found in research.

Secure Onboarding (eKYC)

1

The Challenge

Integrating with 40+ banks and e-wallets means dealing with massive fragmentation. Each provider requires different input methods (Card number, Token, QR, Redirection).

2

The Solution

I designed a Modular Checkout System for the web that creates a consistent experience despite the underlying complexity:
• Adaptive UI: The layout shifts automatically to accommodate specific input requirements.
• Universal Compatibility: Whether it's a Visa card, a local banking app scan, or an external wallet redirect, the user flow remains linear and predictable.

Dynamic Layout System

API-Driven Layouts:
The checkout interface isn't static. It adapts dynamically based on the banking provider's capabilities.
• Left: Bank supports QR + Token (Split view).
• Right: Bank supports Card only (Centered view).

Global & Digital Payments

Omnichannel Integration:
A unified gateway supporting International Cards (PCI-DSS compliant), Local Banking Apps (VietQR), and 3rd-party E-wallets (Momo, Grab), ensuring 99% coverage for merchants.

outcome.

We successfully transitioned Payoo from a fragmented set of apps into a unified Fintech ecosystem. By architecting a token-based Design System, we aligned 5 agile squads, ensuring a consistent and compliant experience across Consumer Apps, Merchant Portals, and Internal Tools. The new system now serves as the "single source of truth" for both Design and Engineering.

Takeaways.
1

Impact.

The redesign delivered measurable operational and business value:
• 30% Faster Handoff
• 20% KPI Improvement

2

What I learned.

I learned that a Design System is 20% building and 80% governing. Success doesn't come from a perfect component library, but from writing clear documentation and fostering a culture where Developers and Designers speak the same language.

Next steps.
1

Multi-platform expansion.

Extend the Design System to support Desktop Web (Responsive) for complex B2B merchant tools, ensuring a seamless experience for business owners moving between mobile and laptop.

2

Automated regression testing.

Implement Visual Regression tools (like Chromatic) to automatically catch UI bugs before code is merged, ensuring that the system remains stable as it scales.