At Western Union we wanted to maximize customer outreach for our products and services. The ultimate goal was to increase customer engagement with our business. However, Western Union lacked a design system.
The main goal of the Western Union design system project was to help equip our departments with the tools that free them to focus on more collaborations and research.
I was the lead designer on this project. I helped manage a cross-functional team, starting from consolidation, writing user stories, prototyping, testing, and technical specs for layouts and components.
Western Union manage multiple projects and global platforms. For example, we have 850 landing pages alone, along with various platforms such as kiosk machines, mobile apps, transactional websites, retail systems, fraud detection, and compliance systems.
I did an audit of all systems and interviewed designers, product owners, and developers to help understand their current process and the problems they were facing.
Inconsistency
Inconsistencies within single systems and between other systems lead to a longer learning curve for users.
Version control
Designers cannot locate master files or identify which component/pattern to use for a specific screen.
Code waste
Developers are missing specs or have no specs for a specific component, and they build things from scratch more often than necessary.
Accessibility
All of our systems are fully accessible, including structural elements, color contrast, ARIA labels, and missing alt text.
I created a workshop for the designers to help identify all components by printing all of our major flows. We started identifying all components and how many times we use them so we could sort them from global to specific components.
Next, we mapped out the list of components and organized them from global to specific based on systems usage.
At the core of each component are a few key principles we follow. Before building a component, we ensure that they are tested, scalable, consistent, and global.
Scalable, consistent components are all based on one baseline grid and variable based color range, which is then tested.
Testing components for global use for multiple languages.
Components are tested in a flow to see if they are usable before releasing it.
When we build a new component, we evaluate competitors to understand how they have tackled similar challenges. When we test competitors, we look for what they are doing right as well as what we can improve upon.
I started every component design by creating a workshop to brainstorm the following topics:
This is an example of a card list component. These are some of the variations that can be built using a single component by simply adding elements and modifiers instead of creating a new component for each variation:
Now that we have most of the criteria in place, we start prototyping and testing our component within a flow with our users to insure our component is usable.
All of our components live in Abstract under a UI kit project that is linked to all projects in Western Union for easy access by all designers.
While we are creating our symbols, front-end developers are building the same components following the same naming structure (BEM) and using design tokens/utility classes we built.
Rollout plan
Research rollout plans and compare between three strategies (component by component, page by page, or crossover)
Utility classes/Design tokens
How we decided on font sizes, baseline grids, layout grids, scaling units, breakpoints, colors, and themes
Getting a buy-in from stakeholders
The process and business case behind getting this project funded and approved
Cross-functional alignment
How we aligned all stakeholders from brand, product, and engineers on one goal.