Webtogs: Diary of an eCommerce start-up

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.

The first design for webtogs.co.uk

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.

Version 4 of the design for webtogs.co.uk

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.

Sample grid view layout from webtogs.co.uk

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.

Sample list view layout from webtogs.co.uk

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.

Screenshot from gap.com

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.

Sandbox comments box from webtogs.co.uk

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.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Comments

0 comments on “Webtogs: Diary of an eCommerce start-up

  1. I have just been to your sites to buy my wife a pair of Berghaus Explorer VGTX walking boots but am complety mistifyed by your different prices and your out of stock policy.

  2. This post is very helpful as I am in the process of creating my own website. One this I have found is that there is a lot more to creating a shopping cart than first thought. For example you really need to structure the website properly as well as ensure the actually content of the shop is what will help you rank well in the search engines.

  3. Great looking website, this post was made in 2007 and the website is still running so things must be going good :D

  4. Hi Karl,

    Phil from Webtogs here – yep the site is going great guns thanks. Maybe if there's enough interest, we can get James to do a follow up article :-)

  5. Think it would be good to do a follow up article.

    The honesty of this post is what makes it so good and credible.

    You get tired of reading web posts about how every decision was so well planned and so successful.

    It would to good to read a similiar post looking back over the two years and the lessons learnt both successful and well no so successful.

  6. I have had a lot of customers contact me with regards to setting up an eCommerce website. I thought I would share this information of an OpenSource project called Total Shop UK eCommerce. It can be freely downloaded from SourceForge – http://sourceforge.net/projects/totalshopuk/files/

    It has been made with simplicity in mind. If you have a PayPal account then great, all you would need to do is add your email address under the configuration page. Simple!

    Hope this helps some people looking to start their own online shop.

    Regards,
    Jason

  7. I just came across this post as if by magic. I am a social media consultant at a website http://www.Pricefalls.com that is currently redesigning our homepage due to a lot of the same mistakes you’ve outlined in the first part of your blog. Every once in a while I can hear groans of upset and anger coming from the creative department and little things get to be more of an issue. I’ve just got done forwarding this post to at least ten people and I would LOVE if you could take a moment to look at our site and provide me with some feedback I could send to the creative department and if not even just some words of advice would be amazing. Thank you again for this post it was a god send and I look forward to hearing from you!
    Sincerely,
    Josh Weaver
    jweaver@pricefalls.com