I worked on Walmart's design systems for the last 2.5 years, most of the time as a side project not part of my assigned duties. The last 8 months of my time there I had the opportunity to work on a team of designers from other business areas to build a design system – Living Design – that would create a consistent visual language across Walmart's products, for both customer and associate.
I was part of an associate ambassador group – designers from different business units – that was created to help define UI Patterns, establish design system governance, and develop a way for Living Design to evolve while also allowing product teams to design quickly.
A Design System is much more than a set of UI Components. A good design system uses an organization's brand (mission, style, tone & voice) and design language (design principles, creative style, UI patterns) to build a visual language which communicates their message and engages their customer.
Enabling, but not in the way. UI Patterns should enable teams to move quickly with very little red tape. Learn More
Clear & Efficient. It should be clear who owns a pattern, why the pattern exists, when it's appropriate to change it, and how to request or make changes. Learn More
Build bridges & break silos. Communication between roles, areas, and people are critical to the success of a good design system. Learn More
Iron Man suits for everybody. Awesome design and developer tools give customers and employees superpowers. Learn More
In this case study I give a glimpse into our approach at Walmart to build a design system by developing UI Patterns, establishing processes, and building relationships.
The business area I worked in, Store Systems, is responsible for building over 30 applications that help Walmart store associates complete various tasks to keep stores running every day. With a design group of 15 designers to design apps across 7 development teams, it was difficult to keep styles and UI patterns in alignment. This problem was hardly unique to our area (though our area did have many more apps, product owners, and engineering groups than other areas of the business). Customer-facing products had been using a version of Living Design for a couple years, but in mid-2019 our design VP gave associate-facing products the green light to start using the same design language.
Prior to Living Design, Store Systems applications used Material Design because it was an open source design language that was familiar to both designers and our associates. It had also answered a lot of questions regarding accessibility concerns, typography, and interactions. The decision to evolve Living Design to include associate-facing applications was not an easy one because although it was quite robust, it lacked many components that were considered critical to store operations and even had components that were similar but would need significant adjustment in order to function properly.
In an effort to discover these limitations, I selected certain screens out of each of our applications and reimagined them in Living Design to help us see these limitations more clearly so we could fix them with more certainty. I've included here some before-and-afters of certain applications to show how the design language evolved and applied.
The Backroom Tool is a subset of associate applications dedicated to Backroom tasks. This concept never made a lot of progress, but represented our ideas to surface contextually relevant information (in this case via a map of the backroom) and make it easier to get to tools by flattening the architecture a little bit.
Redesigning the Downstock tool was particularly difficult because Living Design is much more prescriptive about what cards should – and should not – be used for. Part of this process also involved designing a stepper that clearly defined the steps of the process, while not getting lost in the visual hierarchy.
The hardest part of nearly every associate application is answering "how much information does an associate need on a card to do this job properly?". Too much information (with adequate spacing) makes the card take up almost the full screen, while not enough doesn't let them do their job.
Designing item cards was a crucial skill on our team. This iteration of the item card tried to increase the readability of certain elements, shrink the stepper size while maintaining usability, and increase the number of cards viewable on the screen.
Associates use Price Changes every day to activate price changes and change shelf labels. The big update here was really in the card spacing. The previous one was pretty hard to read.
Design Systems became my passion at Walmart because it really appeals to my sense of building connections between people, technology, and design. It also lets me continue to be a generalist and increase my skills in both engineering and design, while focusing on the people that my work affects.
I worked with a lot of really smart people on this project who, if they didn't envision and create part of this themselves, they certainly inspired the idea in me and helped me to achieve a piece of our design system goals.
That being said, here's a few things that I'm really proud of because of my direct work as part of this project: