Optimizing the Mobile Checkout Experience

Home/Insights/Optimizing the Mobile Checkout Experience

2019 was the year that mobile had its moment.

According to Adobe, 2019 was the year of the smartphone: Cyber Monday was the first day to see sales via smartphones break the $3 billion mark; a 200% increase versus Cyber Monday last year!

But with the holiday shopping rush behind us, we must remember a sobering statistic: while smartphones still drive more than half of all site visits, they have a significantly poorer conversion rate than their desktop counterpart–in some cases converting less than half as many visitors into customers. Because when it comes to sitting down and completing the checkout experience, customers still prefer more comfortable keyboards and larger screens. And this extreme lack of screen size/page overview has major implications on the user’s checkout experience and their ability to complete a purchase on mobile as they simply get “lost in the page” according to Baymard

Comscore  further outlined the top 5 reasons why mobile checkout conversions are so low:

  • 20.2% — security concerns
  • 19.6% — unclear product details
  • 19.6% — inability to open multiple browser tabs to compare
  • 19.3% — difficulty navigating
  • 18.6% — difficulty inputting information

Despite these obstacles, there is still a way to use small to your advantage. Below are 5 improvements you can make to optimize your mobile checkout experience.

Mobile Checkout Optimization Tip #1: Progress bar lets users know where they are in the checkout process

Without a large screen for context, a mobile customer who wants to complete a purchase may find themselves doubly distracted. This is why a well-designed progress bar keeps context in sight, letting customers know where they are and when the end is near. Focus on key milestones like “Personal Information”, “Payment” and “Confirmation” in the progress bar and place it at the top of the checkout screen. And since screen real estate is a premium, make sure the progress bar doesn’t take up too much space. People are hardwired to have and complete goals and a well-designed progress bar does just that. 

Mobile Checkout Optimization Tip #2: Visual reinforcements address security and privacy concerns

Payment security is a leading cause of mobile cart abandonment, with customers worried about hacking and viruses, which is amplified when they are out and about using public Wi-Fi. To alleviate these concerns, the first step is to make sure your checkout process is indeed technically secure as ecommerce security is crucial. 

Beyond how much they trust a particular brand, a customer’s perception of site security is largely determined by “gut feeling”. And what helps this gut feeling is based on how visually secure a page looks. With a small screen, visual reinforcements of your secure checkout process will counteract customer concerns and signal trust throughout the checkout process. 

According to Baymard, there is a toolbox of visuals that drives a user’s perceived level of security. Especially in the credit card section, visually encapsulating that section using borders, color, background and shading suggest that that section is more robust and secure. Another visual clue is the Site Seal which can range from SSL seals (seals which indicate browser encryption through a Secure Socket Layer (SSL), Trust seals (3rd party seals which indicate a verification of the site and business like Google and TRUSTe) and surprisingly, made up symbols including homemade icons like a secured padlock. And make sure these visual cues are placed close to the credit card fields to reinforce that this sensitive information is protected. Less is more with the visual enhancements because while they can improve conversions, too many visuals and seals can clutter the checkout process and distract the customer from completing their purchase. When in doubt, A/B test your assumptions. 

Mobile Checkout Optimization Tip #3: One-handed form completion

The long checkout forms typically seen on desktop will simply not work on mobile. First off, you will lose almost half of a limited screen size due to the mobile keyboard which means more keyboard errors. Secondly, nobody likes to fill out forms.

To design for the one hand checkout, each step of the mobile checkout should have as few fields as possible and instead of a long scroll form, “chunk” the checkout experience into a multi-step process that aligns with the progress bar (Tip #1). Use existing data about the customer to automatically fill fields; for example, default the billing address to the shipping address unless it is a gift. Use floating labels to make the form look shorter while also letting customers know that they are inputting the right data regardless of where they are in the checkout stage. Keyboards should include up and down arrows to transition quickly to next or previous fields and most importantly, make sure customers don’t have to refill a form for a second or third time. Guidance is here to help with a mobile checkout audit.

Optimizing the Mobile Checkout Experience

Mobile Checkout Optimization Tip #4: Lead with the guest checkout

There’s what you want: getting customers to create an account so you can build a database for cross-sell, up-sell and promotional activity. And there’s what your customers want: a simple checkout process especially if they have no intention of returning and simply want to complete a transaction in the moment. So forcing customers to register and create an account can be a major source of frustration that can cause them to abandon the checkout process all together.

Despite these two wants being at odds with each other, there is a compromise and that is to place the guest checkout option as the leading option above creating an account or signing into an account. This way, regardless of whether your user is a new or returning customer, they have the option to do what they want to do--which is to complete their transaction fast and in as few steps as possible. And the additional upside is that at the very end of the checkout process, you can now offer the user the option to register an account since they have already entered in all their information, or sign-in to their account so that the purchase is stored in their history if they are already a registered account user.

Mobile Checkout Optimization Tip #5: Include the one-click purchase option

We’ve all experienced the frustration of being on the go, not having a credit card handy and then being forced to enter in credit card details. The solution? One click checkout. One-click checkout reduces the opportunity for shoppers to review forms and orders, which can all lead to second guessing, hesitation, and cart abandonment.

Since 1999, Amazon held a patent on one-click online ordering technology which enables a shopper to complete a purchase with a single click by storing a shopper’s preferred payment and shipping information. But that patent expired in September of 2017 so there is simply no reason not to include this as an option as most ecommerce platforms enable one-click checkout including: 

And the bonus? One-click shopping is a great hook to encourage shoppers to register on your site. 

Customers care about their context and the context of a mobile user is different from a desktop user. Mobile users are likely on the go, have a certain product in mind, are easily distracted and are at the mercy of a small screen. So the best mobile checkout experience does one thing very well: it makes it extremely simple for people to spend money by giving them the simplified, convenient and secure checkout experience they want. 

Strip the mobile checkout experience to the very basics and imagine the impact to your business if you can boost mobile conversion by just 1%. 

Written by Guidance
Contact Guidance Today