Online Banking Design System
Summary
I kicked off the development of a design system that provides designers and developers with accessible, consistent, and scalable components. This acts as a single source of truth for product design and development. While promoting the system's value, we encouraged flexibility and continuous improvement, empowering designers to propose changes and contribute to its evolution
Original Component Library
The UI library that existed when I joined the team
Uncovering the problems
Joining CU*Answers, I encountered a limited UI library and style guide. While sufficient for a single designer managing 1,000+ Sketch screens, it hindered collaboration and adaptability within our growing team. My goal became creating a system offering clarity and fostering a shared understanding as our products evolved.
1. Missing design documentation
- What design token (spacing, shadow, color, etc.) should be used in x case?
- How flexible was a component intended to be? Could we add more states? Variants? Guidelines?
- In what cases are custom components preferred over native (Android/iOS) components?
2. Scarce component library & tedious browsing
Our existing library lacked crucial components, forcing repetitive edits across hundreds of Sketch screens for minor UI updates like padding or borders. Tedious variant structures further hampered efficient component selection.
Sketch Component Browsing
We had to dig through multiple layers to find the exact component needed
3. Accessibility & development issues
The existing UI library, primarily used by designers, lacked developer-focused details. This inconsistency hindered accessibility and forced each development team (Android, iOS, web) to reinvent component implementation.
Making the switch from Sketch to Figma
With Figma's surging collaborative features and Sketch's stagnation, the migration presented a perfect opportunity to overhaul our design system. Rebuilding in Figma allowed us to leverage its robust auto-layout and variant handling, streamlining our component creation and workflow.
Rebuilding components
We began by defining foundational design elements and patterns. Our design system foundations included color, grids/spacing, shadows, icons, and typography – establishing the visual language across all components and interfaces.
Becoming a developers best friend
Our white-label products for 300+ credit unions spanned web, Android, and iOS, but inconsistent color handling across platforms created visual discrepancies. Each team used different algorithms for color variations, despite the customizable primary and secondary brand colors.
Collaborating with development, we established a universal solution for calculating these color shades, compatible with both our development platforms and Figma. This marked a crucial step in aligning design and development, ensuring consistent experiences for our clients.
Embracing Atomic Design & base components
We applied Atomic Design principles, constructing components from the smallest elements upwards to ensure consistency throughout our interfaces. Using base components within a nested variant structure allowed for efficient updating. A single edit to a base component (like input field padding) would cascade across all 576 variants, significantly streamlining our workflow.
Component variant control
Figma's powerful variant handling solved a major pain point: finding the right component variants. We created flexible components with customizable properties – elements could be toggled or selected from dropdowns – streamlining component selection and our entire design workflow.
Creating documentation
Comprehensive documentation is the heart of a successful design system. We aimed to empower new hires to work independently, with clear guidelines on best practices, accessibility, implementation, and using components to enhance user experiences. Our documentation was the culmination of our design system rebuild – yet it remains a living resource, continuously evolving to meet product needs and scaling opportunities.
Wins
Improved designer workflow with easy-to-use components & variants, reduced chances of inconsistencies that'll improve user experiences.
Created a system any teams can pull from that want to use our team's UI components and guidelines to ensure consistent & expected experiences.
Took the focus of accessibility up a level where designers and developers now know how to incorporate accessible colors, copy, components, patterns, and overall interfaces.
Our comprehensive documentation empowers new hires to jump right into design, eliminating the need to independently decipher design guidelines.
Losses/Challenges
It was difficult to pitch the entire idea of having multiple company products use one design system since company executives have always wanted every product to appear differently.
I challenged the perception of the design system as a rigid limitation. Instead, I emphasized its role as a collaborative tool for both developers and designers, always open to improvement. If someone proposed a superior component or pattern, we fostered open discussion to evaluate its potential for inclusion.
Initial setup of the design system took some time, but maintenance and future updates are now very quick.
What's next?
While our Figma documentation serves our team well, we're expanding! We're building an online design system repository to offer components, guidelines, code examples, and more – a centralized resource for all teams. Inspired by outstanding repos like those found here: https://designsystemsrepo.com/, we're creating a hub that will streamline collaboration across our organization.