原文: 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.

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.

译文: 我们的电子商务网站—Webtogs的发展历程

一切从零开始

一个网站设计的好坏就看它是不是很好地将网上的产品展示变成实际的交易，我们所做的每件事都要达到最好的目标。平均来说，电子销售商的商品成交量只有大约2%。但是，作为最重要的一个方面，易于操作的设计可能使成交量接近5%。有电子商人曾做过研究，有些美国的网站成交量超过了12%。所以说网站的设计和易用性会明显地影响到商务利润，付款成交率，以及很多其他的利益。

亚马逊花了很多年在书上做各种评估手段来测试他们网站的新做法。有个内部人士告诉我说，虽然他们并不满意网站的某些地方，但这是他们迄今所知的可能设计中最能将浏览展示转化成现实交易的一种。

‘简单为上’是另外一个宗旨。在设计一种应用程序或一个网站时，要将天下所有的东西都搬进来是很容易的（我们刚开始时就是这样做的！）。随着Webtogs的设计的发展，我们取消了很多不必要的东西。我们还在办公室的墙上贴了张这样的横幅：“你所卖的不是华丽的界面……”。当你看一个好的产品页的时候，你应该看的只是产品本身。

我们最大的（或即将成为）竞争对手Cotswold Outdoor最近更新了他们的网站，做成了全新的flash动画展示。至少在我看来，这是典型的形式主义，而且我敢打赌最终他们的成交量会受到影响。

那么电子商务的追求目标是什么？正如前面所说，就是100%地将展示商品卖出然后再摆满。很显然有很多因素会起作用，不只是销售商的品牌认知度，线上线下的市场策略等。不过本文的目的是谈论我们如何做的，谈论网站本身并试图解释为什么我们这么做。

提高要求

我见过一篇很有趣的文章——《17条成功电子商务网站的新规则》，文中列出了一些很重要的观点，说明哪些是不该做的，如何提升顾客的购物体验。有趣的是，这真的只是条起跑线而已。

对想要成为优秀者的电子商务网站来说要求还要提高。当前卖同样的或类似的产品的网站太多了。相比于5年前来说，要想保证顾客的回头率，获得稳定的增长，光靠不错的顾客体验，良好的客服和及时准确的送货已经不够了。

页面设计

我们刚开始时设计的页面可说糟透了。我们没有全盘考虑清楚整个市场，犯了很多堪称经典的错误。

我们最大的5个错误是：

• 我们开始时没有成套的真实的，相关的产品，很少或没有考虑产品的特征（规格，颜色等）和这些设计这些特征的作用。
• 我们没有考虑区分性别，导致设计非常男性化。
• 界面太华丽，盒式的三栏设计使得用于布局的空间非常有限。我们总是遇到问题，产品名称，一些细节，产品描述过长，标志太长（事实上什么东西都太长了），根本不适合布局安排。
• 我们在广告和文字链接上花费太多了。虽然现在这些花费也有所见效，但对于技术性很强的户外运动服装、鞋类和装备，这些花费并没多少实际用处。
• 我们完全忽略了品牌引领的策略，有评论认为做任何一个电子商务网站都卖品牌货。

第二代的页面设计可以看到右侧有了很大改动。这次我们引入了一个更大更有经验的工作团队，有了几名设计的专家，有了菲尔·威尔金斯的加盟，他提出了与他在Kelkoo时很不同的高明的见解。

目前我们网站已经是第四代了。我们将发展细分成多个步骤，下一个版本里将会更少评论而加入更多的有趣的产品特点。

在第四代里，我们做出的最大的5个改进是：

• 现在的网站结构是围绕产品安排的，可通过AJAX实时查库存确定规格与颜色的搭配。这使我们可以通过规格与颜色过滤查找结果，查找更多的相关结果和获取更多的成交量（完全有可能）。
• 设计的性别色彩更中性，作为全球元素可作性别选择，闲时切换产品显示。由此带来的成交收益非常明显，因为我们并未忽略这个40%的市场部分。
• 目前品牌导航成为了网站的核心，搜索系统集成了‘根据品牌’菜单系统和品牌标签。用Google查查我们业内相关的关键词就会发现会显示超过60%的产品相关搜索，包括品牌名称。我想其他领域的大部分市场也都应该达到这个水平。
• 广告，短片和大标题的图片都加入了完善的产品匹配引擎。这个引擎可以自动将产品配对，推荐相似的或免费赠送的产品，更灵活地进行交叉销售。我很期待根据销售量来看这个改变是否正确。我可以肯定现在我们的风格已经不再华而不实和掺杂很多无关的广告了。
• 页面比之前朴实得多了，登陆与结果等页面上的产品展示像素利用率提高了500%。

屏幕上显示大量的产品

产品的像素利用率越高，网站就越好，是这样吗？这确实是一条很多关于这方面的文章所未提到的规则。我们在此之上花了不少的功夫。我们看成人是如何做事的，与任何可能的人交谈，看大量的相关文章，测试我们自己如何使用电子商务网站。

我们50%的研究支持用网格式展示，不管有多少行，每行展示5~6个产品，如Play,Gap等网站的做法。

另外50%的研究支持列表式的详细展示，每件产品有很多讯息，但产品的像素利用率不高，像亚马逊和其他的一些网站的做法。

所以，最终我们们两种方法都采用了。每个产品结果页既可以以每排5个的网格式显示，又可以按详列式显示。目前暂时默认的是按网格式显示，因为我们认为这样会稍好一点点。如果用家改变浏览方式，我们就会记住这个设置并在以后他的浏览时都使用这种方式（通过cookies信息来实现）。

如果用户是在用详列式浏览，我们还允许改变产品的颜色和看放大的图片。

这种网格/详列式浏览有一个很不错的附加效果，就是可以从详列式浏览中直接购买，不必点击打开单独的产品页。Gap在他们的网站中就是这样做的，我很想知道这样做是否能提高成交量。

我们如何将事情做得更好？

在我们的网站能存活之前，我们输不起。基于这种思想，我们组织了一个40人的封闭测试群。我们将整群人按性别分成大致相同的两半，尽量合理搭配懂技术和不懂技术的人以及不同年龄段的人。

隔几个星期我们就发布一个网站的新版本，然后请测试群来测试新性能。我们的测试版本每一页底部都有一个文本框，用来发表意见或指出bug。用户登陆进来后，我们就跟踪看他们点击了什么地方，看哪里，当然还有他们给我们的意见。我强烈建议要做相似的项目的人都来用用这种方法，事实证明这种办法非常管用。

我们从封闭测试员那里学到的最重要的5件事：

• 你无论怎么做一个东西它都不会太显眼。按钮永远不会太大，要让用户注意到某些东西，背景的对比相当重要。头几个测试版里，我们讶异于他们忽视了网页上的很多内容。
• 一个产品你怎么做都不能把所有的细节表现出来。
• 如果要让客人填写表格，一定要给他们尽量多的帮助（比如自动检测）。
• 越有经验的用户在一个页面上停留的时间越短，如果他们能看页面内容的10%那你就该感到庆幸了。
• 男人几乎都是一开始就想好了要买什么东西，而女人则倾向于随意看各种东西，甚至会去看一些毫不相干的页面。

如果我们有机会再写详细一点，我们会谈谈网站的其他一些问题，比如说自动检测程序，产品页面的细节，还有如何将社会因素考虑到风险之中。很高兴能开诚布公地谈论这些，我们抛砖引玉，当然也希望能有各种回应。