Reach new heights with Magento 2
UX

Check out your checkout

Magento Checkout optimisation

We realise that optimising your ecommerce checkout can sometimes be a puzzle. It can often be hard to balance the need for gathering marketing data with the user experience (UX). As ecommerce is what we do best, we are here to help you make informed decisions on how to gain more conversions from your website whilst offering alternative solutions for customer relationship management that won't distract from a sale.

Before anything let's have a look at some statistics based on research published by the Baymard Institute:

  • 34% of adults abandoned their cart in Quarter 4 of 2018 when forced to create an account
  • 26% of users have abandoned purchases during the checkout flow solely because the checkout flow was too long or too complex
  • The average checkout flow contains ~23 form elements
  • 35% of adults would never give out their date of birth, 15% would never get out their phone number, and 11% would never disclose their gender

Some things we've discovered:

  • Discounts on checkout pages are distracting the user from the main goal and could potentially make the user look somewhere else
  • Checkouts with a lot of 'extras' usually need a lot of attention from our developers
  • Our customers often mistake their B2B purchasing flow experience with the online ecommerce (B2C) one

We have built a lot of checkouts and in this article, we are going to discuss how to make yours work for you!

But first, let's imagine that your website is a restaurant and the checkout is the "asking for the bill" moment...

The restaurant is good looking with delicious food and fancy beer. The waiter is funny and thoughtful, you feel great - the night is brilliant and you ask for the bill, which you are happy to pay and you're even thinking about tipping! What a great person you are! However, instead of paying the old way, the waiter brings you a form with fields that must be filled before they will consider taking your money. Not only is the form long but after the third field, the waiter is asking you if you have a voucher code. Then the waiter continues to bring you a list of their best wines in case you are interested. Just before finishing the whole form - the waiter interrupts you to ask if you would like to subscribe to their newsletter.

The reality is that a lot of users would rather not finish an order than try and navigate a difficult checkout/website. When dealing with online stores we can easily forget that this is shopping and get distracted from the basic customer service rules used by high street retailers. It's really important that we focus on how can we help the customer to purchase the product they need as smoothly as possible, avoiding any distractions in the checkout which could lead to payment hesitation and a loss of sale.

Let's start with discount codes on checkout pages.

Discounts vouchers are a great marketing tool, however, they distract the purchase flow. By looking at the numbers and following the click paths of each user, we noticed that sites with discounts/vouchers options on checkout pages are actually losing sales. We surmise the reasons for this as follows:

  • They distract the user from finishing the purchase
  • They can cause the user to overthink and ultimately second guess the decision

The whole point of discounts and vouchers is to get people to your website, to buy and potentially gain another loyal client! By having the discount field on the checkout page it does the opposite - it makes the user that doesn't have a discount code google one and potentially be attracted by the competitor's website.

By looking at the data and the behaviour behind every order, we have reached the conclusion that checkouts need to be the quickest step in the shopping experience. Users have spent a lot of time finding the right product, reading the reviews and checking all the specifications of the product, which is energy consuming, therefore, checkouts should be the part that gives the user that satisfaction "ooh yeah! In a minute I will own this!".

No discounts on the checkout page, but where?

Links! Links are superheroes in this case. You can include a discount code as part of the URL, for example /10-pounds-discount-for-superheroes. You could either target a group or be more exclusive. However, in a context of a campaign you can create landing pages or just send emails with the URL, that would automatically add the discount, you could use a popup/notification to let the user know that the discount has been applied to their future purchase. If you would like to know more about this, please let us know, we would love to have a conversation about this!

Guest checkout

People these days are not happy when they're asked to 'create an account' in order to buy something. Unless there's a clear benefit about it, but even then, you don't have to abuse the checkout page with it (eBay is now using guest checkouts, just saying!).

At this point, the healthiest approach would be to make it easier for the user. An ecommerce website is not a social platform, the main goal is for the user to be happy. How do you make the user happy? You help them to buy your product! Therefore, don't ask them to create an account in order to buy your product. Imagine going to a supermarket and not being able to do your shopping unless you created an account. That's what we call "bad user experience".

There are so many other ways to invite users to create an account, we can help you with that, but we strongly advise you to make the checkouts super simple.

From a UX point of view - having a guest checkout could actually make the user trust you more! The users who will eventually commit to creating an account are more loyal (will buy again and are more likely to subscribe to a newsletter) than the users who are forced to create an account in order to buy a product.

We noticed that, in a lot of cases, users have only logged into their account once and that's it. Data shows us that, users don't care that much about having an account, however, a lot of websites are investing a lot of effort and resources into building a lot of functionality behind the checkout, which, most likely won't make a difference for the user but it could potentially be bad user experience and that could mean losing an order and a customer.

With all this in mind we have concluded that when it comes to checkouts, less is more! Less unnecessary interactions help the customer to focus on finishing the purchase.

Asking for the right details

A pretty interface won't turn into revenue without a great user experience. That's why all the 'big guys' are investing a lot in UX. In our experience, we observed how a lot of sites were losing clients with a lot of products in their cart, because the checkout had a form with too many questions or fields to be filled.

We recommend to only ask for the necessary details. Sometimes clients forget the objectives of a checkout page - the main objective of a checkout page is for the user to complete the order, nothing more, nothing less.

Avoid asking on checkout page things like:

  • "Where did you hear about us?" (Google Analytics can provide most of this information)
  • "Would you like to sign up to our Newsletter?" (We strongly advise against this as it has nothing to do with the checkout process)
  • "Would you like to create an account?" (It will make sense to put this somewhere else, such as on 'Thank You' page where you can insert more information about why having an account has benefits.)
  • Any sensitive data that won't make any difference to you. If you are planning to give discounts for all the users on their birthday - that's great, you can even mention that, otherwise, asking for these details won't help the checkout process. Another example is asking for a gender when you don't really need to know.

PRO TIP: We recommend using auto-complete features (if you would like to know more don't hesitate to initiate a conversation with us about this). For example, we have discovered that customers really like using address lookups where inserting part of their address simply auto-populates the rest of the page.

Focus on error messages to help guide the customer in order to fix it quickly and finish the purchase. For example, if the email validation fails make sure you mention exactly that, not just 'oops! something went wrong'. This is something a lot of ecommerce sites are not paying attention to which leads to bad user experience. When the customer accidentally types something that doesn't successfully validate it's important to quickly help the user to identify the error for correction - this way the user won't 'disconnect' but will still be involved in the purchase flow.

Payments options

A clear way we have found to increase conversions is to use one-click payment methods such as Apple / Google Pay. Having a "Buy Now" button on your product page can completely circumvent the checkout process making the buying decision more impulsive.

We also recommend you use payment providers who integrate well with Magento, this will avoid any complications in the checkout. We can recommend stripe.com who are offering a simple pay as you go pricing with no setup fee, monthly fee, merchant fee or any hidden fees. Stripe also gives you the ability to enable Apple and Google Pay.

As we mentioned above, having the browsers' auto-complete features properly optimised is really important. Having this function means that when the user clicks on the card details fields the browser asks the user what saved bank details they would prefer to use for that particular transaction.

You could potentially save minutes for the customer from just applying these tips - minutes that mean the world to a user and ultimately lead to a sale and increased conversions!