Ecommerce accounts for around 5% of all grocery shopping in the UK and is set to be worth around £7.5bn this year.

That figure is predicted to grow to just over £11bn by 2016, so it’s certainly a market that’s worthy of attention.

I only recently made my first online grocery order and wasn’t particularly enamoured with the user experience, so thought I’d trial the checkouts of the three big supermarkets – Sainsbury’s, Tesco and Asda – plus online-only retailer Ocado.

It’s worth noting that although Morrisons is one of the UK’s biggest grocery chains it still hasn’t launched an ecommerce site, though it does have an online wine store

Sainsbury’s

Sainsbury’s asks customers to enter their postcode upfront in order to ensure that it can actually deliver to their address, however full registration isn’t required until you enter the checkout process.

The minimum spend is £25, which is made clear while you’re shopping, but I feel that this detail could be made more obvious.

The same goes for the ‘Checkout’ CTA when you hit the minimum threshold, as it’s a tiny yellow button set against a yellow background.

This is a common theme through the checkout process – the CTAs are tiny, little things that don’t stand out or create any sense of urgency.

Bizarrely, it also asks where you first head of Sainsbury’s – surely nobody can remember that?

Sainsbury’s also makes a mess of the postcode lookup tool, as once you’ve selected your address from the dropdown menu it doesn’t automatically populate the fields as one would expect. Instead you have to then click a ‘Go’ button next to the dropdown menu, which is a particularly vague CTA.

I didn’t notice this button so when I tried to go to the next screen I was hit with an error message and had to re-enter my address.

On the final checkout page the same problems arise. The ‘Please book a delivery slot’ CTA is presented as an easy-to-miss text link and the ‘Continue shopping’ option is actually bigger than the ‘Send order’ CTA.

Furthermore, it says that as my order is less than £40 delivery will cost £6.95, then when you go to the page to select your delivery slot the prices actually range from as little as £2.99 up to £5.99. Which is it?

On the plus side, you can specify an hour-long delivery window from any time between 9am and 11pm. 

But while the usability isn’t great, Sainsbury’s does do a good job of upselling items. It had a multibuy offer on one of the mince products that I had in my basket, so suggested that I add one more item to take advantage of the discount.

Similarly there were discount offers for asparagus, ice cream and Ryvita present on the checkout page.

Tesco

Rather than just checking your postcode, Tesco requires you to register all your personal information before you can even begin shopping.

Personally I find this to be quite frustrating and at least if you put it at the end of the shopping process then the customer might be put off abandoning their purchase as they’ve already spent time filling their basket.

It’s made worse by the sheer size of the form. Though Tesco only needs your name, address and a password in my browser there was a huge amount of small text and white space, which makes the form seem quite daunting.

Furthermore, in an effort to make the site more accessible Tesco allows you to choose a viewing profile based on your browser capabilities.

It’s a good idea in theory, but it also means that it forces everyone to choose whether they want JavaScript or hover-over boxes, and I’m fairly certain that a majority of people won’t know what that means.

And like Sainsbury’s, Tesco has tiny CTAs and asks how you heard about the company, with one of the answers being ‘CD-Rom.’

But Tesco differs from Sainsbury’s in that it has no minimum spend so I was able to place an order for just a few boxes of cereal.

The aesthetics also improve greatly following the initial registration page so the fonts are easier to read and CTAs actually stand out.

Delivery is available in any hour-long slot between 7am and 11pm with costs ranging from £3 to £6.

Overall Tesco’s checkout is more akin to what you’d expect from an ecommerce site than Sainsbury’s. For example it has a progress bar and blue CTAs that stand out from the rest of the page.

However it doesn’t enclose the checkout nor does it accept PayPal, so there are still a number of improvements that it could make to improve the UX.

Asda

Asda also requires customers to register upfront but its form is far less text-heavy than Tesco’s so doesn’t appear as daunting.

It uses a postcode lookup tool to speed up the process, but on the downside it doesn’t let you know that it’s compulsory to enter a phone number, which led to me being shown an error message.

Asda has a minimum spend of £25 which is made clear in tiny text below the ‘Checkout’ CTA. This is a really important criteria so I don’t know why supermarkets choose to spell it out in such small fonts.

On the plus side, Asda probably has the simplest checkout as it encloses the process so you aren’t distracted by other options.

It also has a progress bar and decent CTAs that are the brightest feature on the screen.

The delivery options don’t quite match up to the other retailers though, as the delivery slots are two hours long and are only available between 11am and 10pm. Delivery costs range from £3 to £5.

Ocado

When registering with Ocado it tries to push you towards using a Facebook login for some reason, selling the benefits of a social login while almost concealing the ability to sign up using an email address.

Even if you choose the email option the next page still tries to get you to sign up using Facebook, which is actually quite annoying.

Ocado’s minimum order is a whopping £40, but as it’s all Waitrose food it shouldn’t be a problem reaching that threshold…

The design is far more what you would expect from an ecommerce site, with large buttons, a simple layout and a big ‘Checkout’ CTA in the top right-hand corner.

However it only uses images to display the products in your trolley, which lacks the detail of having a list of all the items.

Elements of Ocado’s checkout make it the cleanest and most user-friendly of the sites I’ve looked at, but it is severely let down by its failure to quarantine the process and the amount of upselling it carries out.

Once you’ve booked the delivery slot you have to go through about five other pages of product options and flash sales before you get to the payment screen.

Also, the ‘Continue’ button appears in a pop-up at the bottom of the screen so it’s easy to be distracted by all the other options and the progress bar counts seven separate stages in the checkout process.

On the plus side, it manages to out-perform its rivals by offering free delivery for most of the hour-long time slots, though others cost either 49p or 99p.

Ocado also lets you know when it already has orders planned in your area so you can help your green credentials by saving on fuel. 

In conclusion…

The four retailers I looked at offered a surprisingly bad user experience, with Sainsbury’s arguably having the worst checkout process.

It failed to offer basic features such as a progress bar or decent CTAs, and the delivery costs were unclear.

The other retailers didn’t fair much better and tended to favour tiny fonts and miniature buttons. Furthermore, none of them accept alternative payment methods.

All had a few positive attributes – such as Asda’s enclosed checkout and Ocado’s CTAs – and kept form filling to a minimum, but in general they could all greatly improve the user experience.

Ocado in particular should be doing a better job as it is an online-only retailer, but I found its slightly unusual checkout design to be quite frustrating.

It’s also worth noting that the navigation and shopping experience was also quite poor on all the sites, although that’s something I’ll address in future posts.