Design Review: Autozone

September 14, 2020
Design
LinkedInTwitterFacebookEmail
This post is part of a post series called Design Series
  1. Design Review: Autozone
  2. Design Review: Low Carb USA

Autozone is a chain in America that provides car parts. There’s a lot of information on the homepage including awards, shipping, products, categories, and a huge number of footer links. So let’s dive into Autozone’s current design to see how they laid all this information out.

screenshot of autozone website

Header

The header is kept very simple. Autozone chose a riskier option of putting the main menu into a “hamburger menu” on the left side. Their menu is extensive, so listing the links across the top like most websites do would have ended up with a cluttered look at the top. Instead, they utilized the space saved by adding a section for the closest store, the shopping cart, a place to set your vehicle, and a search bar.

Despite the riskiness of the menu, I think overall this was a good option. They kept the most important and ostensibly most used items visible.

The next section gets a little trickier.

Hero Section

The next area is the hero or slideshow area, with a small alert notice above it. If there was one thing I’d change, it’s the rotating images.

A slideshow is still an incredibly common thing to have in the header, but statistics show it’s almost entirely useless for users. In a study by Notre Dame University, only 1% of people clicked on the slideshow, and 84% of the clicks were on the first image. [Notre Dame Study] Simply put, slideshows are pretty, but don’t provide a good conversion rate.

Since Autozone already has 4 Call to Actions in this hero/slideshow section, removing the slideshow is a good option.

Main Section

As you scroll down the page, there’s a lot of information available. So much, that’s it’s a bit overwhelming. The featured products section is laid out well, but the three items above either need more spacing or should get put somewhere else.

Those three items would go better with the blog posts (the row “Get that new car shine”). The whole section, blog posts and the three icon sections should go toward the bottom.

But taking a break from the organization of the homepage, there are several different designs that are being used. We have the rectangular with a slight shadow box, the border but no shadow (categories), the flat large image no shadow, and the icon with no border or shadow. While they break up the design, I can’t help but feel like it’s a little too much. If the icon section was at the bottom or connected better with the other sections, the design would look a little tighter.

Footer

A footer this large isn’t uncommon on websites as big as Autozone. It’s well laid out, with highlighted titles, and the location of the app links (bottom right) seem appropriate.

Design Conclusion

As an ecommerce site, Autozone had a lot of information to get in front of the user. A bit more spacing, some minor design edits, and the information would seem less intimidating.

 

Join the Discussion

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>