You’ve spent a chunk of your marketing budget attracting shoppers to your online store, and maybe you even hired someone to do the marketing for you.

You’ve designed a sleek website, the copywriting on your product pages is SEO-optimised, and you’ve invested in professional photography all in an effort to get the shopper to click the ‘buy’ button. And they have!

The next step, and arguably one of the most important ones, is to get them all the way through the checkout process, converting shopper into customer.

There are lots of potential hurdles in the checkout process that can lead to shoppers abandoning their purchases, and lots of things you as a retailer can do to reduce friction (in fact we covered off 12 of them in this blog post). But two key things that impact conversions are the design and usability of the checkout.

In this post, we will delve into some of the reasons why people abandon carts, the relationship between checkout design and cart abandonment, and how we’ve redesigned Neto’s checkout to help overcome this.

Why Do Shoppers Abandon Carts?

Before we talk about design, we first need to understand the user, or their ‘intent’ in shopping online. What does the user want? What is the user trying to do? What is stopping them from achieving their goals?

Leaders in ecommerce usability testing, The Baymard Institution, found that the average shopping cart abandonment rate is 68.6%. This means that for every three online shoppers who view and add your products to their carts, two won’t go through with the purchase. And these are the main reasons why:

• 59% – Just browsing/not ready to buy
• 46.5% Too high extra costs
• 35% – The site wanted me to create an account
• 27% – Too long/complicated checkout process
• 24% – Couldn’t see/ calculator total order cost up-front
• 22% – Website had errors/crashed
• 18% – Didn’t trust the site with credit card information
• 10% – Delivery was too slow
• 8% – There weren’t enough payment options
• 5% – The credit card was declined

| Related Reading: Ecommerce Abandoned Cart Recovery [3 Email Templates]

Checkout Design and Cart Abandonment

While the design of a checkout, specifically the User Interface (UI) and User Experience (UX), can go a long way to coax shoppers to complete their purchase, it can’t do everything!

The number one reason Baymard found for cart abandonment, “I was just browsing/not ready to buy”, unfortunately isn’t one that we can influence through checkout design, because it’s all about motivation and depends on their stage of the buyer’s journey (but tactics like remarketing can help!).

Similarly, design can’t address the issue of high extra costs; however, it’s important as a merchant to keep this factor top-of-mind when planning out your pricing. But if we move down past the first two reasons, we can see the remainder of the list is dominated with UX issues—a complicated checkout process, unexpected costs, low trust. And removing just one or two of these barriers could have a pretty substantial impact on conversions.

So that’s what we did here at Neto!

The New Neto Managed Checkout

To combat cart abandonment by providing an even smoother checkout experience for shoppers, we’re proud to announce our brand new Neto Managed Checkout design.

Neto Managed Checkout is the standard checkout for Neto merchants providing access to a variety of payment methods including eWAY Rapid, Braintree, Stripe, AfterPay, ZipPay and ZipMoney. This checkout automatically updates so there’s no need to manually code or install new features or updates, meaning zero extra work for our merchants.

Through a process of extensive research to understand why shoppers abandon carts and studying current trends and best practices for checkout design as well as analysis of our own data and merchants and of course testing, the new design is cleaner, simpler, and easier to use, ultimately working to improve conversions.

What This Means for Merchants

• Improved usability for your shoppers
• Access to new features
• Improved performance and page load time
• Ongoing upgrades

Since implementing the new Neto managed checkout we have experienced a 10 to 15% increase in conversions. Jonathan Alara, Bicycles Online.

What’s New in the Checkout?

In addition to improvements to the back-end framework of the checkout (which will increase performance and speed), we’ve made a whole lot of changes to the front-end of the checkout page design to enhance usability, plus we’ve added a bunch of new features.

Shorter Header

Research suggests that many users get distracted by the top row of information in the header. We’ve seen that some users erroneously click on the payment provider images (that aren’t hyperlinked), and abandon ship after becoming frustrated that the images don’t respond. The narrower header in the new checkout design removes unnecessary distractions, allowing the shopper’s focus to be redirected to the all-important checkout form fields.

You’ll also notice that the PayPal button remains in the header. This is because PayPal skips the standard checkout, so this gives shoppers a shortcut to jump easily to express PayPal checkout.

