Henry Global Design System
Building a multi-brand design system from the ground up to connect global teams on a common design language foundation within Stanley Black & Decker's brand portfolio.
Role
UX/UI Design, Design System Management and Documentation, Accessibility Design
Brand
Stanley Black & Decker
Team Credits
Joseph Carter-Brown, Global UX Manager
Liz Hunt, Senior UX Designer
Matt G, UX Engineer
Michael Muccioli, UX & Accessibility Designer
Erin G, UX Designer
Thomas C, UX Strategist
Chris F, UX Researcher
Paulina D, UX Research Strategist
Problem.
Through 2019, Stanley Black & Decker (SBD) lacked any formalized design system. Brands existed on the web as separate identities with individual teams creating their own source of standards for UI elements, components, or modules–in both internal or outside agencies.
What we found:
- Conflicting guidelines and direction.
- Duplication of common components.
- Inconsistencies across market websites and microsites.
- Pressure for agile solutions without discovery and research.
- Siloed teams working with disjointed communication.
No design system = disconnected user experience
Challenges.
Piecemeal approaches to website technology and design have created fragmented workflows and inconsistent brand experiences across the global.
01. Global
With 53k employees seated throughout 60 countries involved in over 14 unique brands, we needed a system that can manage a diverse cultural and language range.
02. Accessible
With accessibility compliance laws varying from market to market, we wanted to focus our system around the Web Content Accessibility Standards (WCAG 2.1).
03. Flexible
With a portfolio of over 500k products across all our brands we had to ensure maximum flexibility of components while delivering patterned solutions in an agile framework.
Challenges.
Piecemeal approaches to website technology and design have created fragmented workflows and inconsistent brand experiences across the global.
01. Global
With 53k employees seated throughout 60 countries involved in over 14 unique brands, we needed a system that can manage a diverse cultural and language range.
02. Accessible
With accessibility compliance laws varying from market to market, we wanted to focus our system around the Web Content Accessibility Standards (WCAG 2.1).
03. Flexible
With a portfolio of over 500k products across all our brands we had to ensure maximum flexibility of components while delivering patterned solutions in an agile framework.
Foundations.
Critical to the success of the system was the alignment of all our teams on the foundational elements for each brand. Henry is structured to be scaled for each brand, meaning that our foundational system needed to account for every potential UI element. Our foundations supported our brand logos, grid systems, spacing scale, typography scales, color systems, and interactive language.
Fig 1. With Figma styles library, each brand was setup with color styles broken out by brand, interaction, neutral, and feedback palettes. Our typography scale was broken out by display, utility, body, and supporting styles.
We introduced a typescale that was based on display headings, utility headings, paragraph styles, and supporting styles. Our color scale allowed for a branded palette that was flexible with light and dark color variations while we maintained a global interactive, neutral, and feedback palette across all the brands for maximum contrast accessibility.
We maintained a consistent design langauge between brands by ensuring a light and dark mode variation for any button, input, or interaction. This allowed for more flexibility in element placement on pages with a wider range of background options while maintaining optimial contrast.
Component Library.
Each brand has a component library, a collection of reusable interface elements themed by their foundations file. Throughout the design system we reference different component types such as global, structural, content, data, and utility. It was critical to define the differences between component classes so that design decisions are efficient and accurate based on the context of the page.
Fig 2. Using Figma we were able to create variations on each component multiple breakpoints but also layout variations such as image left, content right or vice versa.
Each component received stepped interaction examples so that expected interactive states are clearly communicated. These are paired with detailed specifications around tab stops, keyboard control requirements, spacing, atom and molecular elements.
Every component is further refined for additional breakpoints as well as minimal and maximum content specifications. This allows for content authors to know the maximum or minimum amount of content any given component can contain.
Patterns.
Patterns are used to show reusable combinations of components that address common user objectives with sequences and flows. These were developed in consideration of our global market rollout approach. While not every possible pattern was developed, this documentation served as the basis for our customers most common needs.
Accessibility.
Any design system is only useful if it's accessible. While that perspective is typically user-focused, we felt it was two-fold. We wanted to make sure that we brought all of the internal teams along the journey through providing clear rationale, documentation, and education on the UX team's efforts in creating an accessible system.
Color Contrast
We focused on pressure testing all of our brands color systems, ensuring that we had sufficient contrast across buttons, input elements, headers, and themes overall.
Keyboard Control
We documented every component and interactive element through detailed specifications on how a keyboard alone would operate with the component.
Input Feedback
In following one of our design system values of transparent, we made it a goal to ensure that our interface feedback whether error states or warning states provided valuable information for our users. We devoid the system of confusing language making it clear what to expect from any given interaction state.
Content Accessibility
Working with our content writers and brand teams, we developed strategies for parsing all images and videos so that we can begin to provide alternative text, captions, and audio descriptions.
Governance and Documentation.
The UX team knew that documentation and governance around brand implementation into our design language was going to be the key to the success and sustainability of the system.
Working closely with our design, content author, and development partners–the UX team created and maintained documentation resources in a Confluence space, ensuring that we included our design principles, quick start guides, accessibility standards and best practices for designing and testing, as well as brand governance documents unique to each brand.
Fig 3. Our Henry Confluence space included a getting started guide for different roles. Our designer page included how to get started with Figma and our libraries.
Fig 4. Design principles were documented to act as the guiding force as we built new features or products using Henry.
Fig 5. Design systems were a new to SBD, so we included plenty of introductory documentation to bring all teams up to speed.
Fig 6. Extensive accessibility documentation allowed for detailed best practices and guidelines for any aspect of the system and our projects.
Fig 7. Brand governance documents were developed for each brand, which provided a high-level view of our Figma foundations document.
Fig 8. Within each brand governance document we outlined accessibility considerations specific to the brand as well as Do's and Don'ts for Content Authors.
What's next?
Come January of 2022, due to supply chain restrictions and volatility of the market related to the pandemic, our work came to a halt and the Global UX team was effectively laid off through a reduction in workforce. However, what was accomplished in the time the UX team had together was no small feat. We effectively built a white-label design system from the ground up, implemented 14 brands into their own related systems, educated and led teams across the organization on web accessibility and the value of a common design language.
Looking back at the successes and the losses, we learned some valuable lessons:
- Design systems are evergreen. They are living systems that require a dedicated team actively involed in their growth and maintenance. Facilitating adoption and cross-team buy-in is a challenge worth undertaking that ensures we all are presenting a common design language, that is familiar and consistent for any person interacting with it.
- Accessibility is MVP. Defining accessibility requirements and getting buy-in at all levels of the organization from the beginning will directly impact those difficult feature and enhancement conversations later down the line.
- Global needs requires global collaboration. Something our team was extremely cognizant of was that the Global UX team was all based in the U.S. With the help of our global partners our blind spots quickly came into view. Considerations around cultural and language needs continued to be an opportunity in our work.
While we had big plans for Henry and it's continued growth and expansion for even more potential brands–the library of tools, resources, goverance and documentation is thoroughly laid out so that adoption of this system can be picked up by any team moving forward.
