Digital Banking Design System
Figma Design System & Style Guide
As a senior product designer at First National Bank of Omaha (FNBO), a large regional bank, I placed in charge of creating a comprehensive design system for all web and mobile apps.
My goal was to standardize components, streamline design, encourage collaboration, and facilitate scalability.
Design System, Design Ops
First National Bank of Omaha (FNBO)
2022
Process
To set initial design standards, I leveraged several existing frameworks, such as Bootstrap for web apps as well as Apple’s Human Interface Guidelines and Google’s Material Design for iOS and Android mobile apps, respectively. I used web and mobile UI kits as a guide, but ultimately built each component from scratch in order to reduce overall component complexity. I also needed to maintain the unique brand identities of the bank’s many subsidiaries across all components.
The bank had organized its product teams by user segment so design inconsistencies were rampant throughout the organization. A standard design system was the best way to align our standards under a “single source of truth”. Working directly with developers to create a parallel React component library in Storybook would ensure that these standards were shared by all developers regardless of their segment.
Solutions
-
Design System Definition
Established design principles, style guide, accessibility standards, icon library, and interactive elements
-
Centralized Brand Assets
Provided a single source of truth for all brand assets across multiple white-label subsidiaries
-
Component Libraries
Created centralized Figma files for each platform (Web, iOS, and Android) with modular design components that increased consistency and allowed for easier updates
-
Iterative Design Process
Collaborated with developers, product designers, and stakeholders to gather feedback for continuous improvement, while conducting workshops and providing documentation to support the development process
Outcome
The Figma design system enabled FNBO to overcome design inconsistencies between platforms, improve collaboration, and create a scalable framework for digital product development, resulting in faster time-to-market and higher customer satisfaction.