Back Evolving scalable design systems for fintech
AI_Generated_Image_2025-07-21 2
OVERVIEW
Background At our fintech company, users navigate complex flows like opening an RESP account, transferring old plans, and making large withdrawals. Small UX gaps in these flows created friction and led to user drop-off or increased support calls.

This case study focuses on three key components we redesigned:
  • Stepper
  • Status Checker
  • Cards
My Role As one of two designers on the team, I led a series of component redesigns in our shared design library to improve clarity and trust during task-heavy processes, ensure design components are responsive, accessible, and scalable, and align better with our evolving brand and code implementation. I partnered with PMs and engineers to align on requirements, and also validated the solution through internal feedback and iteration.
CASE STUDY 1
Redesigning the Stepper Component
Problem The original stepper component in our design library lacked clarity and flexibility:
  • It did not indicate how many questions existed within each step.
  • Users were confused by long onboarding flows, unsure of how far they had progressed or how much was left.
This led to hesitation, drop-offs, and frustration—especially in high-stakes tasks like opening an RESP plan or completing KYC.
Goals
  • Help users understand their progress and feel in control during complex flows.
  • Ensure consistency across different product flows (e.g., onboarding, plan updates).
  • Provide a flexible, scalable component that works in Figma and code.
Design Approach Instead of showing each question as a step, we grouped related questions into larger steps, each step is now represented by a horizontal progress bar:
  • If a step has multiple questions, progress is shown using partial fills (e.g., 1/2 or 2/2), but not as separate ticks or mini steps.
  • Users can see which step they’re on and how many sections are left.
Group 1000005345 1
Figma Variants We built the new stepper with flexible options in Figma to support various flows:
Step count: 2–8 steps
Progress state: Empty / Partial / Complete
Size: Desktop / Mobile
螢幕截圖 2025-07-21 下午5.06.52 1
CASE STUDY 2
Designing a status checker
Problem Previously, users had no way of knowing what was happening after they submitted a withdrawal request. This often led to:
  • Confusion and anxiety about when money would arrive
  • Repeated support tickets asking “Where’s my money?”
  • Frustration especially when large sums were involved
The existing system lacked any real-time feedback or status visibility.
Goals
  • Provide a simple, clear view of where users are in the process
  • Avoid overwhelming users with too much detail
  • Handle two different flows:
  • Under $5,000: automatically processed
  • Over $5,000: requires manual review
  • Make the design scalable and easy to reuse across the platform
Design Solution We built a status tracker that displays a three-tier visual state system, “Completed” – what’s done, “Current” – what’s happening now and “Future” – what’s coming next. And we introduced two additional states for rare cases which are “Action Required” – user needs to upload a document or confirm something and “Cancelled” – the request was terminated before completion.

Status Flows:
For withdrawal Amount Under $5,000, it will be In Progress → Approved → Money Sent.
For withdrawal Amount Over $5,000, it will be In Review → Approved → Money Sent.
[Mockup] iPhone 19 2
[Mockup] iPhone 20
[Mockup] iPhone 21
[Mockup] iPhone 22
Figma Variants The status checker is built as a flexible component system in the design library, with key variants:
Flow Type: Under $5,000 / Over $5,000
Status: In Progress / In Review / Approved / Money Sent / Action Required / Cancelled
Visual State: Completed / Current / Future
Size: Desktop / Mobile
螢幕截圖 2025-07-21 下午4.31.24
螢幕截圖 2025-07-21 下午4.32.10
螢幕截圖 2025-07-21 下午4.45.53
CASE STUDY 3
Cards
Problem The cards that we used to have felt flat and non-interactive. They didn’t clearly show whether they were clickable or just informational. This visual inconsistencies led to confusion and clutter and developers had to hard-code different card styles for different use cases.
螢幕截圖 2025-07-21 下午5.08.01
Goals Our goals are to create a cohesive card system that communicates purpose through visual hierarchy and to clearly differentiate between clickable cards and static content. To improve readability, reusability, and responsiveness.
螢幕截圖 2025-07-21 下午5.09.11
Design Solution We replaced the stroke outline with elevation and shadow tokens to signal interactivity. This aligns with modern design language and user expectations.
Clickable cards are elevated, Static cards are flat with clear content framing. ️Content hierarchy: Structured header, content, optional actions.
In progress
Approved
Money sent
Your funds are expected to be deposited into your bank account by: May 10, 2024
Withdrawal amount
More details
Back
螢幕截圖 2025-07-21 下午5.20.41 1
Figma Variants Type: Static / Clickable / With Actions / Compact
Elevation: None / Hover / Focus / Click
CTA: Primary button / Secondary button / None
Layout : Icon + Header / Thumbnail +Header/ Just Header
We also introduced auto layout and design tokens to make these responsive and theme-friendly.
螢幕截圖 2025-07-21 下午5.09.34
螢幕截圖 2025-07-21 下午5.09.19
Back Evolving scalable design systems for fintech
AI_Generated_Image_2025-07-21 2
OVERVIEW
Background At our fintech company, users navigate complex flows like opening an RESP account, transferring old plans, and making large withdrawals. Small UX gaps in these flows created friction and led to user drop-off or increased support calls.
This case study focuses on three key components we redesigned:
  • Stepper
  • Status Checker
  • Cards
