As a way of getting inspired, I chose 5 sites with high conversion rates and converted their homepage, category page and product page into wireframes. This is a great way to get inspired and, uh, “borrow” ideas to help you with your designs. Imitation is the sincerest form of flattery!

Note some of the data I based decisions on is a bit old as it’s the best I could get.

Here’s the 5 sites I chose and the rational:

• Amazon.com: do I really need to say why? It’s the site everyone compares themselves to. Arguably it’s a bad idea to copy from Amazon, but there’s no denying they do a lot right. In January 08 Amazon had a 9.6% conversion rate.
• Proflowers: I personally find this site inspiring, the attention to detail is amazing. With a 14.1% conversion rate, their attention pays off.
• Schwans: ok, so they cheat, being an online grocery store attracts a lot of repeat ready to buy visitors. Still, a staggering 40.60% conversion rate is hard to argue with, no matter how they achieve it!
• Vitacost: More of a “typical” ecommerce site (whatever that means) than the others, with an atypical 16.40% conversion rate.
• WomanWithin: There’s no doubt that apparel is a huge and growing industry online. Woman Within’s staggering 25.30% conversion rate positions them very well to capitalise on this market.

No doubt all of them have some advantage – ProFlowers email aggressively, Schwans have their repeat business, Amazon their brand, etc. The question is: what edge do you have that you can capitalise on?

Below are thumbnails, full size versions, and downloadable AI (Adobe Illustrator) files for you to take home and play with. If someone is kind enough to convert them to another format (OmniGraffe, Axure, any other format) please email me and I’ll add links.

Anyway, without further ado, here are the wireframes.

Amazon.com

Homepage Download AI

Category Page Download AI

Product Page Download AI

ProFlowers

Homepage Download AI

Category Page Download AI

Product Page Download AI

Schwans

Homepage Download AI

Category Page Download AI

Product Page Download AI

Vitacost

Homepage Download AI

Category Page Download AI

Product Page Download AI

WomanWith

Homepage Download AI

Category Page Download AI

Product Page Download AI

While this post isn’t meant as an introduction, I’ll cover it very briefly. A split test is where you show some people one version of a page and others another and measure which one produces the best results. It’s arguably the single most effective way to improve your conversion rate. It doesn’t matter what your customers say about your shopping cart (your friends will almost always so “oh it’s so easy to use”), and what your opinion is. What’s important is to measure what people actually do. Even the experts pick the best performing version incorrectly much of the time, which they will readily admit, so testing real performance is critical.

The Challenge of Split Testing Templates

Usually when people talk about testing, they are talking about testing a single landing page, or a page in your checkout. Technically they are easy to test. Where it gets tricky is when you want to test your product template in your shopping cart, or a page template in your CMS. In most systems, it’s very hard to create a second version of the template and test. So what’s the solution? That’s what this blog post is about.

How to Split Test a Template Based Site

We’ll talk about testing with Google Website Optimizer. It’s an excellent tool, widely used, and free. Win!

1. Log into Google Website Optimizer with a Google Account at https://www.google.com/analytics/siteopt.

2. Choose “Create a New Experiment”

3. You are given the choice between an A/B test and Multivariate test. Google Website Optimizer informs you that A/B Experiments are simple and Multivariate tests are robust. However, ignore the suggestions Google Website Optimizer makes, included the recommendation that you need at least 1,000 page views per week. We are abusing this tool to get it work the way we want so that isn’t relevant. That’s the first trick.

4. Next, we are at the “New Multivariate Experiment” page. Fill in the fields as follows:

“Experiment Name” – give the experiment a meaningful name. In my case, I’ll call it “Product Page Add to Cart Button”.

“Identify Your Test Page” – in this box, put in the URL of any page that’s using the template you want to test. In my case, I’m testing the product template, so I add any product page, it doesn’t matter which one. For example, you’d put in www.mystore.com/brand/red-widget.html. We are testing the template, not just this page. We just need to trick Google.

“Identify Your Conversion Page” – put in the conversion page, that is, the page that users will reach when they’ve achieved the goal you want to boost. For an ecommerce site, this is often the “thank you” page after completing the purchase. In this case I am testing the “add to cart” button, and the shop doesn’t have a huge amount of sales per day, so it would take a long time to know whether the button was improved or not. So instead, I’ll put the conversion page as the page you are shown after clicking the add to cart button. There’s all sorts of clever customizations you can do around tracking the conversion page, but they are beyond the scope of this post.

