This post is contributed by Janis Lanka (@janislanka, who manages front-end development for Elastic Path Software.

This post is a continuation of a series of posts related to conversion optimization for the Official Vancouver 2010 Olympic Store. Following checkout process and product details page optimization, in collaboration with Wider Funnel, we looked at the store’s homepage. Following list of hypotheses were made:

• Too many banner spaces create high clutter
• Secondary (left side) navigation doesn’t stand out and is difficult to navigate
• Product photos are too small with no indication on available alternative colors

Control

(Click to enlarge, will open new page)

Variation A

(Click to enlarge, will open new page)

Variation B

(Click to enlarge, will open new page)

As a result, we produced two alternative variations with following changes:

• Reduced banner amount and increased size to improve prominence of each banner
• Increased prominence and clarity of secondary navigation
• Provided color thumbnails to products that have alternative colors
• Increased size of photos and reduced amount of products shown under New Arrivals, Featured Products, and Most Popular tabs

What We Learned

This was a very tough test where even 2053 transactions and 21 days did not provide a statistically significant winner. However, decision had to be made and Variation A was chosen based on following data:

• Variation A converted (GWO) 3.14% better than control variation
• Visits with Variation A resulted in 12.54% less Bounce Rate
• Overall site Conversion Rate was increased by 0.59%
• Average Order Value was increased by 5.16%

As a bonus point in our findings (to put it in perspective), if hypothetically we would be using the winning AOV and Conversion Rate, revenue would be increased by 5.78%.

Finally, a thing we learned which might be already obvious for some: use banner space very strategically. Based on your overall strategy – be that to increase AOV or Conversion Rate – you will need to choose carefully what to advertise and where to send users.

1. Show visually where to find item numbers.

2. Provide instructions, but keep them short.

3. Allow customer to add extra input fields, or give instructions on how to add more items than your default form provides.

4. Allow customer to input quantity.

5. Watch your error handling. Make it clear when the item no longer exists and provide a search tool or customer service number.

Eddie Bauer (above) does this well. 1-800-Flowers unfortunately kicks you out of Catalog Quick Order to the home page if you make a mistake or the product no longer exists.

6. Allow customer to request a catalog.

7. If possible, allow customer to select size/color without having to view product page.

8. Ask for “Source Code” for customer matchback analytics.

9. Use cart button best practices (wording and design).

We know cart buttons that fade into the background won’t convert as high as bright, bold buttons:

And wording is important. “Add to cart” assures the customer that the quick order will fast-track to the cart summary. Generally it is advised not to use button text like “Submit,” which has a negative connotation in people’s minds.

“Submit Request” does not imply you will be taken directly to the cart. Submitting a request usually involves a time lag and a person contacting you by phone or email, which catalog quick order is not.

This post is contributed by Janis Lanka (@janislanka, who manages front-end development for Elastic Path Software.

Continuing our case study in conversion optimization for the Official Vancouver 2010 Olympic Store (see last week’s post if you missed it), today we’ll share the results of our product detail page testing.

We began with potential issues with the current design:

• Color and size selection were provided in drop-down menus which were difficult to notice and understand. For example, what do the colors “Juniper”, “Pacific” or “Fern” really look like?
• The Add to Cart button and price often fell below the fold and were hard to find if a product had a long description.

Considering above, the following tweaks (Variation A) were introduced:

• Most crucial elements such as Add to Cart button, price, and amount selector were moved to the right in their own column and switch places with Shop With Confidence block
• Drop-downs were replaced with visual selectors
• Product review information was moved under the product title
• Alternative image thumbnails were increased in size

During the initial review of Variation B, we gathered feedback suggesting that visual selectors for color need to be closer to the main product photo. The reason being some on our team felt the color selectors were too distant from the product photo. We wanted to test this as an alternative hypothesis. Thus, location of visual selectors was the only difference between Variation A and Variation B.

Control

Variation A

Variation B

What We Learned

During the experiment, all three variations were equally distributed to 100% of all traffic. 18 days and 2567 conversions later, Google Website Optimizer found a high confidence winner. Consensus was that both new variations would perform better than the control one, but variation B was the ultimate winner:

• Variation B converted (GWO) 19.2% better than the control variation
• Variation A converted (GWO) 11.2% better than the control variation
• Visits with Variation B resulted in 54.4% less Bounce Rate than the control variation
• Overall Conversion Rate increased by 21.17% (Variation B) or 13.26% (Variation A)

After reviewing this test, some suggested that Variation A performed worse because most products had rather long “short” description, pushing those selectors fairly close or below the fold. A good follow-up test by splitting description into short and long would answer this.

Finally, it is difficult to say what change exactly contributed the most – the move of Add to Cart button or the change of drop-downs into visual selectors. Unfortunately, we didn’t have the luxury of time to localize these experiments and provide more detailed report on that. However, we can say with confidence that fairly minor UI changes can result in rather high improvement.

Linda’s Note: The following is a guest post by Charles Nicholls of SeeWhy.

The shopping cart abandonment rate is a key metric every ecommerce team should track. When viewed across the ecommerce sector, changes in the abandonment rate give insight into mass changes in behavior which impact every website.

When we examine shopping cart abandonment rates across a large number of U.S. ecommerce sites, viewed in aggregate, the abandonment rate fluctuates wildly, with an expected strong seasonal influence and customer behavioral indications.

Usually it is impossible to correlate your site changes with the changes to conversion. But when viewed in aggregate, it gives you insight into what customers are doing and provides a valuable benchmark when analyzing your ecommerce site’s performance over the same period.

Click to enlarge image (in a new window).

Looking at the data a bit more in depth, the shopping cart abandonment rate averaged 73 percent in the first two weeks of January, some 12 percent higher than the low of 61 percent recorded on December 16. While the abandonment rate usually falls during the Christmas period, these are still huge swings, reflecting the impact of Black Friday/Cyber Monday deals, public holidays, and January sales.

What’s also revealing in this data is that abandonment rates hit a new season high of 87 percent on January 5 and 6!

This is evidence of the link between abandonment rates and bargain seeking behavior, but it could also potentially indicate widespread out-of-stocks for popular lines.

Click to enlarge image (in a new window).

When you compare successful conversion volumes with the abandonment rate, it becomes clear that sales on January 3 reached 98 percent of the peak (on 12/8/09) and have been declining fast ever since. By Thursday, January 14, volumes were down to approximately one third of the peak of December 8.

But notice how the abandonment rate peak on January 5 and 6 came after a sales volume peak.

This suggests that customers were actively shopping for deals after the peak on the 3rd, but not finding what they were looking for, resulting in two days of record abandonment on the 5th and 6th. Despite huge numbers of potential customers researching online, these customers have yet to be converted.

Moreover, since this data is based on items placed in the conversion funnel (typically an item is placed in the shopping cart), it’s unlikely that this pattern is a result of out-of-stocks, indicating that there is untapped demand.

Most retailers expect a very quiet second half of January and accept that holiday promotions have pulled volume forward.

Given this backdrop, what can ecommerce teams do about rapidly falling volumes? The data above suggests that customers came in huge volumes in January, but many didn’t buy, either not finding stock availability or the prices they were looking for. Remarketing in all its guises is now a key tactic to beat the post-holiday blues. Here are five tactics you can use now to convert customers and beat the January blues.

1. Get the basics right. Email the house list with items on promotion which are in stock, and when popular lines that sold out become available again, focus your email campaigns around these items. Be careful not to include items likely to go out of stock quickly if featured prominently in your campaign. Save these items for more targeted campaigns (see 4 below).

2. Remarket to shopping cart abandoners. It should go without saying that triggered one-to-one emails to customers that almost purchased are one of the most profitable types of campaigns that you can run. It’s still astonishing that so few retailers follow up abandoned carts effectively. Retailers who do report that these campaigns are typically 10x more profitable than batch-based customer email campaigns. Ultimately, if widespread optimized follow-up programs were in place already, then we wouldn’t have seen such a sharp drop off in sales since January 3.

3. Extend free shipping. The research above shows that large numbers of customers are out there who almost purchased, but something held them back. We know that there is a very strong correlation between the website conversion rate and promotions. The most popular type of promotion with customers is free shipping. Consider extending free shipping offers through the end of January, potentially in stages, if you have not already done so.

4. Targeted offers. If you have the ability to segment your customers based on browsing behavior, now is the time to do it. Highly targeted, specific promotions—segmented by visitor behavior and product interest—will score well. Focus your best promotions on those who’ve shown great interest in particular products, and if you have limited stock, make it clear that you expect to sell out imminently. Remember that customers don’t want to miss a genuine bargain, and this may be the call to action needed to get the conversion.

5. Social media. While many marketers used Twitter and Facebook to publicize their holiday season offers, most have stopped promoting their offers via social media. For example, promotional Tweets are now at only 11 percent of their post-Christmas peak. Maybe it’s old hat, or you feel that there’s only so many times that you can tweet about your promotions, but there’s always a fresh spin you can put on it with a little creativity. Let’s get those promotion codes and offers out there again.

Web analytics visionary Charles Nicholls is founder and chief strategy officer of SeeWhy and author of “In Search of Insight” which has established a new agenda for the analytics industry. As a veteran of the analytics space, he has worked on strategy and projects for some of the world’s leading ecommerce companies, including Amazon, eBay and many other organizations around the globe. Incorporated in 2003, SeeWhy helps companies improve website conversion rates by bringing back up to 50 percent of visitors that abandon sites prematurely. Check out Charles’ Website Conversion Blog or follow him on Twitter at @seewhyinc.

For certain industries and product categories, product comparison matrices are very helpful for customers to make their decision between a small set of products. For example, most consumer software, telecommunications (mobile, telephone, TV and Internet) and consumer electronics sites offer product comparison. Comparison tools are helpful when the purchases are considered, where the customer is likely looking to make a purchase for one product/service only (vs apparel or food where you’re likely to make frequent purchases of the same or similar things). They are also helpful when the products differ greatly in their features and functions.

But comparison matrices are not always designed optimally. The following is a collection of tips for improving the design and usability of your comparison tools.

Category/Search Pages

1. If you’ve built a comparison feature into your category pages, use it in site search results too. You’ll be amazed how many sites don’t do this. A site search results page is essentially a customized category page.

2. Make the maximum number one can compare at one time very clear, rather than camouflaging it.

Clear:

Camouflaged:

3. Have a clear call-to-action to compare next to each checkbox, and make it look like a link (blue text or underlined black). Many sites force you to scroll all the way to the top of a page to hunt for the “Compare” button. Don’t do this to your customers.

Verizon Wireless makes it very clear you can launch the matrix without scrolling up or down:

Radio Shack does a nice job, using the active words “Compare Now”:

Matrix Usability

4. If you load the matrix in a new page rather than a pop up or lightbox, have a clear link back to the category. Consider “Back to [category] or “Compare more [category].”

5. Make the CLOSE link easy to spot.

6. Link to the product detail page (surprisingly, some do not link through).

7. Allow products to be added directly to cart from the comparison.

8. Large thumbnail images are a plus.

9. Allow easy editing (remove or add device). See example above.

10. Allow customers to highlight the differences between phones or plans, like Best Buy:

Another approach is to Hide Similar Features, like Crutchfield:

11. Allow customer to click-to-expand or use a mouseover to expose product attribute details. Make sure, however, it’s very obvious that there is information that can be expanded. In the example below, it’s not intuitive that you can expand the “Technical Specification” for more information.

12. Allow customer to save or print comparison. This is especially helpful when the purchase decision may be made by another person, for example, comparing mobile phone plans and presenting them to a parent.

Offer a call-to-action to call a customer service representative using “Need Help Deciding?” or a similar phrase:

13. Provide a clear link to return to the category/search results at both the top and bottom of the comparison table.

Product Description Content

14. Whenever possible, include product pricing (this may not be possible for some B2B situations where pricing is negotiable or dependent on volume.)

15. When you carry a number of brands and product lines, make sure units of measurement are consistent across manufacturers (example: 3 days standby vs. 72 hrs). Default to the one that’s most easy to understand (easier to figure out 3 days than to mentally convert 72 hours into 3 days).

16. Avoid jargon whenever possible. If you must use it, define it for your customers, as Verizon Wireless does:

17. Include links to reviews and average customer ratings, like AT&T:

Verizon does a nice job with AJAX hover, showing the breakdown of review attributes:

Some of these recommendations require custom programming that may not be feasible with your current ecommerce platform, but hopefully you can take away at least one idea for improving your comparison matrix.