We’ve been taking a look at how the major e-commerce players handle their shopping baskets. It’s an interesting exercise, as things like this have a massive impact on how easy your site is to use, and so how well you convert the traffic to your site.
Throughout the design of Webtogs, we’ve had this idea of a cone, that represents the customers journey through our site. We see it as our job to get them to the tip of the cone as quickly and as easily as possible.
Our cone theory…
eConsultancy took a major look at the checkout process of the top 100 e-commerce sites and published a very interesting report. Whilst it’s not directly relevant to my post here, it provides some interesting background reading on the whole basket / payment / checkout side of things.
Opinion on “best practice” is divided on the basket issue, with many successful sites using very different methods. What I want to do here is take a look at our top 2 ‘basket’ issues and describe how we have dealt with them for Webtogs. I’ve picked Amazon.co.uk, Zappos.com, Play.com and Gap.com as sites to look at here. These are all hugely profitable and popular e-retailers, so it must be good practice if they do it? (I’m not trying to put Webtogs in the same space, these sites bill billions of dollars a year, we’ve yet to make a single dollar!). I use amazon and play frequently, so I know how they deal with this. Zappos and gap, however, I’ve never bought from, so I’ll be finding out how these 2 do things as I write this (so, in effect, we’ll be going on this little journey together!)
What happens when I click the “add to basket” button?
First I tried Amazon. Theirs is a simple system (always a good thing in our minds), simply click the add to basket page and when you do, you are taken to your basket (i’ve not talked about 1-click here at all, but it obviously changes things for amazon…)
(It’s interesting to note that Amazon use very little screen space to show what’s actually in your basket, with most of the screen showing what else you can buy, up-sell as it’s called.)
Then came Play. They use a persistent shopping basket, that’s on every page. Here’s the before and after…
I really like using this system, as it’s simple and keeps me on the page I’m looking at. The downside here is, (a) I wonder how many of these get ‘dropped’ compared with Amazon and (b) there’s no system in place to let me know I’ve added something to my basket, other than the change in the basket itself. I don’t find this a problem, but I wonder how many other users don’t realise something has been added…
Zappos is very similar to Amazon here. Click the button, see the basket page, with a link to go back. Nice and simple.
Zappos, however, have given more space for the actual basket here, and have shown the total cost, before delivery, which is a nice feature, as some sites don’t show delivery charges, until you are half way through checkout.
The most interesting one (for me at least!) was Gap. They do something different again. Here’s the before shot…
And this one shows the pop-up notice they use to tell the customer the product is now in the basket…
Having to click the X to close, is annoying for me, but it does mean the customer knows they have added to basket. What I also noticed on the Gap site, is they have a neat little ‘QuickLook’ system that allows you to configure and buy an item, from the list view. Here’s a shot of how this works…
We played about with this kind of thing as a feature for Webtogs, but decided in the end it was too confusing to use. I do really like the way Gap have done this, though. Perhaps we’ll re-visit this in a future release…
So what will Webtogs do? well, we’ve gone the simple route and opted for the ‘click the button, view the basket page’ approach. Here’s our before and after…
Our various designs have used every method there is, but ultimately we think this is the way to go. It stays true to our ‘cone’ theory, is nice and simple and should offer the best conversion rates. The only issue for us, is the break in navigation for the customer, but if they’ve added the item to their basket, do they still want to be on that page? We think they will have read / looked at enough by then.
How can I see what’s in my basket and how do I change things?
This is another big ‘basket’ issue. If you’re shopping for stuff and you add something to your basket, chances are (if the site takes you to your basket page), you’ll checkout your item. But what if you want to buy something else? Well, you’ll click back on your browser or use a ‘continue shopping’ style link and start looking for more things to buy. Now, what happens in this scenario if you want to check your basket? Perhaps you forgot the colour or size you chose?
The play.com method of showing the basket in full on each page, makes this easy…
Click the ‘x’ to remove your item (actually it decreases qty by 1, which annoys me!). If you want to increase the quantity, you have to add the item to your basket again. To be honest, this works ok as Play’s product set is mainly music and movies, and I can’t see too many people wanting more than 1 here. So, in dealing with issue 2, the play basket works out ok. But it’s not so good for issue 1.
Amazon, on the other hand, make it harder to change your basket. You need to click the view basket link, that’s in the header on just about every page, this takes you to your basket page (which is actually different from the page you see when you add to basket…)
And here’s the basket page itself:
Now, this always worried us. It’s a fairly bad customer journey, as if you want to make basket changes, you are taken away from the page you were looking at. I guess Amazon are keen to get people to checkout, and considering how successful they are, I’m really not one to argue! So, this is not so good for issue 2, but good for issue 1, the opposite, if you like, of the play basket.
On to Gap..
Now here, I can see how many items are in my ‘bag’ on every page, but not how much it’s going to cost (interesting!). If i click the ‘my bag’ link, i get…
Now, this shows me my item, allows me to change stuff, etc. But, I’ve still had to leave the page i was on, so similar to Amazon. Gap do, however, provide a neat continue shopping link, that allows you to choose your destination… (another idea for the melting pot!).
Zappos, again, only provide a link to the basket, they don’t show an item or cost count, and if you click the link, you get the basket page.
So, if you’re still reading this rather long post (and top marks for stamina by the way!), here’s what we’ve come up with, as a sort of solution to this issue:
The ‘Ajax Basket’ or ‘Quick Basket View’ for the less techy amongst us. Basically, if you rollover the ‘View Basket’ link, this appears. It allows you to increase / decrease quantity (with a real-time stock check, of course!), remove an item or checkout. If you click the ‘View Basket’ link, you are taken to your main basket page.
Now, it’s entirely possible that we’ve gone too far with this, and conversions will suffer as we give customers more power to change / remove things from their basket. Personally I think it’s a great feature and makes the site that much easier to use, which has got to be a good thing.
Amazon.co.uk, Zappos.com, Gap.com and Play.com are in no way affiliated or connected with Webtogs Ltd. The opinion herein is that of the author alone, and does not necessarily represent the opinion of Webtogs Ltd. All trademarks acknowledged. E&OE.
Tags: View Comments
