2019 CarMax Global Navigation
In 2019 the Design System team paired up with the product team responsible for CarMax.com’s global header. There were two main problems our teams wanted to solve together.
The Problem
The height of the header was pushing valuable content below the fold.
The design of the header did not align with the new Design System aesthetic.
CarMax Homepage during 2018.
The Process to MVP
Our first task was documenting the current state of the header so we had a baseline for analytics. We wanted to make sure we could smoothly accomplish “do no harm” testing. Data showed that we had a large opportunity with the header’s search bar and some opportunity to implement the relatively new design system.
Using the current analytics we made sure to give priority to links that we thought were most valuable to users and links that could increase SEO. We were asked by our finance partners to consider the “Make A Payment” button’s priority and opted for a snack bar to appear to show where the new button had moved too.
2019 MVP
The 2019 Global Header MVP
“My main role is establishing the MVP was working as a design consult for the product designer.”
Jenny Schmit led discovery and workshops around the redesign while I was in charge of making sure the design system was being consumed and providing insight for front-end best practices.
Wins: Through discovery and competitive analysis we also decided to increase the presence of a search bar within the global header. Our #1 job to be done was increase traffic to our search page and we wanted to make sure we catered to that. This design change increased user interaction from 1.2% to 20%.
Losses: Unfortunately by giving this much prominence to the search bar and enforcing proper padding principles we increased the height of the global header by 4 pixels.
Post MVP Exploration
After letting the new design run for several months we have begun to iterate on a 2.0. We want to keep the prominence of the search bar but tackle the height problem. Through discovery and testing we had to go back to using labels for the store name and this design accounts for that and uses labels for when user’s sign into their account for a more personal experience.
To see a menu hover prototype of the header, please visit this link.