ecommerce shopping

Conversion Rate Increase from Better Checkout Design

Last week we filled you in on some updated abandoned cart statistics fresh from Baymard’s September 2016 Checkout Usability report. So based on this, we’ve decided to remind you of the reasons people leave and provide you with the solutions to them thereafter. Let’s get this sorted once and for all!

Reason 1: Shipping, Fees and Taxes Too High

The top reason (61%) that consumers leave according to the report are that costs are too high, such as shipping, taxes and fees. So while we can’t just go and lower taxes for you, what we suggest is:

Solution: Transparency

Almost 1 in 4 (24%) are unable to see or calculate the costs of the order up front so they abandon the purchase. Be as transparent as possible about extra costs throughout the checkout process. Since a lot of people leave due to unexpected costs, we suggest offering a cost calculator – somewhere on your site, preferably on the product page. This is a good way to be entirely up front and there’s no nasty surprises to drive people away later on. If you’re not able to provide a clear overview of the costs of shipping or fees – they’ll leave you. Make sure that you state the terms of purchase in an easy to understand format before a user adds a product to their cart.

When we talk about ‘natural causes’, or when it comes to ‘the researchers’, if you have a cost calculator then once they’ve calculated the costs, why not give them a time-sensitive offer to convert those ‘researchers’ straight away. Remember that they’re still only researching, so by saying something like “Get 40% off shipping costs if you finish this order within 10 minutes” is a decent incentive to abandon their search and make the purchase.

Solution: Control

ReTransfreight suggests that when people order a parcel online through traditional services like USPS or FedEx, they’re able to see where their package is at every stage of the process, so they’re increasingly expecting the same level of detail from you. An eCommerce site that can provide accurate and reliable status updates will be more trusted by consumers. A customer likes the feeling of feeling control, so options such as “special delivery instructions” such as the ability to reschedule a late delivery or create a delivery window improve their shipping experience.
Armando at Practical eCommerce has a few tips in agreement when it comes to customer shipping experience:

– Provide an estimated delivery date
– Double up on shipping notifications
– Offer SMS updates
– Provide many shipping options
– Streamline processing
– Offer reliable, helpful online tracking information

Solution: Good Customer Experience

Free shipping continues to be a preferred option when checking out online, but it’s not the only valued option. Seeing the estimated delivery date and shipping costs early in the process are incredibly important sure, but nowadays there’s more to the online shopping experience and, in actual fact, consumers are willing to pay a nominal fee to get your product faster if given the option. Offer different delivery options, with different costs.

Reason 2: Mandatory Account Creation

mandatory account creation




Over a third (35%) of consumers leave a website because it demands they create an account in order to complete their purchase.

Solution: Just Don’t Do It

This is quite simple. Just don’t demand they create an account. You don’t need to do this with consumers. Allow them the option to ‘checkout as a guest’ and make a point of making this a prominent option.

eConsultancy back us up on this one: “Forcing users to register their details before they checkout is a quick way to lower your conversion rate. Once a customer is ready to buy, they don’t want to have to fill out pages and pages of personal details and create an account before they can make a purchase.” In fact, ASOS managed to halve its abandonment by getting rid of this exasperating feature:

mandatory account creation

Is there ever a more stressful sight, especially when you’ve got a time limit on next day delivery or the stock is low – can you imagine?

Just ask for their email address in one of the checkout fields – you’ll need it anyway to give them updates on their shipping. Other options can include logging in through Facebook – which is essentially only a two step process. Don’t irritate consumers by making them sign up and commit to you just to purchase from you. That being said, even if you do force them to make an account and they do it, if they ever come back there’s a high chance they won’t remember their login details anyway.

There’s good and bad on both sides though. If you insist on making them register, offer them an incentive – display the benefits of signing up, like Walmart:

madatory account creation

walmart checkout

Reason 3: Checkout Too Complicated

ecommerce checkout



27% of consumers believe the checkout process is too long or too complicated. Consumers get frustrated with too many keystrokes during checkout. The solution here is to make your checkout as simple, and as short as possible.

Solution: Less Form Fields

You should make your checkout frictionless and quick, so try integrating advanced checkout automation tools, to automatically fill in fields. We said in our first blog post “The study shows that an ideal checkout flow can be reduced all the way down to 12 form elements. (7 form fields, 2 drop-downs, 2 check boxes and 1 radio button interface).” So we suggest using the fewest amount of fields that you can get away with. If you need to provide more, for example the billing/delivery address fields, if the billing address is the same as the delivery address, offer the option for users to click “same as delivery” to automatically fill it in instead of making them repeat themselves.

If they are automated, the user’s mobile or desktop may auto correct addresses, but advanced address verification can solve this. Or you could consider only offering the option to type in their postcode and they can pick their address from a dropdown menu to avoid errors.

Solution: Widely Accepted Payments

If users have no way of paying you, they simply can’t buy from you. Accepting a wide range of payment methods is a sure fire way of making sure consumers can send money your way. The paradox with this is, when presenting the user with a bunch of payment methods it can actually add complexity to the checkout process, so you need to design it carefully. So how do you offer choice without triggering choice paralysis?

Baymard have observed during their usability studies that radio buttons placed far apart cause great confusion among test subjects – that’s when they’re not being completely overlooked. The subjects simply lack the context to understand the implications of the radio button and often didn’t activate it, even as they began filling out associated fields beside it. Proximity is key to making radio buttons user friendly. “The options must be placed next to one another so the user perceives them as a collection mutually exclusive of choices and can view and compare all the options without scrolling around the page”, say Baymard.

It’s absolutely critical that the ‘active’ payment method they have selected is completely obvious to the user. Here’s some examples of how not to do the payment options section:


bad checkout example


