Client: Zoro Tools

Role: Design Systems Lead

Background: Zoro is an e-commerce company that sells 13 million + business supplies, equipment, and tools. They also have a rich connected history to Grainger. With several failed attempts at building a design system from a federated model, leadership decided to try something new. It was time to build a dedicated team in 2022 to uncover inconsistencies, develop a unique system for the company’s needs, and scale patterns and components to enable teams to move faster at solving customer problems.

The team was faced with a couple of initial challenges. The first was that there was no official team for several months after I came on board. Just me as a lead and a senior designer. The second was buy-in from key stakeholders who would help place partners into the team. But did this stop those who were on board already? Not at all.

Because of the investment already prior to Dispatch there was a skewed perception of the current state. Vuetify being a design system. Which needed some course correction.

It was time to research and put some UX and systems thinking into practice. I started initially taking an assessment of the current state processes, toolsets, and codebases. In addition, ran studies on usefulness. I interviewed both designers and engineers about the past and the present. Gleaning from history can sometimes help shape but, not necessarily define the future.

But what did I uncover? Glad you asked. Essentially an idea of a system built on a UI framework called Vuetify and a half completed Figma toolkit. And maybe I found a few other things.

Because the team still hadn’t formed fully yet we needed to start somewhere. So we started to prioritize components that we could refine for the Figma toolkit. The plan at the moment was to match up more with Vuetify until we could start shifting focus to components that were more bespoke. 

In addition, we spent time developing initial thought and guidance around teams being able to contribute, accessibility, and governance. Accessibility was a top priority for various stakeholders given past conflicts with Zoro’s e-commerce platform. And of course its a top of mind for us on the design system team. 

Soon we were able to create a small but scrappy team of systems-thinking practitioners to bring a real system to life. We started with developing a plan to decouple over time from Vuetify. The start of it all was that we knew that we had to add design tokenization as a foundation first.

What are design tokens? Design tokens are named entities that store visual design attributes. They are used in place of hard-coded values (such as hex values for color or pixel values for spacing) to maintain a scalable and consistent visual system for UI development. They are agnostic to any tool, digital product, or application.

Tokenization requires the naming to be semantic. For example, instead of red or hex #fff or 32px spacing, you will now have color-text-critical or color-background-brand or spacing-7. Now you have given meaning to a value and created a common language that can be shared amongst everyone.

We also had to decide on how we wanted to manage the tokens and process them into variables that engineering could use. We explored different management systems and even thought about managing manually. In the end, the decision was to use Token Studio in Figma to create and manage the design tokens. Hosting and version management needed to happen within Github. We would then export the tokens out as JSON to then pass off to engineering. Engineering would then run them through Style Dictionary and some transformers to output CSS, variables, and JS to build out the foundations and components.

We needed to start with the Foundations, the very framework and base of all components. I and the other designer working with me started forming a systems-oriented understanding around color, typography, iconography, spacing, and grid and how these would differentiate Zoro from their competitors. Some great examples of this were developing an accessible color palette and a typography scale that was in harmony.

Gestalt principles sit at the very foundation of everything visually. They describe how everyone visually perceives objects. One principle states

If colors have similar Chroma, Saturation, and Value they will appear to be related to each other and will create harmony for the customer.

An important part of building components to scale was maintaining parity between design and engineering. As a team, we spent time with every component matching properties so that there would be easier handoff between design and engineers. Additionally, implementation times are greatly reduced compared to teams creating customized solutions.

We designed and developed 5 foundations, 10 components, and a real good start to a documentation site. All of this and future design systems patterns and components will equip 30+ front-end engineers, 9 UX designers, and a handful of product owners. The system has a projected cost savings of $2,240,000+ over time.

Retrospectively would the team have made changes along the way, sure. We could have spent less time on a documentation site. We could have piloted with a product team something different than the Form component and the components that make that up. But are we proud and excited about the work we have done so far? Have we received positive feedback from early adopters? Yes, and we wouldn’t trade the experiences, collaboration, and learnings for anything.

User-centric design

WCAG AA compliant

Parity with engineering

Systems thinking

Figma

Token Studio

Storybook

Vue