Case study 003, 2024, fintech
Cross-border send flow for Scotiabank.
Scotiabank's cross-border transfer flow, redesigned so a form with too many fields became a guided path that says when the money will arrive.
- Role
- Senior Product Designer, from research through IA, UI, and front-end collaboration
- Problem
- People dropped out of the international transfer flow at the steps that asked the most and explained the least: beneficiary bank details, the SWIFT/BIC code, confirmation, and fees.
- Decision
- You type the bank name and the SWIFT code fills in. Fees are described by when the money arrives ("arrives in 1 to 2 days"). The form validates inline, detects pasted codes, keeps a summary on screen, and hides advanced options until someone needs them.
- Result
- Shipped, and in production at Scotiabank.
Context
The problem
The form had too many fields, errors only showed up after submitting, and fees were described in bank jargon. Nothing answered the question people cared about most, which is when the money arrives.
Decision
The design decisions
Most decisions answer one of those failures. The SWIFT/BIC code was a step where people dropped out, so you type the bank name and the code fills in, instead of the form demanding it. The flow never said when the money would arrive, so fees are described by arrival time ("arrives in 1 to 2 days") instead of by tier names. Errors used to appear only after submitting, so the form validates as you type and detects pasted codes. A summary stays on screen so people can review the transfer without losing their place, and advanced options stay hidden until someone needs them.
Build
From Figma to the front end
I didn't hand off a static file. I worked in the codebase with the engineers and built the inline validation components, the SWIFT lookup interaction, and the WCAG 2.1 AA accessibility pass, so what shipped matched what I designed.
Context
Result
The interface on this page is shown with permission.
Next case
Legalize.pe