march 2020 – July 2020

Living Design

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.

design systems
interaction design
sketch libraries

The Team

I worked with (and learned from) a lot of people on design systems. Here's a snapshot of some of those people and roles that I interacted with:

  • Rick: Head of Design Systems, Walmart U.S
  • Mike: Supply Chain Design Ambassador
  • Brian: Store Systems Platform Engineer
  • Adam: Global Platform Engineer

My Role

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.

Philosophy

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.

Develop UI Patterns

Enabling, but not in the way. UI Patterns should enable teams to move quickly with very little red tape. Learn More

Establish Process

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 Relationships

Build bridges & break silos. Communication between roles, areas, and people are critical to the success of a good design system. Learn More

SuperPower Tools

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.

Contextual Note

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.

Redefining a Visual 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.

Backroom Tool Redesign

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.

Before

After

Downstock Redesign

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.

Before

After

Process Fresh Truck

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.

Before

After

Price Changes Redesign

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.

Before

After

Conclusion

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:

Sketch UI Kit

The UI Kit really helped our Store Systems team understand what components we owned (and didn't own), what version we were on, and what changes were being made by who. It gave us an overall feeling of our visual tone and helped new designers understand how to get started quickly and successfully.

Zeplin Styleguide

Creating the Zeplin Styleguide in collaboration with engineering was a lot of fun. I wish we had gotten farther before my time was up there, but I had received feedback best summed up as "game changing".

Communication Bridges with Platform Teams

Helping the Global and Store Systems Platform teams understand what Design was looking for in a product and helping Design understand what Engineering was looking for and solving those problems really helped me use my degree in Information Technology in a way that appealed to me.

Sketch Library

I really like tools. I really like having the best tools for the job. I also really like identifying patterns and organizing them. Building Sketch Libraries is just the best of both of tools and organizing patterns and something that was very rewarding to build and watch designers use every day to build awesome products.