This time I’ve chosen a few UK supermarkets that allow you to place orders online. This is an interesting topic given that Amazon recently moved into the grocery market and therefore started competing directly with established supermarkets.

I want to look at the unique challenges faced by supermarkets and how they overcome them, therefore increasing their chances of converting the customer. These seem to be the unique challenges faced by online supermarkets:

• Users are very concerned with choosing a suitable delivery time
• Retailers often run multiple special offers across thousands of products at the same time
• Many customers will want to repeat their order for products they buy often, therefore they may want to access these items quickly rather than going through the whole process again

As always, I need some controls for this test so I decided to test the following:

• Buying five everyday items—milk, bread, eggs, coffee and chocolate
• Having these delivered on a Friday afternoon when I’m at home

For each retailer, I’m going to answer a couple of questions:

• What they do well
• What they don’t do well

I’ll then round up with some hands-on tips which could be applied to your own website to help improve your conversion rate.

I’ve chosen Amazon, Tesco and Asda, and for the purposes of this test, I’m going to act like I’m a first time user to all three websites.

As I mentioned above, Amazon has moved into the grocery shopping space so I thought where better to start.

Amazon: What they do well

Timely landing page special offers. At the moment in the UK, it is what we call “Back to School Time”. All of the school kids will be heading back to school soon and most retailers are fighting for the money spent by parents during this time. Amazon have recognized this and highlighted it on their landing page:

Good filtering once within a category. Despite their broader problems with navigation (see below), once you are within a category, Amazon offer good options to filter and find what you want. In this example I’m in the coffee category and have some good options to filter and find what I want:

This is done well and is very relevant to the coffee category—I can’t think of any additional ways someone may want to filter for here.

Amazon: What they don’t do well

Finding basic items. I found it very hard to find a couple of the basic items on my shopping list included milk and eggs. I can understand that Amazon simply do not sell these, but surely they should stock these basic items if they expect me to do my grocery shopping with them. I suspect that with grocery shopping, users want t buy all of their items from one place at the same time. If Amazon can’t provide me with these basic items, I’m very likely to go somewhere else.

Lack of well known brands and blank search results. I had a similar type of problem with bread, there was a severe lack of what I’d call recognizable brands. I was given the chance to narrow my search to “Hovis” which is a popular brand of bread, but clicking on this returned no results which was frustrating – why show me the option if it isn’t available?

Lack of clear navigation. Amazon hasn’t done a very good job of making it easy to find items. The navigation menu across the top of the page didn’t make much sense to me and hardly covers the basics:

To get to basic items, I had to use the left hand navigation menu. This wouldn’t normally be a massive problem, except that they have put one of the most popular categories for grocery shopping near the bottom:

This may have been a conscious decision by Amazon as they seem to have a real lack of fresh produce. But surely this is part of the average person’s grocery list?!

You can’t add a product to your basket with one click. As you’ll see from the other supermarkets below, this is a bit of a flaw with Amazon. With something like grocery shopping, you don’t really need to view a full product page with details and reviews (and all the other stuff Amazon like to include!). This works for other products such as DVDs and books, but not for grocery shopping.

I can’t buy from this page:

Delivery concerns. One of my criteria for most people doing shopping is being able to choose a convenient time to receive my shopping. Amazon don’t do this. They use the same options as they would for delivering normal goods. I don’t think this is a good thing for grocery shopping. The best option I have is to pay extra and have delivery by 1pm the next day:

I think this could be a major flaw that could put people off using Amazon for grocery shopping. We all know that Amazon are pretty good at delivering other goods, but with something like groceries, I think most people will like to be in when they’re delivered. Therefore being able to choose a delivery time slot is essential.

Overall I think there are more negative points than positive with Amazon at the moment but we must remember that they are new in this market. However they need to understand that the conversion and check out process that works so well for their other products, may not actually work as well for groceries.

Next up is Asda, owned by US parent company Walmart.

Asda: What they do well

Clear call to action on homepage. Good call to action in the top left corner and good text: “Grocery shopping delivered to your door” with a picture of a delivery van and a nice big button saying “Start Shopping.”

Registration & addressing delivery concerns. Before I can start shopping, I need to register my details so Asda can verify I live in an area that they can deliver to. This is a good thing to establish first because I don’t want to go through the shopping process only to find out that my groceries can’t be delivered.

Their registration form actually looks a bit long to me and not the most appealing in terms of design. However they have a nice little title at the top which made me smile and I wondered whether this actually helped people complete the form:

To be fair, the form was very easy to complete despite not looking too great.

