Product Detail Page – Live Review of BuyHappier.com

At the recent Conversion Conference in Chicago, e-commerce and remarketing pro Charles Nicholls joined me for a session called “Afternoon at the Improv,” in which we gave spontaneous, live feedback on landing pages that were submitted by attendees. One volunteer was BuyHappier.com, an online catalog site that sells vacuums and other home products. We were asked to review the product detail page of a Shark vacuum cleaner.

I’m happy to say that, even though the conference was just two weeks ago, some of our suggestions have been implemented. The screenshot included here was taken on July 9, so I have had to include archived screenshots from similar pages to demonstrate some of the points we made when reviewing the site.

Focus on the Product

When you first look at this page, what do you see? I see a woman in Capri pants happily vacuuming an area rug. I want to see the product, but instead I see the model. The gallery of product photos is actually below the fold. Think about it: if your visitor is so specific that they’ve landed on this page after doing a web search for this specific product, they are an end stage customer. The focus should be on the product and the price (and any other differentiating factors). This photo looks like it is trying to sell the “lifestyle” of vacuuming, as if the model is demonstrating how happy she is to be vacuuming with a Shark. But really, does anybody believe that vacuuming is fun? Of course not. What visitors care about is that this vacuum works better than the other options, and that it’s lighter and more maneuverable.

It’s also odd to include an additional product photo in the product detail block. That photo should be included in the gallery of photos up above. Visitors shouldn’t have to scroll up and down the page in order to see all the product shots.

Where’s the Trust?

Buried in the bottom left corner of the main photo is an important message: BuyHappier.com is an authorized dealer for Shark. Assuming I’ve never heard of this company and just landed here from a PPC ad, that’s important to me. It assures me that the vacuum I receive isn’t going to be a knock-off and that if anything goes wrong the product is fully backed by the manufacturer’s warranty. Leverage the credibility of the brands you sell. This graphic should be pulled off of the photo and placed more prominently on the page.

Know Your Audience

See that empty space under the Facebook “like” button, to the right of the main photo? In that space used to be an image that looked like this:

So we had to ask: does BuyHappier.com sell to consumers, or is it a wholesaler? As we suspected, it sells to consumers – most of whom only need one vacuum cleaner. So why is this valuable, above-the-fold real estate being used to show a table of variable pricing for volume purchases? That information should be hidden away behind a simple link that says “volume discounts.” Then, when a visitor clicks, it can display as a lightbox popover for the few people who are interested in purchasing multiple vacuums.

Don’t Hide the Key Selling Points

The page header that we reviewed looked like this:

In e-commerce, free shipping is very valuable. This site offers free shipping but it was buried in the header in small, reversed-out type. If free shipping is your policy, play that up by making it into a badge or seal. The same thing is true if you have other reassurances such as a price guarantee or two-day shipping. You can put those things in a right “trust” column so that visitors see those reassurances at the same time they are evaluating the product. This makes it much easier for them to evaluate all aspects of their purchase – product, price, shipping, return policy, guarantees, etc. – all in the same visual field. By hiding the free shipping and money-back guarantee, BuyHappier.com was increasing the chances that a visitor might miss those key selling points altogether. I also think the wording it used was too complicated for the average visitor to bother reading. Keep things simple.

Now the site’s header looks like this:

The free shipping and money-back guarantee are far more prominent and the language is super simple. I’ll be interested to hear how this change to the site’s page header affects conversions across all its products.

Increase Contrast on Detail Tabs

Below the main photo and image gallery, there is an area of navigation so visitors can learn more about the product. But the coloring on the navigation we reviewed was so light and had so little contrast that it was difficult to discover. And just as bad, it was pushed down below the fold. While I do think of this tabbed structure for displaying product detail information as a “best practice,” the tabs need to be clearly seen and above the fold.

The current version of the landing page does include increased contrast, but it is still falling below the fold. The site could probably reduce the size of the main photo and rearrange some of the other elements to ensure that visitors see the product detail navigation without scrolling.

Product detail navigation at the time of the review

Current product detail navigation – note the higher contrast of the text and background color

Don’t Combine Visitor Actions

It’s strange here in the action block to have multiple checkout buttons right underneath the “add to cart” button.

It’s two completely different actions. Adding something to a cart is a safe, risk-free action – you can always edit your cart later. But what happens when someone clicks the PayPal or Google Checkout options? Will they be immediately charged? How will they enter their shipping information? All of these are unknowns, so they cause anxiety for the visitor. And anything that causes anxiety is an unsafe action.

The shopping cart metaphor that is used by online catalog sites is pretty well understood by consumers. They first add things to their cart, then they review their cart and make any changes to items or quantity that are needed, and once they are ready to purchase, then they go through the payment process. Bundling the “add to cart” and “pay now” actions together is confusing and unexpected. If you want to assure your visitor that you accept all sorts of payment types, including Google Checkout and PayPal, then consider putting that information in your right trust column along with icons showing the credit cards you accept. But don’t confuse an “I’m thinking about buying this” action with a purchase action by including multiple buttons in the same action block.

This article originally appeared in Tim’s ClickZ column July 10, 2012.