Onboarding that doesn’t feel like paperwork

The challenge

Every new investor on Thndr has to clear KYC before their first trade: identity, employment, tax residency and a photo of an official ID. The regulation isn’t negotiable. The experience around it was.

Problem

Sign-up opened straight into forms, grouped under abstract steps (Info, Verification, Agreement), before a first-time investor had seen what the app offered. Screens were designed one at a time rather than from shared components, so consistency, and a dark mode, were hard to scale.

Goal

Make activation feel like a few easy decisions instead of paperwork, and build it on a token-based design system the rest of the product could grow into.

What was done

01 Benchmarking

Benchmarked fintech onboarding flows across MENA and Europe, extracting patterns and insights that informed improvements in user activation and experience quality. This led to simplifying the onboarding flow, reducing friction in KYC steps, and aligning with familiar patterns users already trust.

02 Defining the UI direction and brand assets

Owned the end-to-end onboarding design, from wireframes to refined UI, iterating with cross-functional teams. Designed with scalability in mind, ensuring the evolving design system could support broader product flows and future features.

Security
Face ID
ID capture
Photo rules
Marketplace
Delivery
Storefront
Thndr coin

03 UI design

Translated brand assets into cohesive light and dark mode experiences, aligning closely with engineering, product and brand to ensure consistency and smooth implementation.

Log in — Entry point, kept to one decision.

First-time investors — Sets expectations before any form appears.

Regulation, up front — Licensing explained where trust is decided.

Social proof — 800,000 users, stated plainly.

No minimum — Removes the biggest assumed barrier.

Job status — KYC broken into single questions.

Tax residency — The heaviest step, made skippable.

ID capture — Clear rules for a good photo, before the camera opens.

Submitted — Confirmation with an obvious next step.

04 Design systems and tokens synergy

Strengthened the synergy between the design system and design tokens, enabling scalable, consistent UI patterns and reducing friction between design and engineering during implementation.

16 components pulled from the shipped flow. Five are shown in both themes, so flip the switch.

Colour Light + dark Values sampled from the shipped screens
Primary action #F0DB01 → #FCF700

Role Light Dark

Background #FFFFFF #000000

Field #F9FBFC #171717

Secondary action #EEF2F5 #171717

Selected #15A63E #33C836
- Error #FA2C24
- Link #4888F6
- Hint #F2F6FE
In dark mode a single #171717 surface carries text fields, secondary buttons, the inactive stepper and the camera frame.
Buttons Light + dark Primary, secondary, paired footer actions
Text field · Select Light + dark Label, placeholder, chevron
Date picker Light + dark Bottom-sheet wheel, confirm and cancel
Number pad Light + dark Custom keypad with delete
Top bar · Stepper · Progress Light + dark Back, three KYC steps, help; four-part intro progress
Social sign-in · Language Dark Provider buttons, divider, Arabic switch
Radio list Dark Single choice, selected state
Checkbox · Inline hint Light A ticked checkbox opens a reason field
Bottom sheet Light Scrim, handle, success state, inverse primary
Camera frame · Photo rules Dark ID capture guide and the three failure states