Western Union
Design System
Creating a global design system to streamline development, improve quality, efficiency, scalability & accessibility.
As Western Union grew our digital business I identified a huge opportunity to improve how we designed and built our products. We had provided Style Guides and Pattern Libraries but due to the large amount of new Engineering hires around the world, we found developers would regularly ask for specifications for a component that was already documented and live in production. Many components were being built as one-off elements which exponentially created debt as we expanded our global reach.
​
My goal was to establish a unified design system with stakeholder and leadership support to improve quality, consistency, scalability and time to market.
MY ROLE
Take the idea from a concept to a fully developed product by cultivating support from key leaders, establishing milestones and building a group of cross-functional stakeholders across the company.
DELIVERABLES
-
Pattern library
-
UI Kit
-
Holistic design system
The Scope
The scope of the Design System was the entire suite of Western Union's global digital products. This included the Responsive Web site, Mobile Apps, Kiosks, and Point of Sale systems used by retail agents.
Additionally the Design System needed to work seamlessly with partner integrations whether they were hosted solutions or being leveraged on the partner's own network. This required us to think more from a holistic component level as opposed to designing specifically for one channel.
RESPONSIVE WEB
MOBILE APP
KIOSKS
RETAIL SYSTEMS
Stakeholders
In order to ensure alignment and engagement across the organization I identified key stakeholders that would provide sign-off of any new component that was designed before we moved to development.
By identifying shared goals we ensured that stakeholders in the core groups had "skin in the game" for the success of the design system.
​
In addition to the core stakeholders, the senior leadership team also provided sign-off at specific milestones throughout the process
The Breakdown
Before starting on the design and creation of the components we performed a full audit to identify which components were currently in use.
​
By identifying core components versus component variations we significantly reduced the amount of code that was being used.
​
Each component was individually tested of usability, accessibility and scalability to ensure that once a it was built it would work on any device or screen size.
​
The ultimate goal was to provide a catalog of elements for both Engineers and UX Designers that were aligned and enabled the font-end to be completely independent of the back-end code.
The Deliverables
The first deliverable was a fully documented component library with working examples and code that could be simply copied and pasted. The core CSS was under strict lock and key so that any modifications would be done by the Design System team and pass the established acceptance criteria.
​
The second deliverable was a UI Kit for Designers which aligned to the component library. The UI Kit was built in Sketch with all components designed as symbols with variations and styles built-in. I leveraged Abstract to keep the global teams aligned and able to collaborate with Product and Engineering.
Although Design Systems follow a common methodology they often have their own unique approach to tackling it. We created our own Design System by taking the best in class features we found that would work for Western Union.
​