It’s easy to sabotage your own checkout. Here are some tips.

The story

My wife asked me to advise on which desktop computers the small firm she works for should buy. Amongst other sites I looked at was Dell, and I’ve covered some of the problems I had on their site in this post about comparing products. I also experimented with putting items in the cart to see what I could do, but found the process obscure and unhelpful, and gave up.

I did eventually buy a couple of computers from Mesh computers, although I nearly didn’t. Here’s why.

Starting off, I was looking for office machines. Here is the main navigation. Where would you look for office PCs?

Mesh main nav

Yep, that’s right, office PCs are in ‘Gaming PCs’.

Mesh Gaming navigation

Ah well. Maybe some customers think they don’t make business PCs, and go away.

In working through the options, I saved one configuration as a quote. After more work, I wanted to delete the quote. Here’s the error that I got.

Mesh error message

I have no idea what this means, other than it’s not letting me delete a quote. Here is the template that I’ve always used for error messages.

  • Tell the user what’s happened
  • Tell the user why it’s happened
  • Tell them what they can do about it

This message gets a fail.

Eventually I figured out the spec I wanted, and added it to the basket. I wanted to buy two of them. Here’s what you get in the basket.

Mesh basket

That ‘2’ in the ‘Quantity’ box was originally ‘1’. When I changed it to 2, nothing happened. When I then pressed ‘enter’, it took me to the next step in the process, but gave no indication as to whether I was buying 1 or 2, or what the total price was. So I stepped back again to this page. I then tried ‘Edit’, which took me back to the start of the purchase process, as if I wanted to edit the spec. I didn’t want that, so clicked the basket link in the main nav, and instead of taking me back to the page shown above, it took me to that next step that didn’t show what I was buying, and expected me to continue! I wasn’t going to do that.

I thought that surely there must be a way of getting an updated price. Eventually, I spotted the ‘update’ button, in the bottom left of the image below.

Mesh checkout

It’s in the wrong place, amidst a sea of identical blue buttons. It wouldn’t be hard to improve the design of this page to be more effective with better use of positioning and colouring. At the least, the main ‘continue this process’ button should be a different and standout colour, and ‘update’ should be next to the things that you can update. Or just make the page update automagically.

When I clicked the ‘edit’ link,  and went though the process, I noticed conflicting information about the configuration.

Mesh configuration

Although I had specified an Intel Core i5 processor, which is shown in the basket on the right, the Core i3 was selected in the configurator. I have no idea what would happen if I didn’t spot this and just continued. The configurator should be sensitive to context. On the first pass it should have the default values. Having returned from the basket, it should show my chosen values.

Having struggled through all this, I paid with Paypal. Here’s the screen asking me to confirm the purchase.

Mesh Paypal checkout

Firstly, who chose the colour scheme? It’s really hard to read, especially if you’re colour blind, like me.

Secondly, there’s no data. Just the price. There are field labels, but no data. The nervous amongst us would abandon at this point. I took it on trust and continued. Someone hasn’t bothered checking whether this part of the process is working properly.

Takeouts

I know from experience that there can be nooks and crannies of a site that the owners and designers rarely visit. This can happen especially for servicing or post-purchase paths, where a specific set of circumstance needs to be set up to trigger a given display. It can also be that the designers just don’t think of certain paths, or don’t think some paths are very important, and if they are not listening to feedback, they aren’t going to find out there’s an issue.

How could these problems have been identified by Mesh?

The only issue I’ve highlighted here that was an error, that would show up in error logs, is the inability to delete a quote, and the designer might well look at it, and think that the system is working as designed. nevertheless, it pays to check error logs, and address those which are happening frequently, or occur at key points.

An analysis of site metrics and paths might lead someone to think there’s an issue, if they see looping, such as when I was trying to update the price for two machines. Visual session replay can also be useful for this. Session replay is offered by a number of companies.

Many of these type of  problems are best found by talking to users, observing their use, and listening to feedback.

In terms of what you pay attention to, it’s not enough to focus on the ‘green’ path, where the customer finds what they want, and goes straight through checkout. You need to ask, at each stage, ‘what might the customer want to know about, or want to do, here’. That doesn’t mean that you have to cater for each circumstance, but it does mean that you have to think about it, and try to get data as to whether it matters or not. You might decide not to cater for an edge case, but if you have a lot of edge cases that you don’t address, then you still have a lot of annoyed customers.

Leave a Reply

Your email address will not be published. Required fields are marked *