5. Next you are asked who will be installing it. For the purposes of this post I’ll assume it’s you. The process is pretty similar if it’s not you.

You’ll be shown a few snippets of JavaScript with instructions on how to put them in.

What you want to do is to put this in your template file. In this case, where I am talking about making a change to a product page, I’ll find the products template and put it in there. So to be clear, we are making the change to every product page, not just one. This is just what we want! Remember how on the last screen it asked us for one specific page? Don’t worry about that. It’ll work.

The instructions can be difficult to implement in some template systems. For example, “Paste the follow at the beginning of your test page’s source code”. What you ideally need to do is put the code directly after the <head> tag in your template (detailed instructions are in the Google Help site if you want to read more). With some shopping cart templates it’s hard to control the exact place you put the code – it could be the <head> section is in a generic template that controls the whole site. In that case, just put it as close to the top of the product template as possible. Even just after the <body> tag will work. While this isn’t officially supported, I’ve put the scripts in all sorts of odd places depending on the shopping cart or CMS, and never had a problem.

Page Sections

The next interesting section is the page sections.

This is where you define the section(s) you want to test. This is the crucial piece of code. Multivariate tests are designed to test different parts of the page simultaneously. However, unless you have a lot of traffic and a lot of sales, then multivariate is impractical. So you need to decide what the test is. This could be something very simple like my test where I’m just trying different “add to cart” buttons, all the way through to testing complete new layouts. I’ll cover how to do some of this trickier stuff at the end, and stick with the simple example for now.

Here’s what my code looks like:

I’ve named the snippet “CartButton”, and put the code for the current button inside the snippet. The name “CartButton” will show up in the Google Website Optimizer later, so make sure the name is obvious. To stress again, unless you have a lot of sales (at least 50+per day) I recommend testing only one thing at a time.

When you go into Website Optimizer, you’ll see it appear there.

What you do now is click the “Add new variation” and put in the code you want to test. In this case, I’m putting in another add to cart button. You can add as many variations as you want, but be warned again, the more variations you have the longer it will take to test. Unless you know what you are doing, first time around stick to one variation.

That’s it! You have created your test! Just go through the preview and launch and your test is live.

Check back next day to make sure it’s all working. You should be seeing conversions coming in and with time you’ll be able to tell which is the winning version.

How to Test Layout Changes

So you say “ok, that’s fine, I can swap out an image or whatever, but I want to try more advanced stuff”. No problem! It gets slightly trickier, but not too bad. Some tests you might want to try:

• Changing the layout of the page
• Changing a style e.g. making the headline more dominant
• Testing the presence or absence of an item, for example, a testimonial, security seal, or similar

How do you do this? Let’s start with testing whether an item makes a difference by being there. This is pretty simple. Let’s say you have a testimonial section on your page:

<div id=”testimonials”>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur euismod adipiscing eleifend. In non justo velit, aliquam tempus tortor. Aenean mauris sem, faucibus nec venenatis ac, faucibus eu mauris.
</div>

Simply add a test section to the page, and add some CSS to turn it off.

<script>utmx_section(“testimonials”)</script>
<style type=”text/css”>
#testimonials
{display:none;}
</style>
</noscript>

Then when you create a page section variation in Website Optimizer, simply leave it blank. By not showing the CSS that turns it off, then it’s on.

How about making a headline more dominant? It’s basically the same as above. Instead of testing CSS to turn off a section, just use CSS to change the style.

Changing the page layout is a bit trickier. Ideally this would be done with an A/B test. However, that’s tricky to do with many shopping carts and content management systems without some major code hacking. The solution is to insert a great big chunk of CSS similar to the two examples above, but use that CSS to significantly override the main style sheet and replace it with the new test style. You may need to use the !important declaration at times if needed. If your layout is still done using tables, this might be so difficult as to be in practice impossible. So, sorry, you’re out of luck! Time to get your code up to scratch!

If you are doing advanced CSS tests, don’t forget to preview your tests across different browsers to make sure all users have a good experience.

What do you think? Like it? I would love to see the conversion data on this new site vs the old one.

