Blog:

For the last 11 months my team and I have been working on a new ecommerce site, webtogs.co.uk, selling outdoor and adventure sports gear. Sep ‘06 turned into month 1 for our new start-up.

It starts with a blank screen

How well a site converts its traffic to sales is the most important aspect of a good design and has to be the number one goal in anything we do. The average e-tailer converts traffic at roughly 2%. A cutting edge, best practice design, therefore, should be aiming at converting close to 5% of its traffic. eMarketeer did a study on some US sites that were achieving conversion north of 12%. So the design and usability of a site can make a compelling difference to the profitability of the business, the effectiveness of paid traffic and a host of other juicy things.

Amazon have spent years using every evaluation trick in the book to test new methods on their sites. An insider tells me that, whilst they aren‘t that happy with how some of the site looks, it‘s the best possible design they‘ve found for converting browsing traffic to sales.

’Simple is good‘ is another mantra. When designing any kind of application or site, it‘s easy to get carried away and add every feature under the sun (we did to start with!). The more the design of Webtogs evolved, the more we removed. We also stuck a banner on the office wall, that reads “You can‘t sell an interface…”. If you look at a good product page, all you should see is the product.

One of our large competitors (to be) — Cotswold Outdoor — recently re-launched their website, with a new, flash based, offering. Now, in my mind at least, this is a classic example of form before function, and I‘d take a large bet their conversions will suffer as a result.

So what‘s the eCommerce holy grail? As far as we‘re concerned, a site that coverts 100% of it‘s traffic and gets loads of it. Now it‘s fair to say that a whole host of factors come into play here, not least the perceived brand of the retailer, on and offline marketing strategy, etc. The purpose of this article, however, is to talk about what we did, in terms of the site itself and to try and explain why we did it.

Raising the bar

I came across an interesting article, 17 New Rules for Successful E-Commerce Websites which makes some very valid points on what not to do and how to improve the shopping experience. The interesting thing here, is this is really only a place to start.

The bar for eCommerce sites that really want to stand out is getting ever higher. These days, there are many sites selling the same or similar product. A non-negative user experience, with good customer service and on time delivery of the correct product is no longer enough to ensure repeat business or the kind of stellar growth seen 5 years ago.

Page Design

We started off with a truly bad design. We made several classic mistakes and didn‘t think our market through clearly enough.

Our top 5 mistakes:

• We didn‘t start with a basket of actual, relevant, products, giving little or no consideration to attributes (size, colour, etc) and how these would work within the design.
• We didn‘t consider the gender split, resulting in a very ’male‘ design.
• The interface was far too prominent, and with a boxy 3 column design, very limiting for layout. We constantly ran into problems with product titles, breadcrumb trails, long descriptions, long logos (in fact anything long really!), not fitting the layout.
• We gave far too much real estate over to ads and upsell/cross sell type links. Now this works for some things, but for technical outdoor clothing, footwear and gear it‘s not so practical.
• We completely ignored navigation by brand, a critical aspect of any eCommerce site selling branded items.

The next iterations saw some significant moves in the right direction. By this time, we were getting input from a larger and far more experienced team, had some design expertise on board and had Phil Wilkinson aboard, providing valuable insight into conversions from his Kelkoo days.

The current version of the site is our 4th. We‘ve split the development into multiple phases, with less critical but more interesting features put on hold for a future release.

The top 5 improvements we‘ve made, as at Version 4:

• The site is now centrally constructed around our product set, with real-time stock checks for size and colour combinations, via AJAX. This gives us the ability to filter results by size and colour, leading to more relevant results and (hopefully) greater conversions.
• The design is far more gender neutral, and has gender selection as a global element, switching product views on the fly. The conversion benefits here are obvious, as we‘re not alienating 40% of our market.
• Brand navigation is now core to the site, with an integrated ’by brand‘ menu system and brands tagged into the search system. Using Google to take a look at keyword searches in our sector, shows that over 60% of product related searches, include the brand name. I would imagine this is the same across most market sectors.
• Ads, promos and large header graphics have been dropped in favour of a more sophisticated product matching engine, that pairs products together, recommends similar / complimentary products and generally ’cross-sells‘ in a more intelligent way. It will be interesting to see if we‘re right about this, in terms of conversions. I certainly think the trend is moving away from blatant up-sell and irrelevant adverts.
• The interface is far less prominent, allowing a 500% increase in product per pixel on landing pages, results pages, etc.

Showing lots of products on screen

The more product you can pack per pixel, the better the site will be, right? It‘s certainly one of those unwritten rules that gets banded around these kind of articles. We did quite a bit of work on this. We looked at how the ’majors‘ did things, talked to everyone we could, read a multitude of articles and generally examined how we used ecommerce sites ourselves.

50% of our research supported the ’grid‘ view, 5 or 6 products across by any number of rows deep, as used by Play, Gap, etc.

The other 50% supported a more detailed ’list‘ view, with more information per product, but less product per pixel, as used by Amazon and others.

So, in the end we did both. Each product result page can be viewed either as a 5 across grid, or in list view. The default (at the moment!) is grid as we think this will convert slightly better, but if the user changes view, we remember this and always show the preferred view thereafter (cookies willing).

We also allow the customer to change the colour of a product and see an enlarged view, from the results page, assuming they are in ’list view‘.

An interesting side effect of the grid/list topic, is the ability to buy from a list view, without clicking through to the single product view. Gap does this on their website, I would love to know how or if this increases conversions.

How do we improve things further?

Until our site goes live, we have no traffic to play with. With that in mind, we‘ve set-up a closed test group of about 40 people. We‘ve split the group roughly in half for gender, and tried to get a good mix of technical / non technical and nice spread of ages.

Every couple of weeks we release a new version of the site, and ask the group to test new features. Each page of our ’sandbox‘ version has a text box below the footer for comments and bugs. The users log in and we track where they click, what they look at and, obviously, what comments they give us. I would highly recommend this approach to anyone doing a similar project, it‘s proved hugely valuable on a number of levels.

Top 5 things we‘ve learned from our closed testers:

• You can never make things too obvious. Buttons can never be big enough and contrasting elements are hugely important to draw attention to features. The first few releases we did, we were amazed at the number of features people missed.
• You can‘t ever show too much detail about a product.
• When customers have to fill out forms, give them as much help as you can (checkout for example).
• More experienced users spend a very small amount of time on a page, and you‘re lucky if they read 10% of the content.
• Men are far more likely to shop with a product in mind from the outset. Women tend to browse for things and will visit a disparate set of pages.

So, if we get a chance to write anymore here, we‘ll talk in detail about other areas of the site like the checkout process, our detailed product pages, and how we‘re going to bring community features to the venture. We're happy to be honest, open, and upfront and of course get any feedback we can.