A Simple Framework for Ecommerce Checkouts
Checkouts are usually the starting point for conversion optimisation. 100% of your website revenue flows through these pages.
If you run an ecommerce website, it’s high-priority. But how do you go about improving web pages that have very little room for content, messaging and persuasion?
Discover the five-part framework in this video…
Hey it’s Alan From Host Digital. So in this video I’m going to show you how to turn more of your website visitors into paying customers by optimizing the key area of any ecommerce website: your checkout. So I’ve got a five point framework for you here.
The first of these points is on the login page of your checkout process. This tends to be the first step on any checkout. And one of the main issues that a lot of ecommerce websites encounter is this concept of a ‘guest checkout’. It’s understandable that a lot of businesses want to capture user details, ergo they want a lot of users to create an account – but that’s actually contributing to friction. You’re seeing a lot of user abandonment when you do that. And these aren’t just my words, this isn’t an opinion, there are countless studies out there about how “one in four users abandon when they don’t have a guest checkout option” and so on and so forth.
There are countless studies out there about how “one in four users abandon when they don’t have a guest checkout option”.
So by not having a guest check option, you’re contributing to abandonment, and you’re going to see your overall website online sales decline.
So here’s a well-known retailer here in the UK, that does not offer a guest login option. So what’s happening here is even if I select “I am a new user”, I’ve actually got to fill in all of these details in order to proceed with my purchase, which is really, really annoying, and that can contribute to abandonment.
Here’s another example with French Connection. In this case, they do have the guest checkout option. And what they’ve done here is they’ve put the “sign-in” option first. And usually, most of your users – and this is going to be the case for your business – most of you users, are not existing customers. They want to check out as a guest. So this needs to be flipped over. The primary option needs to be “checkout as a guest”. The second option needs to be “sign in”. And the reason this is so important is because of the continued popularity of mobile checkouts. So on a desktop it doesn’t matter quite so much as you can see here on my screen but in a mobile environment if I’m using my iPhone, if I’m using my Samsung device, whatever it is, I’m going to see one option vertically stacked on top of the other. And that can be really, really important with guest checkout because if you put it second it goes below the fold. A lot of people will miss it. I’ve seen this countless times in usability studies in the past, where users start signing in accidentally when they’re actually meaning to ‘create an account’ or ‘checkout as a guest’, but they just don’t see that option because ‘sign in’ is right there at the top of the mobile experience. So that’s the first point on this five point framework: guest checkout option handling.
And the second point is ‘Smart Upsells’. This is a really great opportunity at the basket page level to increase your average order value. So you’re increasing revenue for the overall website – not by getting more people to buy – but by getting people to spend more when they do so. So I’m talking about recommendation engines, I’m talking about things like ‘complete the look’ or ‘people who are interested in this also bought this’ or ‘you might also like’ or ‘we recommend’, etc. There are various different spins on how to do a recommendations engine, but the idea is to add something in the basket at the last moment just before check out. I don’t mean to pick on Jigsaw in this particular training video, but in this case I’m on the basket page- there’s no option on this page, as you can see, to add another item to my basket and that’s a missed opportunity.
I can juxtapose this with another clothing retailer. This is the basket page for Hawes & Curtis – a well-known shirt-maker and suit-maker. If I scroll down this page, what you’ll notice is I’ve added to my basket a shirt for men, a shirt for women and another shirt for men. What do I get recommended by Hawes & Curtis? ‘You may also like’… a shirt for guys, a shirt for guys, a shirt for women, and another shirt. So the recommendations engine there is on point. It’s trying to match what I’ve added to my basket with other items of clothing that might cause me to increase my average order value and add further items to cart. So that’s the second point: recommendations engine and smart upselling.
With recommendation engines you’re increasing revenue for the overall website – not by getting more people to buy – but by getting people to spend more when they do so.
Inline Error Validation
So the third point on this a five-part framework for the checkout optimisation is Inline Error Validation. Now this is a technique that applies specifically to the forms that appear on your checkout experience. So remember how many forms you get on a checkout experience: delivery details, billing details, payment details, etc. There’s a lot of manual entry – data entry – on the part of the user, which can contribute a lot to friction and user abandonment. Especially if that form is really, really difficult to complete. So one way of signposting a user through that process is by giving really, really logical, helpful error messages if they stuff things up somewhere on the form completion process. So let me explain what I mean: in “email address”, I’ve entered an incorrect email address just there’s a full stop just for the “@”. By clicking out the field I’ve triggered inline error validation and I’m getting this “please enter a valid email address” message, which is really, really helpful because it’s a message that’s appeared ‘in the moment’ just as I was filling in that form but also in close proximity to the form field as well. So that’s the trick. That’s the best practice to inline error validation. Remember that the alternative to that is filling in the form, clicking on this green button, only to see the page reload and getting loads of error messages at the top and bottom of the page which aren’t really contextual to the form fields that I’ve stuffed up. So it’s a lot easier for me to course-correct and complete a form accurately when I’m getting inline error validation.
Make it easy for users to course-correct and complete a form accurately by deploying inline error validation with a solid rules-based logic.
In terms of best practices for inline error validation, do ensure that your rules logic behind what triggers that error is conducive to the specific form fields. So let me explain what I mean. I’m filling in, say “first name” and clearly a name that comprises a “111” is not a first name. So that should trigger an error message. And you can see in this case it has not – I think it’s the Paperchase website I’m on right now. They haven’t written into their rules logic “if this field contains a number, don’t accept it”. It’s a really simple example. I think I’ve got another example, yeah on the “telephone number”, conversely, if I enter letters, I should get an error message because obviously a telephone number should only comprise of numbers. So that’s it. So let’s move on to the fourth point.
The fourth part of the checkout framework is form cutting. This is very much in line with what we talked about just before about error validation. With form cutting, we’re essentially removing as many form fields as possible if they’re not necessary, if they’re not required, if they’re not something that the business uses or isn’t essentially required for the user to complete the process. So Paperchase is another good example. And again, I don’t want to pick on this particular business, but I wonder if “middle name and initial” is indeed a requirement for completing the form. It doesn’t feel that it’s something that business is going to be using for wider marketing purposes. It doesn’t feel that it’s something that’s going to be helpful for address delivery or postal delivery, etc. So can this form field be removed? Another example here is “company”, can that be removed? Is that required?
Do you really need all the form information that you’re requesting from the user? It’s a trade-off between data collection and form abandonment.
Not in this example, but on many other websites I see the “county” field. Not “country” but “county”. In the UK, the Royal Mail has not used “county” (e.g. Surrey, Sussex, Middlesex, whatever it is) since 1996 in order to deliver a letter or a package. So if they don’t need it, if Royal Mail doesn’t need it, you don’t need it. So don’t put “county” there as a form field, right? So that’s the fourth point on this checkout framework and checklist. Reduce form fields. Make it as lean and mean as possible.
Let’s talk about the fifth and final point on this checklist for checkout optimisation. And this relates to technical QA. So ‘QA’ stands for ‘quality assurance’. This essentially involves walking through the user journey, the entire checkout journey, on different devices, in different browsers, in order to try and find technical bugs. So I recommend this not be you that does this. It should be a QA team, some kind of specialist whomever it might be, walking through the checkout journey multiple times on multiple different device/browser experiences in order to trigger errors. So what we’re looking for is broken stuff, things that don’t work, things that are tripping up users. So a good example here is – I’m here on the Hawes & Curtis website – and I started filling in my details. Everything looks fine, right? But what happens when I start entering my address is it’s giving me an “auto suggest” – as you can see here – it’s expecting me to click on an “auto suggest”. If I don’t do that, imagine I just fill in the rest of my address details like this, and then I click out. What’s actually happened is I’ve just filled in my details, everything looks good, I just didn’t do what the system wanted me to do which was to click on “auto suggest”. So when I click on “continue”, what I actually get is a page refresh and a bunch of errors, right? This is an example of a technical bug. It’s not something that is really wrong with the website but it’s tripping a lot of people up. So as a user, I’m scrolling down here and I’m unable to find what these error messages are referring to: “address 1” field, “town” or “city”, “postcode”, etc., I don’t see any of these on the form, because it’s actually wanting me to enter my address manually. So these are the little bugs that can really trip people up and stop people from abandoning. You usually find these bugs particularly impact the mobile experience.
How do you go about QA? How do you go out technical QA? Well, the first way, as I said, is just to walk through the whole checkout experience yourself. A better way is to recruit a team; a lot of people these days are using crowdtesting. So I’m thinking of companies like BugFinders (which has since rebranded) or Test.io or TestBirds . There are lots of crowdtesting organisations out there that will enable you to walk through the process – or rather they’ll walk through it for you – and basically break the site and come back to you with a list of bugs that you can then fix.
Remember, bug finding is actually the hard part. Fixing the bugs is usually pretty darn easy. It tends to be low hanging fruit.
Work with a QA team to walk through the user journey and break stuff. Finding issues is much harder than actually fixing them.
There is another way to shortcut and fast forward the whole process. And that’s by using tools like Google Analytics to understand which device experiences people are really having difficulty with. So if you create super segments within Google Analytics e.g. iPhone 6+ users using safari are having difficulty on step three – if you can be that specific with your super segments then you can essentially pick up that device and see what happens when you try and do it. So by honing in on the issue using Google Analytics and super segments, you can really start to turbocharge your QA by essentially laser-focusing on the device-browser experiences that are creating the biggest issues. And that’s point number five.
So that’s your five five-part framework for optimising your checkout journey. Hit me up with any comments, questions, links below somewhere around this video. I’m happy to help. I’d love to offer my 10 cents worth. And if you work on or manage an ecommerce website, get in touch, I’d be happy to discuss your problems, your challenges with YOUR checkout journey or indeed the wider ecommerce set up to maximise those conversion opportunities. Till next time.