DESIGN SYSTEMS
FINTECH
BOK Financial - Design System 3.0
A cross-platform design system modernization for BOK Financial's family of banking brands. Unifying three overlapping UI languages into one standard across Web, iOS, Android, and React Native.
THE CONTEXT
Overview
I owned the design and documentation of Design System 3.0, a cross-platform system that unified the visual language across Bank of Oklahoma, Bank of Texas, and Bank of Albuquerque. It moved the organization off two overlapping legacy systems (1.0 and 2.0) and onto one modern unified standard.
THE PROBLEM
Three UI languages, one confused client
BOKF's online banking, had grown fragmented. Clients met overlapping 1.0 and 2.0 patterns, sometimes within a single task. It also didn't look like BOKF: the brand was warm, the product cool and generic.
That wasn't just cosmetic. It meant more effort on basic tasks, less confidence, and downstream cost in support volume and slower delivery.
WHY THIS MATTERED
Design quality is a business outcome
32%
Higher revenue growth for top-quartile design performers (McKinsey Design Index)
65%
More likely to rate overall satisfaction 10/10 when the digital experience scores 10/10
For a bank, trust is the product. Digital Access is a client's most frequent touchpoint, often more frequent than a branch visit. With modernization already underway elsewhere in the platform, this was the moment to close the brand gap without a second wave of disruption later.
MY APPROACH
Building the system behind the screens
I owned 3.0 end to end, from token architecture to the guidelines that let product teams build independently.
Before touching a single component, I established shared naming conventions for color variables. Every brand's palette lived in one semantic structure, and every component inherited from those tokens instead of hardcoding brand values.
Tokens first, components second is what let two brands and four platforms converge on one system instead of three systems wearing the same components.
COMPONENTS ACROSS PLATFORMS
Four systems, one language
Designed and maintained cross-platform design systems of Web, iOS, Android, and React Native. Serving 300k+ users across BOK Financial's digital products.
System Architecture
Tokens
Figma
Android
iOS
Web
React Native
iOS
Android
Web
React Native
iOS Design System
207
Components
2
Theme variants
The iOS system was built on Apple's Human Interface Guidelines, then themed with BOKF's brand colors and extended with the component variants our banking flows needed. The result: native components that felt genuinely native to iPhone, not a web UI wrapped in an app shell. While still carrying BOKF's identity.
Key Contributions
Light and dark mode color variables
New 3.0 modernization
Design documentation
FOUNDATIONS
Where consistency starts
The raw materials every component is built from — switch between color tokens, spacing, radius, typography, and responsiveness to see how each layer stays consistent across every brand and platform.
COLOR TOKENS
Brand (Indigo)
Indigo/40
Emphasized containers
Indigo/50
Primary CTA & feedback
Indigo/60
High-emphasis labels
Indigo/80
Low-emphasis labels
Neutral (natural)
Natural/20
Primary labels, text
Natural/30
Inverse containers
Natural/40
Secondary labels
Natural/95
Default background
Semantic
Indigo/50
Default
states
Clover/50
Confirmed states
Orange Burnt/50
Caution
states
Crimson/50
Warning
states
Primitive
Semantic token
LIGHT
DARK
Natural/95
Backgrounds/Default
#f6f4f3
#3f3a35
Indigo/50
Containers/Primary/Default
#514bb5
#6460be
Natural/40
Label/Primary/Low
#92877b
#c5baae
Natural/85
Stroke/Primary/Default
#ebe7e3
#352b2b
SPACING
None
0px
3XS
4px
2XS
8px
XS
12px
Small
16px
Medium
20px
Large
24px
XL
32px
2XL
40px
3XL
48px
4XL
64px
5XL
80px
RADIUS
XS / 4px
Small / 8px
Medium / 12px
Large / 16px
XL / 24px
4px
COMPONENT LIBRARY
Built once, shipped everywhere
Every component below is built from the same token system covered above — not redrawn per platform, but assembled from shared color, spacing, and radius values so Web, iOS, Android, and React Native stay visually and behaviorally consistent by default. A few of the core components and showing their interaction patterns — click around, these aren't screenshots.
BUTTONS
Button
Primary
Secondary
Ghost
Disabled
DROPDOWNS
Asset type
Single
Multi
STATUS CHIPS
Bill pay pending
Default
Positive
Warning
Negative
Neutral
TOOL TIPS
Plain tool tips
Rich tool tips
TABS
Bank accounts
Investments
Personal finance
DESIGN PRINCIPLES
Three baselines every pattern had to pass
•Content-driven layouts
Layouts prioritize the client's task over decorative or structural elements, reducing cognitive load and supporting faster completion.
•Persistent navigation
Navigation stays available rather than disappearing behind an overlay, giving clients faster access to key actions.
•Clear visual hierarchy
Consistent grouping and color hierarchy guide attention and let clients scan and decide with more confidence.
THE REDESIGN
Applying the principles to real flows
Login comparison
click to expand
click to expand
Previous experience
3.0 modernization
Competing elements — marketing, secondary links, inconsistent hierarchy — created noise around the one thing that mattered: signing in. 3.0 simplifies the layout so sign-in stays the clear focal point, with stronger brand presence and marketing that no longer competes with the core task.
Accounts comparison
click to expand
click to expand
Previous experience
3.0 modernization
Managing multiple accounts meant navigating several pages, and consumer account cards even looked interactive when they weren't. A single, brand-forward dashboard now unifies every account into one scannable view.
Navigation comparison
click to expand
click to expand
Previous experience
3.0 modernization
Navigation was hidden until it overlaid the content, and its structure reflected internal team organization rather than client mental models. 3.0 keeps navigation always visible and consolidates related features under parent categories clients actually recognize.
Payments & transfers hub
click to expand
click to expand
Previous experience
3.0 modernization
Every money movement type was a separate link — investment transfers even lived outside the "Transfer & Bill Pay" section. One hub now houses every option, routes single-option clients directly, and is built to support new movement types as they're added.
Travel notifications
click to expand
click to expand
Previous experience
3.0 modernization
The previous flow split travel notifications across “Add” and “Manage” views and put a simple task behind a three-step wizard (details, review, confirm), with destinations added one at a time. 3.0 brings it into a single focused screen with a clear heading, grouped sections for dates, destinations, and cards, and one obvious Save action.
OUTCOMES
Closing the loop on the original problem
•Easier client experience
Strong task completion on key flows, with minimal confusion in usability testing.
•Reduced complexity
Fewer UI variations across Digital Access, and fewer pattern-related issues surfacing in testing.
•Easier adoption
Validating before rollout meant fewer post-launch issues and less reactive fixing.
•Greater long-term efficiency
Reused, standardized patterns reduced rework in both design and development.
•Stronger brand perception
Preference testing signaled the new UI felt more modern, polished, and consistent.
•Decreased operational cost
Fewer support tickets and reduced call-center volume tied to navigation confusion.
Next Case Study
Boost Mobile - Design System
Efficiency savings - 47%
