Context
Heartland Bank’s digital products had evolved rapidly as the organisation expanded its online banking services. Different teams were shipping features quickly, but without a shared design language the interface had become inconsistent across the mobile app and web platform.
Designers and developers frequently rebuilt similar components from scratch, creating inefficiencies and subtle usability issues. The bank needed a centralised design system that could support product growth while maintaining a consistent customer experience.
The Problem
A detailed audit of the product revealed several issues:
• multiple variations of common UI components (buttons, form inputs, navigation elements)
• inconsistent typography and spacing across different parts of the app
• duplicated work between designers and developers
• accessibility inconsistencies in colour contrast and touch target sizes
These inconsistencies not only slowed development but also created friction for customers navigating the app.
Discovery & Audit
I began by conducting a full UI and component audit across the mobile banking app and website.
This process involved:
• cataloguing every existing UI component
• identifying duplicated patterns and visual inconsistencies
• mapping how frequently each component appeared in the interface
• reviewing accessibility compliance for key flows
The audit revealed over 20 variations of buttons and multiple competing navigation patterns, which reinforced the need for a unified system.
Design Approach
The design system was built from the ground up using a layered structure.
Foundations
The first step was defining the foundational elements that would guide the entire interface:
• typography scale
• colour system aligned with accessibility standards
• spacing and layout rules
• iconography guidelines
These foundations ensured consistency before individual components were introduced.
Component Library
Next, I designed a reusable library of core components including:
• buttons
• form inputs
• dropdowns
• navigation elements
• cards and data displays
Each component included multiple states and clear usage guidelines to ensure teams could apply them consistently.
Documentation
To ensure long-term adoption, the design system included detailed documentation explaining:
• when to use each component
• accessibility considerations
• interaction patterns
• responsive behaviour across devices
This helped align designers and developers around a shared design language.
Product Improvements
Alongside building the design system, I applied the new components to improve key mobile banking flows.
This included:
• simplifying navigation within the mobile app
• improving form clarity for common banking tasks
• increasing accessibility through improved contrast and touch targets
These improvements ensured the design system delivered immediate value to customers as well as internal teams.
Impact
Following implementation:
• design and development teams were able to ship features faster using reusable components
• visual consistency improved across both mobile and web experiences
• accessibility scores improved across several key flows
• internal teams reported clearer collaboration between design and engineering
Reflection
The most valuable outcome of the project wasn’t just the components themselves, but the shared language the system created between designers, developers, and product teams.
By establishing a scalable design foundation, Heartland was able to deliver new features more efficiently while maintaining a consistent and accessible experience for customers.