You would think so. Such a technique does exist. However, when I talk with shop owners, the vast majority of them haven’t heard of it, much less tried it. What’s up with that?

The technique is called split testing. It comes in a number of forms (which I’ll cover in another post). How it works is you come up with a theory as to how to improve your shop. The theory could be based on customer research, anayltics data or gut reaction. Let’s say for example, you have a theory that increasing the prominence of your search box will improve sales (it often will, but that’s a post for another day).

What you do is, using freely available and relatively easy to use tools, set up your shop so that half your visitors see the old search box and half of them see the new, (hopefully) improved search box. You define what the goal is – typically increasing the conversion rate of your site (the percentage of users that actually buy something – typically around 1 – 2% for small shops), but it can be other goals (more on that later as well), and sit back and wait. After a while – it could be days, weeks or months depending on a number of factors, you’ll get a report telling you exactly how much your change increased or decreased sales by.

For example, on a shop I help out with, I had a theory that changing the position of an important button in the checkout process would improve things. I followed the steps above and waited. Turns out this theory was right – sales increased 3.1%!

Some may think “3.1%, that’s hardly anything to get excited about”. Me? I’m super-excited about it! For one thing, it took me less than half an hour to set it up. Secondly, that 3.1% will keep going, year after year. Most importantly though is the cumulative effect. Sure, a 3.1% increase in sales (with no increase in marketing budget mind you!) isn’t going to make you rich. But what happens if you have 2 tests running at a time, and run each one for about 3 months? Assuming you get the same result from all of them, by the end of the year you’ve increased sales almost 25%! Now that’s something to get excited about.

Chances are some of your tests will perform worse than 3.1% – even reduce sales (so you don’t keep that change), but some might do better than 3%. Any shop I’m consulting on I try and have as many tests running at the same time as I can. I have 6 tests running on one shop as I write this. If each makes a 1% improvement, well, that’s 6%. Keep doing that, and soon you’ve got a damned profitable business.

If you want to jump into the deepend, get yourself a Google Website Optimizer account and go for it! For others, stick around and I’ll talk you through some of the details. As with most things, there’s a lot of traps for young players, I’ll help you avoid them.

So far it’s an outstanding success, and the drastic increase in incoming reviews can be directly linked to purchases 3 weeks ago! It’ll be a while before we see if it increases conversions (likely), but worst case, we get enthusiastic customers (the reviewers) back on the site, and give them a greater sense of engagement and connection with the site, increasing the chances of repeat purchases.

While we learnt all different things, the biggest thing that I came away with – not new, but hammered in hard – was:

You are not your user.

Different people approach things with radically different motivations, approaches, goals, experiences, and expectations. The number 1 secret to a top performing site is to recognise that and to accommodate those differences as best you can. Basically, be all things to all people! And yes, it is possible. Easy, no, but possible, yes. As Bryan Eisenberg said, either you do the hard work, or your customers do the hard work, it’s up to you.

“People as a rule do not seek products or services, or want to satisfy needs or wants. Products or services are merely a means to get things done or to spend time their way, to enjoy and experience life.”

How true. This is so applicable to so many parts of a business, foremost (in my mind at least) the copy writing mantra of “benefits, not features”.

I feel the site is already extremely easy to use and navigate

And it is. It’s a perfectly nice site, there’s no major usability problems with it. Perfect? No, but no huge problems. I’m sure a usability study done on her site would show up a few problems and areas for improvement, but wouldn’t be damning.

But is usability all it’s cracked up to be? There’s many different types of usability studies, but the most common is to get users to complete a series of tasks (such as buying an item) and see how  far they get, what roadblocks and problems they encounter, and so on. And that’s great stuff. It’s important to get them able to do the task.

However, a good e-commerce site is more than just about being able to do something. It’s about your customers wanting to do it. It’s about motivation. For example, a blue “Add to my shopping cart” button and a red one are just as usable as each other. In fact, you might even argue that the red one is more usable as it stands out more. However, in just about every test done, people are more likely to click on a blue button than a red one. This sort of thing doesn’t show up in a usability study. The site is equally usable whether red or blue, but it’s not equally desirable or convincing.

So, usability helps get rid of the barriers, but that’s only half the story. If you want help with either half of the story, but mostly the second half, perhaps I can help.