← Back to selected work
01 — Fintech

OCBC Digital Banking

On our long-standing OCBC account, I served as the lead designer for several key digital initiatives. A recurring, major workstream spanning two years was the Hong Kong localisation of investments, offshore accounts, credit cards, and loans across web and mobile platforms using Singapore's Design Language System. To demonstrate my breadth across the account, this case study also highlights two additional projects: leading the end-to-end UX/UI integration for a Buy-Now-Pay-Later (BNPL) feature, and driving the content strategy and user lab testing for Unit Trust products.

OCBC app screens for Pace rewards and OCBC Banking accounts, with two illustrated figures
RoleDesign Lead
MarketsHong Kong · Singapore
Team~2 designers + ad hoc support
WorkstreamsHong Kong localisation · BNPL · Unit Trust & content

The problem

A heuristic review of the existing Hong Kong flows surfaced two problems sitting underneath the surface-level inconsistency: a design logic gap, and a visual one.

  • Existing application flows lacked upfront eligibility screening, causing users to hit disqualifying checks mid-journey.
  • Entry points had no clear segmentation logic to guide customers to the right products.
  • Visual treatments were highly fragmented across dotcom, internet banking (unstyled tables), and mobile banking.
  • Hong Kong's regulatory norms, identity documents, and consolidated account structures could not simply use translated versions of Singapore's app.

The approach

Building a scalable design strategy

How might we adapt Singapore's scalable design system to unify Hong Kong's fragmented digital banking experience, while natively supporting local regulatory and product complexities?

01

Stakeholder alignment

Walked through Singapore's existing screens and high-level flows to ensure shared agreement before designing Hong Kong-specific screens.

02

Heuristic & market audit

Benchmarked against OCBC Singapore's eligibility-first logic and audited Hong Kong's existing flows to prevent users from reaching dead ends within the application flow.

Annotated flow diagram from the heuristic review, showing eligibility-check logic and drop-off points before and during the application flow
Heuristic review documentation — mapping exactly where the existing flow checked eligibility and where customers hit dead ends.
03

Logic mapping

Mapped Hong Kong's unique product structures against Singapore's models to identify necessary structural changes before adapting the design system.

The solution

Optimising product architecture and application flows

To address the identified friction points, I focused on structural refinement and journey optimisation, creating a more intuitive, compliant, and unified application experience.

Eligibility-first routing

No upfront eligibility screening meant customers filled in forms only to hit a disqualifying check mid-journey. Restructured flows to place qualification screening, identity selection, and document preparation at the very front of the journey.

Screens showing eligibility disclosure questions, identity selection, and document preparation ahead of application
Eligibility and identity selection moved to the front of the journey, with disclosure questions and document preparation set before the heavy data-entry steps begin.

Adapted product architecture

Studied and adapted Singapore's Design Language System templates to fit distinct Hong Kong structures.

Accounts opening

Redesigned the product shelf for Hong Kong's single consolidated account model versus Singapore's multi-account system. Identity Flow: Created branching journeys for Hong Kong IDs (remote) and China Resident IDs (online-to-offline).

Entry flow diagram showing Product Shelf, CVP Page, and Identity Selection screens with annotated routing between remote and branch account opening
The product shelf and CVP page, annotated to show the routing logic for Hong Kong's consolidated account and the identity-based branching.
Credit cards

Extended the application flow to give users the option to apply for multiple credit cards together.

Product shelf, CVP page, and multiple card application flow showing the option to pair and apply for a second credit card together
The multiple card application flow — from the product shelf, through the CVP page, to pairing a second card at the point of application.

Compliance handling

Legal disclaimers and nested T&Cs were scattered across the journey, with much of the Hong Kong market defaulting to raw, ungated PDF documents. Replaced scattered, ungated PDFs with a new scroll-gated consent pattern, forcing users to read to the bottom before continuing — a regulatory requirement Singapore's flow never had to design for, so this became a new component added to the Design Language System, built specifically for Hong Kong's documents.

Before and after comparison of terms and conditions acknowledgment: individual checkbox screens versus a single consolidated confirmation screen
Screens showing the scroll-gated consent pattern built for Hong Kong, for reading Key Facts Statement and Terms and Conditions before agreeing
Left — each document previously behind its own checkbox and confirm screen, now one numbered acknowledgment step covering all eight documents. Right — the scroll-gated consent pattern built for Hong Kong's KFS and T&C content, a requirement Singapore's flow didn't have.

Visual unification

Mobile banking showed different visual treatments between standard and premier account opening, with dotcom and internet banking diverging further still. Aligned all platforms onto a single library, converting dense fund tables into scannable, actionable cards.

Original unstyled table-based unit trust portfolio view alongside early account-opening step screens
Redesigned card-based investment account view aligned across mobile and desktop, alongside credit card application screens
Left — fund holdings shown as dense, table-based rows with no design system applied. Right — individual fund cards, aligned across mobile, tablet and desktop.

Measurable impact

Results

As agency-side design lead, downstream metrics like conversion lift or drop-off reduction sat with OCBC's internal teams post-handoff. What's verifiable from this side of the work is delivery scope and what it replaced:

Shipped scope

Delivered four product lines — investment, offshore, credit cards, unsecured loans — to the Hong Kong engineering team.

Unified compliance

Standardised T&Cs and acknowledgement processes prior to submission to streamline legal compliance and user flow.

Platform alignment

Replaced inconsistent treatments by bringing three platforms — dotcom, internet banking, mobile banking — onto one unified visual system.

Additional workstreams

Broader contributions

Buy-Now-Pay-Later integration

I led the end-to-end UX/UI integration for a Buy-Now-Pay-Later feature, mapping four distinct customer states based on the client's process map. Through lab usability sessions, we discovered that payment clarity — specifically regarding late fees and deduction schedules — was the primary barrier to user trust, rather than visual polish. In response, I designed a relabelled, multi-access content hierarchy to maintain continuity during the bank-to-third-party handoff. The design reached full stakeholder sign-off with handoff-ready files, though the launch was ultimately halted due to the third-party provider closing.

4Customer states mapped
3–4Lab usability sessions
Full sign-offHandoff-ready, pre-launch
BNPL Pay in 3 interest-free dashboard showing buy limit, Pace points and vouchers
The BNPL "Pay in 3, interest-free" dashboard — buy limit, Pace points and vouchers surfaced together.

Unit Trust content strategy

In a parallel, multi-month workstream, I led the content structure strategy for Unit Trust landing pages. While the client's CX team facilitated the user lab testing, I actively participated and scribed during the sessions to ensure our messaging and sequencing decisions were grounded in actual user data rather than internal assumptions. Alongside this research, I oversaw the design team, guiding the conceptual direction and visual explorations to establish how the new pages should look and read.

Content strategyUnit Trust landing pages
Participant & scribeLab testing led by client CX team
Design oversightConceptual & visual direction
Diversify with Unit Trust discovery screen showing curated fund collections and recommended funds
The Unit Trust discovery screen — curated collections and recommended funds, the product these landing pages were built around.
← All case studies Next: GoNetZero →