Case Study 04 · Regulatory Compliance UX

KYC
Digital
Onboarding

Financial institutions lose a large share of new corporate clients during onboarding — not because of the regulations themselves, but because the process feels like an obstacle course rather than a welcome. This is the design process behind a KYC flow that makes compliance feel like part of the experience, not separate from it.

Regulatory UX KYC / AML Design Conversion Optimization Document Collection Identity Verification

ROLELead Designer

USERSCorporate Clients, Compliance Officers

CORE PROBLEM40% client drop-off during KYC

SCOPEUX Flow + Regulatory Design

TIMELINE8 weeks

Phase 01 — Discovery

Why clients quit

Exit Survey Analysis — 400 Abandoned Applications

I analyzed exit surveys from 400 clients who abandoned KYC mid-flow over 6 months. The findings destroyed the assumption that complexity was the problem.

ABANDONMENT REASON ANALYSIS

"I didn't know what document was needed at this step" → 34% of exits
"I had to go find documents I didn't know I'd need" → 28% of exits
"The form errored and I lost my progress" → 18% of exits
"I didn't understand why they needed this information" → 12% of exits
"Too many steps / too long" → 8% of exits

KEY INSIGHT 74% of abandonment was caused by UX failures, not regulatory requirements
IMPLICATION If we solve the UX, we solve 74% of drop-off without changing a single compliance rule

The "Document Anxiety" Problem

The single biggest abandonment driver (34%) was users not knowing what document they needed at a given step. I solved this with a "document preview" pattern — tell users what they'll need before they start, and remind them at each step.

DESIGN RESPONSE TO DOCUMENT ANXIETY

PROBLEM	DESIGN SOLUTION	WHERE IT APPEARS
Don't know what's needed	Document checklist shown before flow starts — complete list upfront	Welcome screen
Have to go find documents	"You'll need this next" preview in sidebar — 1 step ahead	Every step sidebar
Don't know why it's needed	Inline "Why do we need this?" tooltip with plain-language explanation	Every sensitive field
Lost progress on error	Auto-save every field change — return to exactly where you left off	System-level

Phase 02 — Flow Architecture

Six steps, one coherent journey

Step Sequencing — Compliance Requirements vs. UX Optimal Order

Compliance requires specific information. It doesn't require it in a specific order. I reordered the steps from the compliance team's original sequence to an order that builds user confidence progressively.

STEP ORDER RATIONALE

STEP	ORIGINAL ORDER	REDESIGNED ORDER	REASON FOR CHANGE
Company Details	4th	1st	Users know this cold — instant confidence
Beneficial Owners	1st	2nd	Moved after trust established, not at cold open
Document Upload	2nd	3rd	Now they understand why — not before context
Source of Funds	3rd	4th	Sensitive — comes after rapport established
AML / PEP Checks	5th	5th	No change — system-run, user just watches
Review & Submit	6th	6th	No change — logical conclusion

The AML Check Step — Designing for Waiting

Automated AML/PEP screening takes 15–90 seconds. Most tools show a spinner. I designed a step that turns the wait into a trust-building moment — showing every check being run in real time, with plain-language labels.

AML STEP DESIGN RATIONALE

OLD PATTERN: Spinner + "Please wait..." → feels like a black box → anxiety
NEW PATTERN: Named checks, running in sequence, with plain-language labels

CHECKS SHOWN: Sanctions screening · PEP database · Adverse media · Credit history
EACH CHECK: Shows "Running..." → "Passed ✓" or "Review required"
TIMING: Staggered 800ms between each check — feels thorough, not slow

USER QUOTE "It felt like the bank was actually doing something, not just spinning"
RESULT Step 5 abandonment dropped from 22% to 4% after redesign

Phase 03 — Design System

Modern, institutional, warm

Typography System — Cabinet Grotesk + Lora

Cabinet Grotesk at heavy weight projects authority and modernity — this is a financial institution that takes design seriously. Lora italic adds warmth for step titles — a serif italic in a heavy grotesque environment creates unexpected elegance. The combination feels premium without being cold.

TYPE + COLOR SYSTEM

Cabinet Grotesk 800 → headings: modern authority, no legacy bank stuffiness
Lora italic → accent words in headings: warmth, sophistication, intentionality
JetBrains Mono → labels, IDs, codes: precision, technical credibility

Sage green (#3a6b5a) → verified, complete, safe — not consumer app green
Warm amber (#c87840) → needs attention — approachable, not alarming
Off-white (#fafaf8) → document surface — feels like paper, not a screen

Phase 04 — Working Prototype

Full KYC onboarding flow

Walk through the full 6-step flow using Continue and Back. Choose document types, fill in fields, and see the live screening in Step 5. Every step includes a sidebar showing where you are and what's ahead.

Phase 05 — Reflection

What the redesign solved

Critical Decisions

D1 Reorder steps to build confidence before asking sensitive questions
D2 Show full document list before flow starts — no surprises
D3 AML checks are visible, named, sequential — builds trust
D4 Auto-save — lose no progress on error or return
D5 "Why do we need this?" inline — reduces anxiety on sensitive fields

Next Iterations