Another good thing that Asda does is that no matter where I am, I can always see my shopping trolley and can book my delivery slot very easily (and change it). The following is always on the right hand side of the screen:

Getting started page. I quite like the page that I’m greeted with after registration. Asda offered five steps on how to get started:

Booking a delivery slot. Booking a delivery slot is very easy. I’m given a choice between a two hour slot or an eight hour slot. My criteria is a Friday afternoon so I opt for the 2 hour slot option and its simply a case of clicking on the slot I would like:

One thing that I found quite frustrating here was that if I chose the wrong slot, I couldn’t cancel it and choose another slot. Interestingly, the cancel button doesn’t actually work! To change it, I actually had to book it, then go back in and change it.

Adding products to my basket. I don’t actually have to click through to a product page to add it to my basket. I can even select different quantities and click add, without clicking through to the product itself. This makes perfect sense because you don’t really need to know more details about these type of products, you’ve probably bought them before at the supermarket:

Highlighting special offers. Asda is quite good at discreetly highlighting special offers in their product listings. The small red banner is also clickable and adds the special offer to your basket straight away. Alternatively, if other products are included in this offer, you’re taken to a page where you can view different products that are included. Here you can see how they highlight a special offer on apples which is mixed in with normal prices:

Asda: What they don’t do well

Creating my own shopping list. Once I’d registered, I was taken to a useful page which told me how to get started which I thought was a nice idea to help. I was also able to use a clever little form to type in my shopping items by hand:

However, this didn’t really deliver what I expected. I was given a list of 25 types of eggs and the option of viewing up to 229! At first I thought that the system has just searched for eggs and nothing else, then I noticed the other words I’d searched for hidden away in the top corner of the screen:

I’m sure that a better system could be used here which displayed the top 5 products by popularity from each of my searches. This would allow me to scan each set of results and quickly add all of my items to my basket—all from this one page.

The other thing that could improve this page would be to fill the big white space with large buttons which take me to the other items I’ve searched for.

Making a favorite shopping list. As expected, Asda has a feature whereby you can save your shopping lists so that you can refer back to them next time you login and quickly find products. So far so good; however, this feature is very hard to find! The ability to add products to a shopping list is hidden away:

I actually had to read the instructions on how to do this (which I never do) and then I still struggled to find it. Such a fundamental feature should be obvious as many customers who want to do repeat orders will use this feature—therefore bringing more revenue for Asda.

Not making the minimum order value obvious. Another thing that I didn’t like was that the minimum order value required was not made clear. In fact it is quite a small piece of text. I didn’t actually notice this until I placed my five items into my basket, which is very frustrating. I can understand why there is an minimum order value; however I’d have expected this to be a lot more obvious than it was:

Next on my list is Tesco, one of the biggest retailers in the UK.

Tesco: What they do well

Security. One great thing that Tesco did was to reinforce the point that their website is safe for me to use—they did this at the point of registration. They even gave me a link to more detailed explanation:

Getting started. After I’ve registered, I’m sent to a getting started page which is very simple and easy to use:

One big difference here is that Tesco helped get me started in just three steps, using a bit more of a call to action style than Asda used.

Delivery options. Tesco have a similar layout to Asda, basically a grid that allows you to click on a time slot that you would like:

Nice landing pages. Tesco does quite a good job of highlighting their special offers on a section landing page. For example, the bakery section highlights some “buy one get one free” offers as well as special offers of the week:

Below the special offers (not on the screenshot) are regular links into popular types of bakery products such as white bread or brown bread, and so on.

A great upsell feature. I love this one! If you add an item to your basket which is part of a special offer, for example 2 items for £2, you are told in the basket that you have missed a promotion:

I think this is a great feature as some people will be in a rush to complete their shopping list and may not always take note of the special offers. In my example shopping list, all I wanted was a loaf of bread, and I was told that these were on special offer at a stage where I may not have otherwise noticed. Nice work here Tesco!

Tesco: What they don’t do well

Registration. The first part of the registration process is very simple and requires just three pieces of information:

However when I moved on to step 2, Tesco had similar issues to Asda’s registration process. The registration form looks a little bit daunting and not exactly appealing. Asda recognized this and put the friendly banner at the top of the form saying that the form was easy. This small gesture made Asda’s registration form a little more friendly. As opposed to this:

Now I ran into a problem here because Tesco asked me to choose my address from a dropdown menu. My address wasn’t on the list so I looked for a place to manually enter it—there wasn’t one. I had the same issue on Asda but they allowed me to not only enter my address manually, but also include special delivery instructions for the driver.

