How a global fintech rebuilt its design system for inclusivity: a rollout case study

Design · 6 min read

After an internal accessibility audit found inconsistencies across web and mobile products, a major fintech embarked on a nine-month program to make its design system inclusive by default. The initiative began with an accessibility audit of all core flows—onboarding, payments, notifications—followed by user research with a diverse sample of customers including older adults and screen-reader users. Findings were translated into prioritized tickets focused on components that touched the greatest number of users and transactions.

The engineering and design teams introduced accessibility-first components with built-in ARIA semantics, keyboard stories in Storybook, and tokenized alternatives for contrast and motion. They also built a migration toolkit: codemods that updated component imports, lint rules that flagged deprecated patterns, and a compatibility layer so older pages could progressively adopt the new library without full rewrites. The phased rollout reduced risk and allowed teams to allocate remediation cycles to the most critical customer journeys.

Beyond code, the fintech invested in cross-functional training, shipping a playbook that combined design patterns, audit checklists, and conversation guides for product managers. Six months post-rollout, the company reported measurable improvements in help-center queries related to navigation and a small but notable increase in completion rates for assisted-living users, demonstrating that inclusive design choices also move business metrics.