Vertical Label Design

We’ve moved the field labels from the left-hand-side to the top of each field which, according to research, makes it much easier for users to quickly understand what the label relates to. In fact, Baymard found during eye-tracking testing that users, on average, needed 39% more eye movements between the field and label when the label was placed to the left of a field versus above the field.

Hidden Optional Input fields

To directly combat the common ‘too long/complicated checkout process’ checkout issue we’ve hidden optional input fields behind links. One study found that optional fields made checkout steps 5-30% slower to complete, so in our new design, fields like ‘Company Name’ (that the majority of customers don’t need) are still easily accessible, but much less conspicuous.

Sticky Order Summary

We’ve added a ‘sticky’ order summary to the right hand side of the checkout, which means that the sidebar content will stay on screen at all times, following the user as they scroll and complete the checkout. This allows the user to review their order at any point, which is critical as different charges for shipping, taxes etc. can accumulate throughout the checkout process and change the grand total.

Shorter Form

In a typical checkout, a user has to complete 23 input elements, on average. Our new checkout has only 15 inputs, making the form a lot less intimidating and faster to complete!

Mobile-First

As you would know, being mobile-first is no longer just a nicety, it’s a necessity. Over half of all online searches are now via mobile, and you can bet your bottom dollar that figure will grow. So we’ve worked hard to make big improvements to the checkout experience for mobile users. The user can now see the start of the form straight away, and where desktop users have a sticky sidebar for their order summary, it displays at the bottom of the screen for mobile.

Subscribe to Newsletter

To help you grow your email list, we’ve added a subscribe to our newsletter input field to the checkout. This is an opt-in field (the box is not ticked by default), rather than an opt-out field, which is GDPR compliant.

Flexible Email Address Verification

It’s common for customers to make mistakes when inputting their email addresses, particularly when typing on a mobile device. The second email address field ‘confirm email address’ asks users to verify that their first input was correct, and the paste functionality is disabled to prevent users from copy-pasting an address that was incorrect in the first instance.

However, if you wish to have a simpler form, you can simply switch the second field off.

Localised Address Labelling

In the US post codes are zip codes, in the United Kingdom states are counties, and for a user not familiar with the terminology this can be confusing! That’s why we’ve localised address labelling so that the user will see the labels appropriate to their current location.

eWAY Secure Panel for Credit Card

Another major issue with ecommerce checkouts is that credit card numbers are prone to error, because entering in payment details is both stressful and complex. So, it’s our job to minimise friction in this step as best as we can. eWAY Secure Panel greatly improves the usability of the payment flow and fixes this issue in a number of ways:

• Credit card fields display within the main checkout flow rather than as a popup or modal, delivering a much more integrated experience and not taking the user away from the main page.
• The credit card field auto formats spacing and will remove any unnecessary spaces a user adds.
• Credit card validation checks to see if the credit card number entered by the user is plausible, and will give positive feedback to the user once it’s correct.
• Save credit card details: this provides returning customers a faster checkout experience.

Other Features

Many of the existing features and functionality from the current checkout that help users navigate through the checkout to increase conversion rates have been replicated in the redesign. Here’s a few of the most important ones.

• Closed design: a closed design approach reduces the number of elements shown to the user to allow them to focus on a single goal—completing the checkout process.
• Guest checkout option: forcing users to create an account is a direct cause for checkout abandonment, so we’ve kept the guest checkout option.
• User’s information is retained when errors occur: isn’t it frustrating when you’ve gone to the effort of filling out a form and when you hit submit, not only do you find you’ve made a mistake, but all your information disappears? I don’t know about you, but I’d be tempted to bail, so we’ve made sure a user’s information stays put, even when they make errors.
• Dynamic shipping and pricing: after entering in a postcode, only the relevant shipping methods and pricing will display.
• Invoice page: the payment confirmation page displays all the relevant information to show a customer that they’ve completed the checkout accurately: order ID, ordered items, estimated arrival date, shipping address.

What Next?

This isn’t the end for Managed Checkout. Now that we’ve done the groundwork to overhaul the fundamentals, we’ll be looking to continue to enhance and add new features to the checkout, to help you continue to increase conversions!

The new checkout will be rolled out to all Neto Managed Checkout customers from 5 September 2018.