AutoZone
Modernizing the brand and warehouse management system for a cornerstone of the American auto industry
My Role
Experience designer
Skills
Branding
Cross-team Collaboration
Data Visualization
Design Systems
E-Commerce Design
Hi-fi Design & Prototyping
Internal Tooling
Style Guides
Team
Armand Ghersin
Carl Morner
Elizabeth Wheeler
Felicia Evangeline
Kathy Li
Sophie Brittain
Tanya Yan
Timeline
6 Months
AutoZone
Modernizing the brand and warehouse management system for a cornerstone of the American auto industry
My Role
Experience designer
Skills
Branding
Cross-team Collaboration
Data Visualization
Design Systems
E-Commerce Design
Hi-fi Design & Prototyping
Internal Tooling
Style Guides
Team
Armand Ghersin
Carl Morner
Elizabeth Wheeler
Felicia Evangeline
Kathy Li
Sophie Brittain
Tanya Yan
Timeline
6 Months
AutoZone
Modernizing the brand and warehouse management system for a cornerstone of the American auto industry
My Role
Experience designer
Skills
Branding
Cross-team Collaboration
Data Visualization
Design Systems
E-Commerce Design
Hi-fi Design & Prototyping
Internal Tooling
Style Guides
Team
Armand Ghersin
Carl Morner
Elizabeth Wheeler
Felicia Evangeline
Kathy Li
Sophie Brittain
Tanya Yan
Timeline
6 Months
Problem
Autozone’s growing domestic and international presence presented new strains on its supply chain capacity. There were increased fulfillment bottlenecks and inefficiencies across labor and space utilization—enhanced by legacy applications and confusing user experiences.
With over 6,000 stores, 80,000 employees, and 12 distribution centers across the US and Mexico, AutoZone is managing a complex system of internal and external applications.
1
Disparate application interfaces: Data and functions residing across different UIs were causing performance blindspots and inventory reception slowdowns
Disparate application interfaces: Data and functions residing across different UIs were causing performance blindspots and inventory reception slowdowns
2
Fulfillment bottlenecks: Complex order releasing and monitoring workflows were causing load dock backlogs and delayed dispatch times
Fulfillment bottlenecks: Complex order releasing and monitoring workflows were causing load dock backlogs and delayed dispatch times
3
Capital and Labor Inefficiencies: Constraints in route and labor management capabilities were leading to time-consuming travel paths for inventory receivers.
Capital and Labor Inefficiencies: Constraints in route and labor management capabilities were leading to time-consuming travel paths for inventory receivers.
Solution
We brought together many of AutoZone's disparate workflows into a cohesive Warehouse Management System in order to improve efficiency, accessibility, and centralization in their supply chain operations.
In a previous engagement with AutoZone, we conducted a comprehensive audit of their e-commerce site, overhauling their old look and feel with a new visual language. In this new phase, we leveraged these modernized brand elements to bring the same visual threads from their customer-facing site to their internal tools.
To understand warehouse management, extensive research was collected through visits to AutoZone distribution centers, countless requirements meetings, and breakdowns of process flows. Ultimately, we consolidated these processes into one modernized system to shorten workflows, increase warehouse data accessibility, and help centralize operations across their supply chain.
Solution
We brought together many of AutoZone's disparate workflows into a cohesive Warehouse Management System in order to improve efficiency, accessibility, and centralization in their supply chain operations.
In a previous engagement with AutoZone, we conducted a comprehensive audit of their e-commerce site, overhauling their old look and feel with a new visual language. In this new phase, we leveraged these modernized brand elements to bring the same visual threads from their customer-facing site to their internal tools.
To understand warehouse management, extensive research was collected through visits to AutoZone distribution centers, countless requirements meetings, and breakdowns of process flows. Ultimately, we consolidated these processes into one modernized system to shorten workflows, increase warehouse data accessibility, and help centralize operations across their supply chain.
Solution
We brought together many of AutoZone's disparate workflows into a cohesive Warehouse Management System in order to improve efficiency, accessibility, and centralization in their supply chain operations.
In a previous engagement with AutoZone, we conducted a comprehensive audit of their e-commerce site, overhauling their old look and feel with a new visual language. In this new phase, we leveraged these modernized brand elements to bring the same visual threads from their customer-facing site to their internal tools.
To understand warehouse management, extensive research was collected through visits to AutoZone distribution centers, countless requirements meetings, and breakdowns of process flows. Ultimately, we consolidated these processes into one modernized system to shorten workflows, increase warehouse data accessibility, and help centralize operations across their supply chain.
Impact
1
We unified disparate applications to create a consolidated warehouse, yard, transportation, and labor management application, delivering over 1,000 screens in total.
We unified disparate applications to create a consolidated warehouse, yard, transportation, and labor management application, delivering over 1,000 screens in total.
2
We enabled faster, more predictable dispatching by eliminating workflow complexity that had been causing delays.
We enabled faster, more predictable dispatching by eliminating workflow complexity that had been causing delays.
3
We built AutoZone's new visual language and design system, bringing consistency into their suite of tools.
We built AutoZone's new visual language and design system, bringing consistency into their suite of tools.
4
We cut down manual workflows and introduced automations to reduce labor moves, warehouse search time, and storage underutilization.
We cut down manual workflows and introduced automations to reduce labor moves, warehouse search time, and storage underutilization.
Highlight
We took AutoZone's iconic look and feel and modernized it for the web.
It began with a design system audit to overhaul their e-commerce site. We uncovered hundreds of inconsistencies and redundancies in their visual language. In the end, we built out a full design system and style guide, which became the foundation for our work across their other applications.
It began with a design system audit to overhaul their e-commerce site. We uncovered hundreds of inconsistencies and redundancies in their visual language. In the end, we built out a full design system and style guide, which became the foundation for our work across their other applications.
Highlight
Their data was rich, but inaccessible. So we made it easy to draw value from a data-dense system.
One key function of warehouse management is monitoring inventory levels. The Inventory Control department conducts what are called "Cycle Counts", where teams manually count products throughout the distribution center to track inventory. Inventory Control Managers oversee the process by creating various types of Cycle Counts, assigning counters, and monitoring discrepancies. We helped digitize these tasks, leveraging cycle count data to provide greater visibility and foresight into warehouse inventory.
Highlight
Their data was rich, but inaccessible. So we made it easy to draw value from a data-dense system.
One key function of warehouse management is monitoring inventory levels. The Inventory Control department conducts what are called "Cycle Counts", where teams manually count products throughout the distribution center to track inventory. Inventory Control Managers oversee the process by creating various types of Cycle Counts, assigning counters, and monitoring discrepancies. We helped digitize these tasks, leveraging cycle count data to provide greater visibility and foresight into warehouse inventory.
Highlight
Their data was rich, but inaccessible. So we made it easy to draw value from a data-dense system.
One key function of warehouse management is monitoring inventory levels. The Inventory Control department conducts what are called "Cycle Counts", where teams manually count products throughout the distribution center to track inventory. Inventory Control Managers oversee the process by creating various types of Cycle Counts, assigning counters, and monitoring discrepancies. We helped digitize these tasks, leveraging cycle count data to provide greater visibility and foresight into warehouse inventory.
Highlight
We adapted the design system to work for hyper-complex and hyper-nuanced scenarios.
Dropdowns were a prime example of this challenge. How did we maintain a consistent visual language while allowing for flexibility? We designed and documented the dropdown component to be its own set of building blocks—able to accommodate all types of selections, variable sizing, and optional elements.
Highlight
We adapted the design system to work for hyper-complex and hyper-nuanced scenarios.
Dropdowns were a prime example of this challenge. How did we maintain a consistent visual language while allowing for flexibility? We designed and documented the dropdown component to be its own set of building blocks—able to accommodate all types of selections, variable sizing, and optional elements.
Highlight
We adapted the design system to work for hyper-complex and hyper-nuanced scenarios.
Dropdowns were a prime example of this challenge. How did we maintain a consistent visual language while allowing for flexibility? We designed and documented the dropdown component to be its own set of building blocks—able to accommodate all types of selections, variable sizing, and optional elements.
Highlight
Tables alone were able to accommodate 11 types of content, multiple languages, and highly variable columns.
Tables were a crucial design element to AutoZone's Warehouse Management System. How did we design for tables with only a few columns to tables with tens of columns? We put together a set of guidelines outlining the behavior of a table cell depending on the type of content. Highly variable content, like a vendor name, would have different constraints than one with fixed content, like a date. Our final logic balanced incremental sizing, min widths, and fluidity, to ensure flexibility.
Tables were a crucial design element to AutoZone's Warehouse Management System. How did we design for tables with only a few columns to tables with tens of columns? We put together a set of guidelines outlining the behavior of a table cell depending on the type of content. Highly variable content, like a vendor name, would have different constraints than one with fixed content, like a date. Our final logic balanced incremental sizing, min widths, and fluidity, to ensure flexibility.
Learnings
Sometimes a user’s mental model is a learned habit from a flawed system. It’s important to strike a balance so that existing users are not misled and new users are able to learn.
On information-rich pages, leverage metadata, hovers, and drill-down states to help design a clearer UI. They help to display secondary information that is less critical for daily decision-making.
Document convoluted logic as soon as possible. Using annotations alongside designs in Figma can be a good approach to doing so, since there is a visual reference to what is being discussed. They’ll remind you why you made a certain design decision, support devs when they are reviewing designs, and provide context for future designers.
Learnings
Sometimes a user’s mental model is a learned habit from a flawed system. It’s important to strike a balance so that existing users are not misled and new users are able to learn.
On information-rich pages, leverage metadata, hovers, and drill-down states to help design a clearer UI. They help to display secondary information that is less critical for daily decision-making.
Document convoluted logic as soon as possible. Using annotations alongside designs in Figma can be a good approach to doing so, since there is a visual reference to what is being discussed. They’ll remind you why you made a certain design decision, support devs when they are reviewing designs, and provide context for future designers.
Learnings
Sometimes a user’s mental model is a learned habit from a flawed system. It’s important to strike a balance so that existing users are not misled and new users are able to learn.
On information-rich pages, leverage metadata, hovers, and drill-down states to help design a clearer UI. They help to display secondary information that is less critical for daily decision-making.