Project Overview
Designed a banking design system to reduce complexity in digital banking and create a consistent, reliable experience for users, system supports everyday financial tasks while enabling teams to scale new products with ease.
The goal was simple:
Help users complete financial tasks with confidence and help teams design and build faster with fewer decisions.
Responsibilities
Defined the design system structure and principles
Designed core components, tokens, and patterns
ocumented usage, anatomy, and behavior
Aligned design decisions with real banking use cases
Outcome: Web and responsive
Objective
Create a clear visual language for digital banking through reusable, well-defined components. Improve accessibility, usability and consistency while reducing design and development effort and support both desktop and responsive layouts for long-term scalability.
Design Approach
Start with real user tasks
Grounded in everyday banking actions such as checking balances, paying bills, managing cards and viewing statements. Components were designed around real user interactions.
Build once, scale everywhere
Each component was designed to be reusable, predictable and adaptable across different screens and journeys.
Accessibility by default
Color contrast, typography scale, touch targets, and states were defined early to ensure accessibility was not an afterthought.
Design Tokens
Design tokens reduce decision-making friction at scale.
By centralising colors, typography, spacing, and interaction states, teams maintain consistency, reduce rework and evolve the system without breaking components.
Foundations- Color, Typos, Icons
The foundation of the design system focuses on clarity, trust and scale, which are critical for digital banking experiences.
These foundations reduce visual noise for users and remove repeated decisions for teams.
Color System
Color is used to guide attention and reinforce trust in banking interactions. Simplified brand-led palette helps users quickly understand actions and status.
Typography Tokens
Typography is designed to make financial information easy to read. A simple type scale helps users scan content quickly, creating clear hierarchy and a familiar experience across devices.
Icon Tokens
Icons are used to support recognition, consistent and familiar icon style helps users quickly understand actions and system states without adding visual clutter.
Buttons & Anatomy
Buttons are limited to primary and secondary actions to reduce choice overload and keep decision-making clear in banking flows. Avoiding a tertiary action maintains hierarchy and focus, while standardized sizes and states ensure predictable behavior across layouts.
Cards & Anatomy
Cards are designed to present information in a clear and familiar way, helping users scan and understand content quickly, a small set of flexible card types keeps the interface simple, while a consistent structure ensures clarity across banking journeys.
Web Layout & Grid
The grid is designed to simplify complex banking screens by making information easy to scan and prioritize, consistent spacing and alignment create predictable layouts across desktop and responsive views, helping both users and teams move faster.
Outcomes & Impact
The design system accelerated design and development, delivered a consistent and accessible banking experience, and simplified onboarding for new team members. It established a scalable foundation to support future products and long-term growth.
Reflection
This design system is not just a UI library. It is a shared language between design, engineering, and product teams. By focusing on real user needs and clear rules, the system supports both speed and quality without sacrificing trust.