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.
3 Content designers, 4 UX designers, 1 Accessibility expert, 2 UI developers
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.
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)
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 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.
- 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.