You can see here that they have 6 green ‘Apply’ buttons – one for each payment method, but there’s also two big red “Next: Review Order” buttons. So what do we click?


bad checkout example


Here we can see Avon have tried to solve the proximity issue, but they lump all the payment options together in a single bundle above the credit card fields. This just creates a further proximity issue because the credit card selections are now detached from the form.

Unfortunately there is no “right” design when it comes to accepting payment methods, just like the rest of your checkout design. But, while there isn’t one key solution, there are some key principles you should follow:

– Make it absolutely clear which option is currently selected – the user must never be in doubt about what payment method they’re currently using.
– Place the options in close proximity so the user can see all the available payment methods, and allow them to compare the options and see what’s available.
– Highlight the most important implications of each payment method. For example “1% fee when paying with American Express”, so the user can make an informed decision about the payment method they choose.
– Consider having a default selection to speed up form entry and reduce choice paralysis by nudging them towards a particular payment method.

Here are some examples of checkouts which follow these principles:


payment checkout example


Best Buy use a tabbed interface. Notice how all the options are placed in high proximity so they’re perceived as a collection and compare them to one another. The tabbed design also makes it super clear which option is currently selected.


good payment method example


An alternative to Best Buy can be found at blue Nile, where an entire checkout step is dedicated to selecting a payment method. You can see there’s plenty of space to explain the implications of each also. Very clear. It’s an extra step, and the less of those the better, but this could be worth it.

TL;DR – Make sure you support a wide range of payment options and possibly add a few options to choose between. Then reduce checkout friction with a payment method design that ensures the payment methods are close in proximity and are completely clear to select from – consider using a default payment option too.

Reason 4: Website Errors

22% of users experience website errors when using your eCommerce site, so how can we reduce those errors? We suppose it all depends on how well your design has been built but most errors may occur with payments, so let’s tackle what we can:

Solution: Minimising Payment Errors

In bricks-and-mortar stores your customer simply slips in their card, enters their pin and the purchase is complete. It’s a very different story online though. They have to enter in their card details manually, and this opens the opportunity not only for a typo to creep in, but also for the customer to select the wrong option, which leads to errors such as declined authorisation and possibly lost sales. There’s a few simple procedures you can implement to minimise such issues. While you can’t control the information that they enter, you can limit confusion by providing guidance and correcting the errors before you request authorisation:

Card Account Number

This account number is not only unique, but it also contains info that allows you to check its validity. Request that customers provide both the account number and the card number and ensure they match.

– Request that they select their card’s type (Visa, Visa Debit, etc) before they enter the card number.
– Verify the validity of the provided information by comparing the selected card type and the first digit of the provided card number. The first digit of every payment card identifies its type. Unibulmer Merchant Services provide a table of these numbers.
– Display an error message if there’s a mismatch between the selected card type and the account number and request that they re-enter the data.
– Use the Mod 10 algorithm (Luhn algorithm). This is used to validate various identification numbers and it can be used specifically to validate credit card numbers, where it detects all single-digit errors as well as almost all transpositions of adjacent digits.
– Allow customers to enter card account numbers with or without hyphens or with or without spaces between digits.

Expiration Date

Always request that customers provide their card’s expiration date. You can either provide a blank field for them to enter the information, or allow them to choose from a drop down menu. Make sure that you don’t provide a default month or year to prevent them from just running with it and creating another error or declined transaction.

Reason 5: They Don’t Trust You

trust signs ecommerce



Sorry to be the bearer of bad news, but there’s a chance they’re getting cold feet because they don’t trust you with their credit card information. Now, if you don’t remember us writing about this before, we created The Ultimate Guide to Creating Your eCommerce Checkout, and in this guide we talk about purchase anxiety and the following ways that you can instill confidence in your customer:
– Address customer concerns
– Fix page load times
– Add recognised trust signs
– Use coupons appropriately
– Add a chat widget

We won’t repeat ourselves, so go on and check out that blog post – it’s called an ultimate guide for a reason.

Reason 6: The Returns Policy Isn’t Good Enough

ecommerce returns policy



It might be only 10% of the respondents leaving your checkout because of this, but it’s still worth talking about. Mark Hayes at Shopify suggests 9 great tips on creating a great eCommerce returns policy, but here’s the 4 we thought were most important to you:

1. No Sales Are Final – There’s not many stores on the high street that don’t offer a returns policy and we think eCommerce should be no different. Sure, you should stand behind your product, but if a customer doesn’t like it – don’t make it difficult for them to return it, as they probably won’t order from you again. There’s also something a bit suspicious about the term ‘no returns’.
2. Prevent the Return People return items when they don’t reach the expectations they had of them. To solve this, make sure you have your product photography totally on point. Our man Sebastian has written two great guides for you to check out with absolutely everything you need to know on getting your photography right, and also original. Making advertisement imagery for your items accurate and appealing can do a lot to make the expectations of your products realistic, and therefore minimising returns.
3. Time Frame – It’s normal to create specific time frames to accept returns. You don’t want to accept a return too late, so you need to define how long the customer has to make up their mind. 30, 60 or 90 days are acceptable. You should have a separate time frame for damaged or malfunctioning products.
4.Exchange Credit or Cash – In your terms, state whether the customer can expect to get store credit, enjoy a cash return or exchange the item. You shouldn’t feel pressured to offer “full-refund, no questions asked”. In the event of a malfunctioning or damaged item, make every effort to replace the item or give a full refund. We wrote about returns policies on our blog.

We have a wide variety of cart abandonment resources, so if you’re looking for more then check out our conversion optimisation blog posts here. 

Get these in depth guides hot off the press before anyone by signing up to our mailing list. We won’t annoy you, promise.

You'll find her incanting spirits from the upside down, or chasing her cats around town.