Tesco has bit of text saying “if an address is not listed above, it is because we are unable to deliver to it.” But this isn’t true—they have my neighbor listed, after all! So Tesco would have lost me here if I’d been placing an order.

Product listing pages. They seem to have a lot of wasted space on their product listings page, lots of white space doesn’t especially look good for me. When I land on a listings page, I can actually only see one product listing:

As I scroll down the page I see more listings, and to be fair, they highlight the special offers quite well and it’s possible to add to my basket with one click. However I am of the opinion that this page can be tightened up a lot:

I also don’t see the need for the big red “new” banners across each listing. Does a customer doing their grocery shopping really care if a loaf of bread is “new?”

Top Ten Takeaways

1. If users don’t need to see a full product page, don’t force them. Allow them to add to basket straight from product listings.

2. Account for users who may have unique addresses and allow them to enter them when they register.

3. Reinforce that your site is secure as soon as you can in the conversion process.

4. Highlight your special offers on your main landing pages but don’t forget to include the basic options too.

5. If you have an upsell feature available, tell your customers at the basket stage if they’ve missed out on an offer.

6. If you are going to call yourself a grocery store, sell basic groceries! (Hint, hint, nudge, nudge, Amazon…)

7. Remember your market and their delivery needs—do they need to choose a time and day?

8. Address your customer concerns as early as possible, such as letting them arrange delivery before starting to shop.

9. If you have special features such as a favorite shopping list, make it easy to use and find.

10. Think about the filtering options a certain group of products may need for a customer to find them easier.

I hope you found this useful and the top ten takeaways applicable for your own websites. As always let us know your comments and feedback below.

Just to give you a bit of a background on the conditions of the test, I asked myself what I’d be looking for if I was buying the iPhone 4. These are the four most important criteria I came up with:

• Color – black or white
• Memory – 16GB or 32GB
• Monthly tariff
• Delivery conditions

I think these are pretty standard and cover what factors would play a part in the sales process for the user. If a retailer’s website makes it difficult to choose any of these factors, then it could prevent me from buying the phone.

I’m using Google Chrome and a screen resolution of 1366 x 768 for this test.

First up – Vodafone

I hit a bit of a problem with Vodafone which I’ll come to shortly, but I wanted to start off with the good points. I landed on their homepage and saw a nice visual advert for the iPhone 4 which caught my eye straight away:

I want a phone for personal use so I clicked on the “See more” link, for info the image was also clickable.

Conversion rate thumbs up: Making such a key product obvious and accessible visually from the homepage is a good move.

Next step was for me to choose my tariff, color and memory size. Before I could do this though, I was given a message saying that the iPhone 4 was currently out of stock. However I could still order online and be sent one as soon as they were back in stock.

This in itself can make most buyers go elsewhere. However to be fair to Vodafone, they can’t help this but they are still trying to get the sale by letting me proceed and order. So I’ll proceed anyway and order my phone.

This is an important step as these make up three of the four factors I highlighted earlier that were important in my process. Let’s see how Vodafone presents this information to me:

This is actually quite good in that it answers 3 out of 4 of my main buying factors on one interface. My only slight niggle here is that I’m not given the option to buy a white one. I think these aren’t available in the UK yet but still, if I’m dead set on getting a white iPhone then this could force me to go elsewhere looking for one.

Conversion rate improvement tip: Add a small pop up here to let users know that the white iPhone isn’t available in the UK anywhere. This will prevent users from going somewhere else in the hope of finding one.

I’ve also highlighted in red a subtle reassuring line from Vodafone which re-enforces that Vodafone are a good network to choose.

Also note that the call to action button is red, which stands out at the bottom of each option. Despite some opinion that red is a danger color, I think it works well here as its very easy to see and click on.

Conversion rate thumbs up: Adding the subtle reassuring that Vodafone are a reliable network as well as making the call to action buttons stand out.

Now this is where things get a little strange. The next screen asked me if I wanted any extras. Which is fine, but no thanks I just want my nice new shiny iPhone 4. So I tried to carry on, the checkout button on the right hand side (highlighted yellow below) wasn’t clickable. The actual checkout button that was clickable was below the fold.

As I said, I didn’t want any of these extras so I just found my way down the page to the checkout button and clicked it. I was then confused when presented with this screen:

Erm… what happened there?!

My first reaction (apart from surprise!) was to click the back button in my browser and try again. The same thing happened again though. So I went back two clicks to the tariff page and clicked on my chosen tariff again, from which I got something that looked a bit more promising:

