Full Product User Interface Inventory. Example: Buttons
Josh Gnizak
Managing Experiences
Payments Design Systems
Unify and Grow: A system for managing design systems
My Role: Lead Designer
The Team: 3 Content designers, 4 UX designers, 1 Accessibility expert, 2 UI developers
Duration: 8 Months + Continual evolution
The Problem
In 2018 we asked: What is our design system?
The Electronic Payments Division used 6 core design systems and had to adapt to hundreds of client design systems. Maintaining and designing for countless scenarios was extremely costly and a poor experience. Without defined systems, designers and developers were constantly creating disjointed solutions and the products were not moving forward together.
Understanding the existing systems
We took a thorough inventory of our existing UI elements across the main products. We were able to understand the similarities and differences to inform our process. Each product lead was responsible for defining the current base system in place and document over 100 component types.
Strategy
To maintain existing systems while evolving into a unified system, a series of rules and governance was needed. Interviews with designers, product managers, and various stake holders helped identify the main impact points of design intake.
Two main points in the design process were identified where designers engaged design systems.
1. Pre-PMT (early on the agile chain [Pre-Portfolio Management Team phase])
2. In Flight (during the agile delivery phase)
Result: Decision tree
A clear flow chart evolved to regulate and monitor how designers introduce or choose elements for projects. Each designer had a clear path to find appropriate existing patterns or components, and a method to introduce new elements as needed. The process allowed all elements to be documented in the greater repository.
The decision tree flow example: Which UI element is appropriate for a regular design sprint level design.
Result: Living repository and active governance
UXDS Repository
The User Experience Design System Repository is a living library with actual code, design rules, all components. The core system is based on an internal system that evolved within the Electronic Payments (ePay) division. Necessary exceptions are documented. The repository lives within the division design site, which includes the UX playbook, demos/prototypes, and links to all internal design resources.
What we learned?
Managing existing design is costly.
Changes to existing design in highly regulated environments is extremely slow.
Buy-in from every stakeholder is critical to change management
Functional design is critical and should not be sacrificed for beauty or trend.
Change can happen instantly or over years.