Work/ Case Study
Dispatch Design System
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 Challenge
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.
Lets uncover what is really under the hood
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.
Conducted a usefulness study. Click to view all the results.
Let’s drive to a destination
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.
Bespoke with purpose
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.
Building towards a Beta and launch?
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.
Colors need meaning
Gestalt principles sit at the very foundation of everything visually. They describe how everyone visually perceives objects.
One principle states
“Elements that share similar characteristics are perceived as more related than elements that don’t share those characteristics.”
If colors have similar Chroma, Saturation, and Value they will appear to be related to each other and will create harmony for the customer.
How about those components?
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.
As we launched each component we also made sure to have robust documentation so that each adopter of a component would have guidance in areas of design, implementation, usage, and accessibility.
This is just the beginning
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.
Key Aspects:
- User-centric design
- WCAG AA compliant
- Parity with engineering
- Systems thinking
Technologies Used:
- Figma
- Token Studio
- Storybook
- Vue
Are you ready to move the world together?
If you are looking to expand your team or even need support on a single project lets schedule time to chat.
To comply with my non-disclosure agreement, I have omitted and made unclear confidential information in this case study. All information is my own and does not necessarily reflect the views of Zoro Tools or other affiliates.