Conversion Rate improvement Tip: Erm… make sure your site works! I’m sure this was just a bug on the Vodafone site, we made them aware of it and they have fixed the issue.

As you can see from the screenshot above, if it is working correctly, the page actually looks fine and has two checkout buttons which I’ve highlighted.

The next step is for me to review my basket:

Conversion rate improvement tip: Move the delivery details further up the page. My screen resolution very nearly cut this off, and this was one of my important factors. The text actually says “Our goal is to provide next day delivery.” OK, thats fine by me, next day is good—so tell me about it somewhere a bit more obvious.

Conversion rate thumbs up: The proceed to checkout button is nice and clear and they do a good job of showing the difference in the one-off costs and the monthly costs. The useful information box is also a nice feature to have integrated onto the page (highlighted in red above).

The final step before entering personal details is a small pop up which tells you which details you will need for checkout depending on being a pay as you go customer or pay monthly. This is as far as I’m going with this testing.

Overall, apart from the rather big bug I encountered, the process was quite good. As you will see, Vodafone are the only retailers who allow me to pre-order the phone which earns a big thumbs up.

Second up – O2

I expected a lot from O2—they have been the exclusive UK provider of the iPhone for a long time, and you’d expect them to have the process nailed by now. Unfortunately, it looks like they may have become a bit complacent.

The first step is great—I go to their homepage and there is a nice big advert for the new iPhone. Exactly what I was looking for:

Naturally, I click on this banner and proceed to the following page:

Whoa! Did the O2 web design team go on vacation when this page was put up?! Don’t get me wrong, I love simplicity in designing ecommerce sites, but I think this could be improved a lot. An overall theme for me in this process of analyzing O2′s iPhone purchase process was the inconsistency of the page design.

Anyway, what this page tells me is that the iPhone 4 isn’t available to buy online—what? Why? I can understand if it’s out of stock, but surely there is a way for me to pre-order it online as I could with Vodafone?

Doesn’t look like it. Instead I’m given two choices: sign up for updates to find out when it is back in stock online, or find my nearest O2 shop with stock. OK, I’ll give them a chance. I checked O2 shops for availability of the 16GB or 32GB in the whole of London. Not a single shop had them in stock. Again I can understand, but I want to pre-order one and get one as soon as they are available—which the website will not let me do.

They do get a thumbs up on one point though.

Conversion rate thumbs up: They have told me that the white iPhone isn’t available in the UK, so at least I’m aware of this and won’t go off to another retailer in search of one in the UK.

Conversion rate improvement tip: Let me order a phone in advance! Vodafone solved the issue of not having the phones in stock immediately, yes I could have still gone looking elsewhere but at least I was given the option of buying it.

Unfortunately, due to this rather big flaw, I can’t show the rest of the ordering process for buying the iPhone 4 on O2. In the interests of fairness and digging into their buying process, I selected the iPhone 3GS.

The first step is actually very simple and covers off two of my important factors which were memory and color. I’m also given the opportunity of buying online or at a store. Personally I’d rather not give a customer the option as I want them to order online now. Choosing to buy at an O2 store allows me to find a local shop, but I can’t buy and reserve it. They are relying on me to not get distracted from leaving the website to going to the shop – not a good idea as I’m very easily distracted!

Conversion rate thumbs up: Very simple to use and tells me clearly what type of phone I can choose in terms of color and memory.

Conversion rate improvement tip: Don’t give people the option of being distracted by buying offline. The user is already on your website and has got this far, so you should be trying to convert them to a paying customer now.

In the next step, the design of the page changes again, with the left hand navigation being removed. I’m not a big fan of this page as it isn’t overly user friendly. I think that the box telling me that the iPhone is in stock should be moved up the page and the call to action buttons made bigger. Also a friendly message saying “Your iPhone is in stock – now choose your tariff.”

As you see, the call to action buttons are tucked away at the bottom right hand corner of the screen. I actually had to scroll down to find them.

Conversion rate thumbs down: Call to action buttons should be clear and easily in the eye line of the user.

Conversion rate improvement tip: Add some personality to this page and improve it by telling the user their phone is in stock and can be with them very soon, then invite them to proceed to choosing their tariff.

On we go with the next step where I get a little confused as I’m asked two questions that I’ve already answered: what type of iPhone and color I want. These are highlighted in red. These sections are useless and all they have done is push the price tariff further down the page:

Conversion rate thumbs down: I really don’t think the options to choose color and type of iPhone are needed. I’ve already chosen these options so they are just distractions at this point.

Conversion rate improvement tip: Move the tariff table up the page and get rid of all the other stuff that is distracting the user at this point.

