Driving consistency and maximizing efficiency
Industry
Client
Year
Scope
Getting buy-in
Before we could solve any problems I needed to understand the scope of the issue. I took screenshots of every single page in our product suite. After printing them out, the team identified areas of the interface that contained unintentional differences.
This exercise was very informative. At the time of our first audit, we had over 28 different button styles on the Kroger web properties alone. This was a problem for two primary reasons. Customers were forced to learn new interaction patterns as they shopped, and developers were wasting time writing code for solutions other teams had already built.
Design Tokens
Before we could build the first component we needed to establish the brand guidelines. Inspired by the Lightning Design System we adopted the concept of design tokens.
Color
When establishing a palette, color contrast accessibility was very important to me. I wanted to ensure all of our labels and interface elements would be legible on the backgrounds I choose. We decided to use changes in hue to signal interactivity. For this reason, we needed a flexible palette that included room for hover and pressed states. Dark mode and theming were also taken into consideration when choosing these values.
Grid
We choose an 8 px grid for all of the sizing and spacing. This enabled polished compositions and ensured all the pieces would fit nicely together. We used REM sizing to ensure that our layouts would adjust to changes in the user's accessibility settings.
Typography
We used a combination of size and weight to establish our type scale. By choosing line heights that were divisible by 8 it ensured that all page content remained locked to the grid.
Starting small
Once we had established the brand principles we began building components. I recommended a concept pioneered by Brad Frost called atomic design.The concept is simple: build the smallest building blocks first. He called these small pieces, atoms. Our team set the ambitious goal of tackling all of the atoms in a single quarter.
We knocked it out of the park. The team designed, built, and tested all of the atoms in 12 weeks.
KDS Site
To help designers and developers properly leverage the system we documented guidelines on our internal website. I established the information hierarchy for the site and wrote the content for all of the designer documentation pages. Every page followed a consistent formula presenting visual usage guidelines and interactive examples. Once the site went live we had achieved our goal of creating a single source of truth. The KDS website became a one-stop shop for all information related to the system.
18
Style pages
34
Style pages
Sketch Libraries
The second major design deliverable was a series of shared sketch libraries. I built responsive symbols for web and native designers to use in their mockups. My teammate designed and built the icon library. I kept the libraries up to date with each sketch release and communicated updates to the team through a weekly changelog.
I conducted one on one interviews with Ul designers to gather feedback on the libraries. They helped me improve the folder structure and naming conventions.
After a year of maintenance, I delegated the iOS and Android libraries to a new Ul designer that joined our team. We pushed each other to build the best symbols we could.
Catalog app
We even had interactive native examples. Designers and developers could download the catalog app to test out the functionality of our components on their devices. This was beneficial for previewing animations and interactive states.
Podcast
Listen to the Kroger Design System leaders discuss our experience building the system.
Results
Organization
When I was hired in 2018 there were a total of eight product designers on staff. Over the next calendar year, 30+ additional designers were brought onto the team. Having a Design System was essential to the success of our department. KDS was so successful the entire enterprise decided to adopt it. Customer, Store Associate, and Supply Chain applications now leverage KDS components to ensure efficient delivery of cohesive experiences.
Personal
I have learned an incredible amount about starting, building, and maintaining enterprise design systems. My efforts to champion the system and guide the team have strengthened my communication and leadership skills. During my annual performance review, I received two consecutive perfect scores for my contribution to the Kroger Design System. I was also promoted as a direct result of my efforts to establish and scale the Kroger Design System.
