December 30, 2006
CarMax.com’s website has problems. The site is certainly not worthy of the company’s business stature. Luckily, this provides an opportunity for us to examine some Web design fundamentals.
Shortly arter this article was published, Carmax modified their main page search mechanism to something close to what I came up with here, better serving their site visitors. So this article must be viewed in the context of the previous version depicted in the screenshots below.
The ability to shop online for something as big and potentially complex as an automobile is truly wonderful. Car shopping usually involves some degree of hassle, so adding convenience to this process is always a good thing. Of course the website must itself be convenient and easy to use, else one hassle replaces another.
One of the big players in the online auto shopping game is CarMax.com. They claim to be the largest used car retailer in the country (USA) and their brand’s tagline is “The way car buying should be.” I suggest, however, that shopping for a car on their current website is decidedly not the way car buying should be. And this is important because if a company’s public facing website provides an experience that contradicts that company’s vision statement, it tears down the brand rather than supporting it. In this competitive market such things should not be allowed to happen.
Let’s first examine the problems with the current design in some detail and then have a look at some remedies and changes that could make for a much more compelling and effective design and visitor experience.
The CarMax Website
This is the current CarMax website. Doesn't look much like it belongs to a powerhouse automobile retailer, does it? You may immediately notice that the page is quite text-heavy. It also suffers from a weak grid, both vertically and horizontally. This makes the page seem too complex, chaotic and disjointed. Perhaps the most important issue is that there is no clear “most important” area of the page. This lack of information hierarchy results in (among other things) there being no comfortable place on the page for the viewer’s eyes to come to rest.
Here are a few of the most glaring design issues:
The result of the combination of these design faults is that the overall impression is weak, chaotic, and most importantly it’s hard to discover or decide where/how to get shopping without going back up to the main navigation links. The impotent search mechanism on this page is not nearly conspicuous enough. People do come here, after all, primarily to search for vehicles.
In order to actually shop/search one must go at least two clicks into the site. Not one click from the main page, but two!
Since this is a site where one searches for specific categories or brands of vehicles, it is unfortunate that this task cannot be accomplished on the main page. In order to actually shop/search one must go at least two clicks into the site. Not one click from the main page, but two! This mechanism is absurd and should be fixed even if nothing else is done to this site’s design.
The poor use of imagery here is consequential. There are too many images on this page. In fact this is true of just about every page in the site, where a meaningless peppering of schlock images is used in place of effective architecture. The many images rob focus from the page(s).
The animated graphics here are little more than distracting. Animation should almost never be applied to small images. Rather, this effect works best on large images that are placed above or below (not beside) important elements on the page. The least distracting and perhaps most tasteful use of this effect would be a periodic smooth transition fade from one image to the next, rather than actual animations, as used here.
The headings on this page are the same blue color as all of the links. While most of the links are underlined, this is still needlessly confusing and further detracts from the visual information hierarchy. The headings need to have a contrasting color that is not similar to some functional element of the page.
Finally, nearly everything on the page is visually more important than the vehicle search mechanism. This means that a lot of distractions get in the way of my doing what I came here to do. CarMax would do well to remember the shopper’s mantra: get outta my way and let me shop.
Our focus here should be directed toward the design, structural, and information architecture elements. These mechanisms were employed to address specific shortcomings of the current main page. Aesthetics certainly matter, but as this redesign was hastily accomplished I did not devote much effort to them. Solving the specific problems discussed earlier is my primary purpose here.
The two aesthetic issues I did address included the structural consistency (in this case, all rounded corners) and a more compelling use of the already established color palette. These were arbitrary choices, however, and we shouldn't dwell unnecessarily on them.
With the elimination of the structural and hierarchical chaos, the new page works to bring the viewer’s eye along a fairly specific path toward the primary page mechanisms.
As an aside, contrary to what some believe, it is a fact that a more aesthetically pleasing design will make anything seem easier to use; something to keep in mind always.
Anyway, with this redesign I wanted to eliminate chaos and introduce a specific information hierarchy, with the search and research tools as the primary beneficiaries. I worked to deemphasize the elements of lesser importance and emphasize the vital elements.
I reduced the main navigation from 8 to 6, adding “financing” and eliminating the various types of vehicle searches, since a well-conceived search mechanism should elegantly accommodate various vehicle types (i.e. used, new). Imagery has been significantly reduced and the images on the page now serve specific purposes in the information architecture (though they were chosen fairly arbitrarily for this comp). I also changed the logo from the weak version they currently show online to the stronger, original logo they use everywhere else. That sort of consistency is important.
The less important features of the page and bulk of the info-text have been deemphasized and taken out of the initial eye-flow path (in the blue area at bottom). The information is available, but does not distract from this page’s, and most shoppers’, primary purpose.
With the elimination of the structural and hierarchical chaos, the new page works to bring the viewer’s eye along a fairly specific path toward the primary page mechanisms. In the image below, the red areas are the strongest, others are not quite so strong. The actual path may vary somewhat, but it is generally concerned with the three strongest areas.
The simplified page structure and stricter grid of the layout enhance the ease with which visitors can consume the page contents. This makes the page more “comfortable” and viewers get a sense that they can grasp most of what this page is offering. The difference in complexity and structure can more clearly be seen if we remove the content, leaving only the structural elements:
I think it’s worth noting that important elements like information architecture, page function, user motivations, etc… aside, the current main page for CarMax doesn’t really even look like it belongs to a powerhouse automobile retailer. The redux design, however, does. This is no small matter, especially in the highly competitive world of auto sales.
This has been a lengthy article, but clearly there was a lot to examine here. I hope that you can appreciate how certain specific faults and remedies touched on here are applicable in all sorts of website design circumstances. The context here is specific to automobile shoppers, but I hope that this exercise helps you to imagine extrapolations for similar conundrums in other contexts.