Agiya Kelly
Designing an AutoZone Kiosk Interface
My Role
Product Designer
September - October 2024
Time Duration
Tools
Figma, Illustrator, Photoshop
Overview
AutoZone is a leading American retailer and distributor of automotive replacement parts and accessories. Established in 1979, the company provides a wide range of products, including parts, tools, fluids, and other automotive essentials, to both DIY customers and professional mechanics.
Problem
After being a customer of AutoZone for the past few years, I’ve observed several problems during a customer’s journey.
-
Long wait times for simple questions or transactions
-
Confusion with part and vehicle compatibility
-
Difficulty in finding parts needed
Goals
Installing a kiosk would significantly improve the customer’s experience. The kiosk would be equipped with the following:
-
A search feature that is filtered by year/make/model
-
Product catalog with brief descriptions
-
Information on stock availability
-
Streamlined checkout process
Our Users
Before I start designing, I deep dive into existing behavioral data of users based on AutoZone customer interviews in order to understand them better.
I focused on identifying the needs customers look for in store and from products.
I defined 2 user archetypes, and mapped them to their respective behaviors, goals, pain points, and needs.
DIY Car Enthusiast: The Efficient Problem Solver
Dan is a 35-year-old DIY enthusiast and part-time mechanic from downtown Los Angeles. He enjoys working on his car and is knowledgeable about auto parts but occasionally needs help with complex issues or new products.
-
Values easy access to parts, prices, and compatibility info
-
Likes guides, videos, and repair tips for support
-
Dislikes long waits and trouble finding the right parts
-
Needs a kiosk with:
-
Fast, simple search
-
Clear product details
-
Option to order out-of-stock items for pickup
-
Busy Professional: The Efficient Shopper
Brenda is a 42-year-old real estate agent from downtown Los Angeles who is always on the move. She relies on AutoZone for essential car maintenance and last-minute purchases, such as windshield wipers or motor oil.
-
Fast purchases with minimal browsing or staff interaction
-
Hard-to-find products, long lines, and limited guidance
-
"Quick Picks" for essentials
-
Clear product visuals and descriptions
-
Contactless payment and real-time stock info
Process
.png)
Site Map
I mapped out the structure of the site to have a better understanding of the possible user flows.
Low Fidelity Wireframes / Sketches
Creating low fidelity wireframes helped me flesh out the structure of the website. At this stage, I focus on functionality and flow over visual details.
Mid Fidelity Wireframes
At this point, I realized a vertical kiosk would be better suited inside the store than a landscape orientation.
Explore the New Experience
The content is now focused on getting users from point A to point B.
Item cards help make informed purchase decisions
vehicle specific
vehicle compatibility verification
real-time stock availability
easily view available rewards
get everything you need in one trip
view grand total before purchasing
Style Tile
By creating style tiles early in the design process, I can align on the visual direction before diving into full designs