Next I’m taken to a page where I can select various extras. This page is actually quite good and if I don’t want any extras I can easily proceed to checkout.

Conversion rate thumbs up: Making it easy to proceed without choosing extras and a very clear call to action button taking me to the checkout.

The final step before registration allows me to review my purchase, overall thumbs up for this page as it has all the information I need to complete my purchase.

Conversion rate improvement tip: Add a checkout button to the bottom of the table as some users will have to scroll down to view the full package price.

That is about as far as I can go on O2 without entering loads of details about myself, none of which actually talk about a delivery date which is a bit disappointing. It hasn’t been mentioned at all so far in the process so I have no idea when I can expect to receive my iPhone.

Overall I was quite disappointed with O2. There was no consistency at all with site design and there seemed to be little attempt to convert me into a paying iPhone 4 customer online. Even getting me to pay online and collect in store would be an improvement.

Last up – Orange

I was a bit surprised when I arrived at the Orange homepage. I haven’t been to their website in quite a while but they seem to have turned more into a news and information portal than a mobile phone retailer.

There are some references to the iPhone 4 on the page which are highlighted in red below, but they’re not as obvious as on the O2 or Vodafone sites.

Interestingly enough, you are taken to different pages depending on which of these links you click. If you click on the text link on the left hand side, you are taken to this page:

This page actually does a good job in that it is quite simple and shows off the product beautifully.

Conversion rate thumbs up: The list of reasons why you should choose Orange over other retailers. Nice call to action as well with the orange buy iPhone button.

However, when you click on the buy iPhone button you go to the page which you’d have gone to if you’d clicked the link in the top right corner of the homepage. This begs the question, is the page above really necessary? Although it looks good and works well, could Orange afford to leave it out?

Lets take a look at the page you’d land on by clicking the buy iPhone button above or clicking the link in the top right corner of the homepage:

I really like this page. It covers some of the important factors in the buying process such as color, memory and tariff within a few clicks and on one interface.

Conversion rate thumbs up: Nice clear interface allowing me to choose important options on one page.

Conversion rate thumbs down: Let me pre-order online, the same reasons I highlighted above with O2. Surely this can be done?

To check an actual sales process, I’m going to choose the iPhone 3GS instead. The product I’m buying isn’t as important as learning from the process itself.

After I’ve selected the iPhone 3GS, I get a pop up with confirms my options. There isn’t really anything wrong with this but I feel it could be integrated into the following page, either in the sidebar or at the top. Also, the most common place to check your order is on the checkout page where you review your basket.

Conversion rate thumbs up: The checkout button is at the top which I can click on rather than scrolling past all the options that I don’t want and taking up more time.

Conversion rate thumbs down: Remove the pop up telling me what I’ve just selected and integrate it into another page somewhere. It is just another click in the process that isn’t totally necessary.

Following this page I can see what I’ve selected so far in my basket and I can choose delivery options. Unfortunately the delivery options are below the fold so I can’t include this in this screenshot.

Conversion rate thumbs up: Letting me know that the website is secure and including the various security logos on this page is excellent. I’m about to reach for my credit card, so having this security pointed out to me is a timely reminder that the website is safe to use.

Further down this page is the delivery options section which looks like this:

Conversion rate thumbs up: Nice and easy to use delivery options table and the re-enforcing of the security of the site by the inclusion of the logos at the bottom of the page as well.

Conversion rate thumbs down: I’m sure this page could be tightened up by a re-design so that I don’t have to scroll as far down the screen for the delivery options and the “next” button is a little small.

Overall I quite liked the process for Orange. They make things quite simple, include reasons to buy from them and enforce that they are safe and secure to buy from.

Key takeaways

So to sum up what we have learned from this, here are some quick tips on improving your checkout process.

• Test your website properly—small technical bugs can cost you money.
• If you want to push a key product, make it obvious on your homepage.
• Subtly enforce your selling point in the copy and headlines.
• Make calls to action clear.
• Don’t drive people offline to buy unless you absolutely must.
• If you want to up-sell extras, don’t force them on users and give them an easy way to carry on without them.
• Make sure all steps in the process necessary.
• Give a clear list of reasons why the user should buy from you.
• Keep pop-ups minimal.
• Enforce the security and persuade the user to trust your website.

Finally, for me, conversion rate optimization comes down to a simple process:

1. List the needs of your user and what is important to them.
2. List the objections of the user and what will stop them buying.
3. Satisfy the needs and answer their objections in your sales process.

I hope you’ve found my first Search Engine Land post useful. I’d welcome any feedback you have in the comments section below.