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.
James, thank you for sharing your story. Nice to read some of the development process on your blog too. Good luck with this project!
Very interesting article. A few UX questions - product filtering on options such as colour and size by yourselves has been mentioned, but have you considered multi-faceted navigation for the user? From what I can ascertain the product sets are quite large, and if so offering the user the ability to filter the range of products by attributes such as price ranges, colours and sizes will provide users with a more intuitive and personalised shopping experience, leading to improved conversions.
In addition, I can’t just see from these screens whether the site will allow users to see previous products they have viewed (ala Amazon recent products) along with offering an ‘add to wish list’ kind of storage facility, to assist users who are looking at a variety of products and don’t want to feel they have lost track of previously viewed products they are interested in?
Again its not clear from these screens, but has the user of product comparisons being considered for the products where there are multiple options which a user may consider? Naturally the importance of this will depend on the depth of products available, but I’ll be interested to get your thoughts.
I hope these comments have been useful, and I’ll subscribe to the Webtogs blog to read more insights on this project!
Hi Paul, Thanks for the comments.
On the filtering, it’s a big part of our navigation system. The launch version of the website allows navigation and view refinement by brand, price and category / sub-category. Version 2 will introduce filtering via size and colour. We certainly feel there are some conversion benefits to this.
We’re tracking all the urls each user visits and storing them in the database. We’ll be using that for ‘recently viewed’ items, alongside various cross-sell / up-sell strategies, mainly concentrating on complimentary products (socks with boots, that kind of thing).
As for product comparisons, we’re planning this as a big part of phase 2, to be tied into our ‘Gear List’ feature, which is our word for wish lists. Comparisons on products like ours, which by their nature are quite technical, is hard to get right, and so is something we’ve taken the decision to do properly at a later date, rather than badly under pressure to launch the site.
Anyway, thanks for your comments, spot on!.
Fascinating insight - thanks James. We’re going through a design process at Broadband Genie, and I think one of the most difficult things is taking on board the mass of “best practice” out there and trying to work out what’s right for your market. If you try and apply every recommendation you come across, you tend to end up with really unfocused results.
In terms of feedback, how are you persuading people to actually give you proper feedback? We often find that people are too keen not to offend, so just resort to saying that things looks nice, even when they don’t!
Hi,
I’m very interested in this kind of iterative design process as is my employer. However, as a project manager I’ve experienced a little difficulty getting my clients interested in this approach. They all seem a lot more comfortable with a more traditional spec, design, test, deploy cycle.
I wonder if anyone reading this article has any insight into how to scope and cost an Agile or XP style project.
Anyway, great article, many thanks.
Not often you get designers/developers opening up there processes to a wider audience, so kudos to you.
Interesting ideas on the search by brand. I see in the current version, its given much more prominence. Not sure about an iframe to control the brand list and the scrolling brand logo device. What information was gathered to find out why the search by brand was so critical?
This was an excellent, well written article that was actually pretty inspiring for me as I’m in the process of revamping my manufacturing parts company (that we only sell direct) to start including resale of parts made by other brands. We do all eCommerce, so changing our site to fit this bill is extremely important to get right.
Is your eCommerce solution 100% in-house and custom? It looks great, and I can’t wait to see the production version once released.
[…] Diary of an eCommerce start-up (tags: ecommerce webdesign usability sellingdesign) […]
[…] Vitamin Features » Webtogs: Diary of an eCommerce start-up (tags: article e-commerce ecommerce inspiration layout tutorial usability webdesign best-practices shoes monetization conversion startup business) […]
Wow, great feedback, thanks everyone. Had a busy day in London today, flying the Webtogs flag, just got back to my computer.
Dave, thanks for your comments. Yes, our solution is 100% in house. We took a look at some “out of the box” solutions (which i covered a while back on our blog), but decided in the end to go with our own solution. Good luck with your project. As for seeing the ‘live’ version of Webtogs, I can’t wait either!!
Norman, The whole ’search by brand’ issue is hugely important for us, as every product we will be selling is branded. We used the google and overture keyword tools to take a look at what was being searched for in our sector, and discoverd a massive weighting (north of 60% in some areas) towards phrases that included a brand name. The scrollbar on the brand list is actually a tempory thing (happened to be on the site when I took the screen shot). Originally we had an expanding / collapsing list, but this tested very badly with our alpha audience, so we’re playing with other options at the moment. If you’ve got any good idea, I’m all ears, as we all feel the current design is still not right.
Great article. I’m wondering if you can recommend any decent books that deal with this subject (though not necessarily or specifically for e-commerce sites).
O
I learned a lot from your article. Thank you. Would also appreciate any book recommendations as well regarding the project management of a new e-commerce website design including the various phases of development.
Also, I’ve read Jakob Nielsen’s excellent book Prioritizing Web Usability and will mention it in case you are not familiar with it.
On the books issue…
I can totally recommend:
Smart Retail, by Richard Hammond
The Tipping Point, by Malcolm Gladwell
Why we buy, by Paco Underhill.
These are NOT ecommerce specific books, but more around the psychology of brands, shopping, purchase behavior, etc. Smart Retail concentrates on physical shops, but you can draw a lot of parallels from it.
The Tipping Point, is simply a work of genius, and looks at what drives things to become massively popular.
I’ve never read a good book on project management for eCommerce, most of my experience has been learn’t the hard way!
If the powers that be on here (vitamin) are game, I’d happily write an article on the steps we took to manage the development of webtogs, how we started the process off and what went wrong / didn’t work for us.
I for one would be HUGELY interested in such an article.
Oh, and thanks very much for the book recommendations, heading over to Amazon right away.
[…] Tous ceux qui veulent se lancer dans la vente sur Internet ou qui veulent améliorer leur site doivent abolument lire ces deux articlies publiés par Thinkvitamin et SEOmoz. Les leçons générales: penser à son client et le laisser dans un environnement le plus familier possible. Par rapport à ce dernier point, on peut penser à une épicerie. Quoi de pire que de ne pas trouver les produits qu’on achète régulièrement à leur place? […]
[…] […]
[…] desconocido wrote an interesting post today!.Here’s a quick excerptFor 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. … […]
Hi, just wanted to point out a spelling error in the first paragraph: competetive should’ve been competitive. Please delete this comment. Thanks!
Awesome article James - thanks for an inspring read. A friend of mine has been bugging me to get their ecomm site up for ages now - finely found my inspiration. Cheers.
Look this site
http://www.ooyes.net
[…] Eine kurze interessante Zusammenfassung von Erfahrung beim Kreieren einer E-Commerce Seite findet sich im Artikel von James Balmain. Balmain arbeitet mit an der Seite webtogs.co.uk, ein Webshop für Outdoor Accessoires. Er beschriebt den schwierigen, aber spannenden Prozess eine Seite zu gestalten, die eine gute Conversion ermöglicht, aber auch verschiedene Zielgruppen gut bedient (hier bei ihm Frauen und Männer). Sehr interessant zu lesen. […]
[…] Webtogs: Diary of an eCommerce start-up (tags: ecommerce business webdesign) […]
We are in the process of commencing our development of our new ecommerce site which should hopefully be up and running in a few weeks. The information that you provided here + the screenshots were an excellent guide.
Do you mind telling me what CMS you used?
It seems like you made your own.
Cheers,
Alex