My Role As one of two designers on the team, I led a series of component redesigns in our shared design library to improve clarity and trust during task-heavy processes, ensure design components are responsive, accessible, and scalable, and align better with our evolving brand and code implementation. I partnered with PMs and engineers to align on requirements, and also validated the solution through internal feedback and iteration.
CASE STUDY 1
Redesigning the Stepper Component
Problem The original stepper component in our design library lacked clarity and flexibility:
  • It did not indicate how many questions existed within each step.
  • Users were confused by long onboarding flows, unsure of how far they had progressed or how much was left.
This led to hesitation, drop-offs, and frustration—especially in high-stakes tasks like opening an RESP plan or completing KYC.
Goals
  • Help users understand their progress and feel in control during complex flows.
  • Ensure consistency across different product flows (e.g., onboarding, plan updates).
  • Provide a flexible, scalable component that works in Figma and code.
Design Approach Instead of showing each question as a step, we grouped related questions into larger steps, each step is now represented by a horizontal progress bar:
  • If a step has multiple questions, progress is shown using partial fills (e.g., 1/2 or 2/2), but not as separate ticks or mini steps.
  • Users can see which step they’re on and how many sections are left.
Group 1000005345 1
Figma Variants We built the new stepper with flexible options in Figma to support various flows:
Step count: 2–8 steps
Progress state: Empty / Partial / Complete
Size: Desktop / Mobile
螢幕截圖 2025-07-21 下午5.06.52 1
CASE STUDY 2
Designing a status checker
Problem Previously, users had no way of knowing what was happening after they submitted a withdrawal request. This often led to:
  • Confusion and anxiety about when money would arrive
  • Repeated support tickets asking “Where’s my money?”
  • Frustration especially when large sums were involved
The existing system lacked any real-time feedback or status visibility.
Goals
  • Provide a simple, clear view of where users are in the process
  • Avoid overwhelming users with too much detail
  • Handle two different flows:
  • Under $5,000: automatically processed
  • Over $5,000: requires manual review
  • Make the design scalable and easy to reuse across the platform
Design Solution We built a status tracker that displays a three-tier visual state system, “Completed” – what’s done, “Current” – what’s happening now and “Future” – what’s coming next. And we introduced two additional states for rare cases which are “Action Required” – user needs to upload a document or confirm something and “Cancelled” – the request was terminated before completion.

Status Flows:
For withdrawal Amount Under $5,000, it will be In Progress → Approved → Money Sent.
For withdrawal Amount Over $5,000, it will be In Review → Approved → Money Sent.
[Mockup] iPhone 19 2
[Mockup] iPhone 20
[Mockup] iPhone 21
[Mockup] iPhone 22
Figma Variants The status checker is built as a flexible component system in the design library, with key variants:
Flow Type: Under $5,000 / Over $5,000
Status: In Progress / In Review / Approved / Money Sent / Action Required / Cancelled
Visual State: Completed / Current / Future
Size: Desktop / Mobile
螢幕截圖 2025-07-21 下午4.31.24
螢幕截圖 2025-07-21 下午4.32.10
螢幕截圖 2025-07-21 下午4.45.53
CASE STUDY 3
Cards
Problem The cards that we used to have felt flat and non-interactive. They didn’t clearly show whether they were clickable or just informational. This visual inconsistencies led to confusion and clutter and developers had to hard-code different card styles for different use cases.
螢幕截圖 2025-07-21 下午5.08.01
螢幕截圖 2025-07-21 下午5.09.11
Goals Our goals are to create a cohesive card system that communicates purpose through visual hierarchy and to clearly differentiate between clickable cards and static content. To improve readability, reusability, and responsiveness.
Design Solution We replaced the stroke outline with elevation and shadow tokens to signal interactivity. This aligns with modern design language and user expectations.
Clickable cards are elevated, Static cards are flat with clear content framing. ️Content hierarchy: Structured header, content, optional actions.
Portfolio
In progress
Approved
Money sent
Your funds are expected to be deposited into your bank account by: May 10, 2024
Withdrawal amount
More details
Back
螢幕截圖 2025-07-21 下午5.20.41 1
螢幕截圖 2025-07-21 下午5.09.34
螢幕截圖 2025-07-21 下午5.09.19
Figma Variants Type: Static / Clickable / With Actions / Compact
Elevation: None / Hover / Focus / Click
CTA: Primary button / Secondary button / None
Layout : Icon + Header / Thumbnail +Header/ Just Header
We also introduced auto layout and design tokens to make these responsive and theme-friendly.