Design Systems · Fintech · FNBO · 2022
One design system, 40+ brands, three platforms
FNBO's product teams were organized by customer segment, and design inconsistencies were everywhere. I was put in charge of building one design system for every web and mobile app, flexible enough to carry the bank's subsidiaries and 40+ partner brands.
Role
Senior Product Designer
Company
First National Bank of Omaha (FNBO)
Scope
Web, iOS, Android, Storybook
Team
UX director, lead web developer, lead mobile developers
40+
partner brands on one source of truth
3
platforms: web, iOS, Android
300+
components shipped
The same component set renders in each brand skin as a single Figma ‘Brand’ property.
A Global library feeds Web, iOS, and Android libraries, mirrored by a React library in Storybook.
The Problem
Teams were organized by user segment, so design inconsistencies were rampant across the organization. On top of that, the unique brand identities of the bank's many subsidiaries and partner brands had to survive in every component. The goal: standardize components, streamline design, encourage collaboration, and make the whole thing scalable.
What I Learned
Frameworks as a guide
Bootstrap for web, Apple's Human Interface Guidelines for iOS, and Google's Material Design for Android set the baseline.
Teams split by segment
That structure is how inconsistencies spread, and why a single source of truth was the answer.
Brands to protect
Subsidiaries and 40+ partner brands each needed their own identity across every component.
What I Did, And Why
Built every component from scratch
I used web and mobile UI kits as a guide but built each component myself to reduce overall component complexity instead of inheriting everything a kit comes with.
One source of truth, split by platform
A Global library plus centralized Figma files for Web, iOS, and Android, with modular componentsConsistency across platforms and much easier updates.
A parallel code library developers share
I worked directly with developers to build a React component library in Storybook that mirrors the Figma system, so the standards were shared by every developer, regardless of which segment team they sat on.
Carry 40+ brands without forking
Centralized brand assets for white-label subsidiaries and 40+ partner brands.
Make adoption part of the design
I put on workshops, created documentation, and completed feedback loops with developers, stakeholders, and other designers. I made the right thing to do, the easy thing to do.
The Result
The system helped FNBO overcome inconsistencies between platforms, improve collaboration, and build a scalable framework for digital product development, supporting faster time-to-market and higher customer satisfaction.