Building the perfect UX for mobile checkout that converts

The checkout flow is where the money is at.

Checkout is the most important part of your entire e-commerce experience because that is where all the work you’ve put into customer acquisition, education and retention actually converts to revenue and ROI. If your mobile checkout flow is bad — they don’t buy and there’s no ROI.

Most retailers are focused, rightly so, on improving cart abandonment rates. But it’s equally important to understand what happens earlier in the process, when more than one quarter of shoppers abandon a site during the checkout process.

Starting the checkout process is a greater commitment than simply adding items to the cart. Checkout abandonment happens after the purchase decision has been made, which means there’s something in the checkout process causing ready-to-buy customers to get frustrated and leave without making a purchase.

Optimizing the checkout process is a continuous undertaking that should always involve testing. This post examines best practices and UX flow based on the review of thousands of websites, extensive heat mapping studies, Commerce Cloud benchmarking data and industry statistics. Keep in mind, what works for one retailer may not work for another. A/B test your checkout updates to see how your customers react and the effect it has on your overall conversion rate and checkout funnel metrics.

Viewing the shopping cart

Give clarity of product, price and shipping charges details to the user. Product details: name, photo, color, quantity, size should be clearly displayed on the cart screen. Changing these details from the cart itself should be easy and simple. It should be easy and obvious to understand what’s in the cart and what’ is the final cost including shipping and taxes. There should be no surprise costs down the line that can make people abandon carts.

Give user control on the cart activity. It should be easy to make changes in the cart like update quantity, change color or remove products. This will reduce cognitive load as the user does not have to go back to product details page to make changes

Estimated delivery date should be mentioned on the cart screen. Give user an option to check the estimated date of delivery. This helps reduce anxiety as it gives a confirmation that the product is available and will reach the user well in time.

Here are the things to include when designing a shopping cart that results in conversion:

• Product photo
• Product name & price
• Ability to remove, save for later, change details like size and color
• Show total price- product price + shipping charges
• Option to check estimated date of delivery
• Clear call to action

Shopping cart display in which the user has clarity and control

Add “Save for later” feature to the shopping cart

Some users, based on experiences with competitor apps, might assume app uses persistent shopping carts in which their cart information will be stored, and upon returning to an empty cart, be too frustrated to even bother re-locating the products which results in poor conversion rate.

A “save for later” feature can reduce the number of cart abandonments and will enable shoppers to save items for a later purchase. Persistent shopping carts (persistent shopping carts save a customer’s cart contents across sessions) will allow customers to continue their shopping without the need to search for the desired product on their return. For example, if the user bookmarks a product on Monday by saving it to cart, and returns on Sunday to purchase, she doesn’t have to locate the product again. This is a nice customer service feature that can save sales.

The small screen size of mobile devices is a primary roadblock when it comes to mobile eCommerce. The Baymard Institute observed that over 61% of mobile users will often use their desktops to complete their purchase rather than their phone.

Here’s how to retain these customers:

1. Make the cart work as a wishlist by saving items added to the cart.
2. Create an option to allow shoppers to receive emails with saved items. Display reminders that they can use their desktop to finalize the purchase.

Save for later items which works as a wishlist

Delivery address form optimisation

Applying best practices for mobile forms is another consideration. It’s important that the UX design of an eCommerce app or site, while eliminating any confusion, allow users to complete forms as quickly as possible. Filling a long form is time-consuming and error-prone for any user.

To ease out the checkout process, users should be able to fill in the form quickly without making any errors. That said, every step in the checkout process must not only be concise and clear, but absolutely necessary. The form should asks for information that is required for a transaction.

Here are the best practices for mobile form usability:

• Limit number of input fields to reduce typing effort. Fewer input fields will generate a less loaded form and will improve the UX checkout flow.
• Indicate each required field clearly with an asterisk.
• Place form labels above the input field.Usability studies show that labels placed above fields are easier and faster to scan. Labels above the input fields also make localization easier because there is more space for longer translations.
• Match the text inputs with the appropriate keyboard. Display a dial-pad when inputting phone numbers and credit card digits, and a text-pad when inputting addresses and text. This will reduce user mistakes and accelerate form completion.
• Use shipping address as billing address. Allow the customer to use the same address for shipping and billing without additional typing. In the billing step, summarize shipping address as static, editable content. Make this option checked by default because typically, mobile users have the same billing and shipping address.
• Automatically advance each field up the screen when completed. Doing this will not obstruct any view of the incomplete fields.

Address form optimised for faster checkout

Use intelligent Auto-suggestion, Auto-detection, Address Lookup, and Errors

The main purpose behind auto-suggestion is to make it easier and faster for users to fill out forms.The lack of speedy performance is a major frustration for eCommerce shoppers and can badly affect conversion. Address assistance and autofill not only save time but also reduce errors. Use zip code lookup to autofill country, state and city. Address lookup and validation accelerate the checkout process by reducing user load and typing errors.

City and state auto-filled on entering the pin code. Address lookup makes it easier to search for locality.

Providing inline input validation for errors is also a best practice in mobile UX design. The lack of speedy performance is a major frustration for eCommerce shoppers. This can be helped by providing users live feedback on their progress (during checkout, for example), especially when they make an inadvertent mistake. This allows users to fix their mistakes immediately, which affects usability in a positive way.

Make the error messaging stand out by using thick red borders around form fields, iconography, italics and bold text. If the shopper skips a required field, display a message right away and take the user to the exact spot where problem is because they should not discover there’s a problem after they click the call to action.

Giving feedback to the user improves user experience

Allow users to checkout as Guest

Shop online, and you’re likely to come across the following choice: sign in or use the guest checkout.

Guest checkout is quick and convenient. Logging in requires more commitment — and (gasp) the sharing of your personal information. Most of the consumers abandon a checkout if they thought the site required account creation. Once you overcome the hurdle of getting customers to start a checkout, converting the sale becomes more important than collecting data. Customers prefer guest checkout, so make it easy for them to find, and place it first on the page.

Usability studies have found that over 60% of users had difficulty in finding the guest checkout option; ergo, the guest checkout option must be clearly visible and easy to access.

In order to decrease cart abandonment rates, opt for an easy, fast checkout process that doesn’t ask shoppers to register first.

Here are a few suggestions for an improved eCommerce checkout flow:

• Make guest checkout the most salient feature of the checkout options by placing it above the fold and above the options to sign in or create an account.
• When the sign-in fields are at the top of the page, the other options such as guest checkout can get pushed down the screen on mobile until they are no longer visible. This can create the illusion that an account is required to continue with checkout.
• In order to reduce anxiety and bounce rates, suggest that users log in or register after checkout if they have checked out as a guest.
• Even people who have an account forget passwords; in many cases, it will be easier for them to check out as guests than to recover their password on their mobile device.

Checkout as guest as the most prominent feature

Order summary in mobile layouts

The visual hierarchy in which the order summary is presented is very critical for a faster and smooth checkout and it should give user all the required information.

• Shipping address and user details should be present at the top of page with an option to change the delivery address.
• Display number of items in the cart and product details upfront. Hiding these details inside accordian will lead to an extra click and delays the checkout process.
• Subtotal, taxes, fees, discounts, and shipping charges should not be hidden to avoid unpleasant surprises later on.
• Any reward points should be auto-applied with an option to remove. This will give user motivation to complete the checkout process as discount is auto-applied.

Show discounts and total cost to avoid surprises later on

Easy payment on mobile

Entering credit-card details is labor-intensive, annoying, and, especially on mobile, error-prone. Mobile conversion rates are higher when retailers offer alternative payment options like PayTm and Google Pay. Not only did these services save users from the trouble of typing in their credit-card information, but they were also perceived as more secure and trustworthy than providing their credit-card number directly to the site.

Offer mobile-friendly payment options, but don’t overwhelm users with too many options. Recognizable third-party checkout options such as PayTm or Google pay can be helpful, but too many options can cause choice overload. For each payment option offered, make the distinction between each one clear. The most common checkout process should be the most prominent on the page, or listed first among the other options.

CTA is in active state until mode of payment is chosen

Show previously used cards for transaction above the fold under saved cards section. Users on the go may not always have their credit card handy. Providing them with the details of previously used cards where they only have to enter CVV will result in faster checkout.

Display of previously used cards fastens the checkout process

Boost customer confidence with messaging and trust icons. Display security or verification badges when user is on the payment screen . It helps to create a sense of trust and security during the mobile checkout flow.

Purchase confirmation

Purchase Confirmation is about letting the buyer know that the transaction has ended and a confirmation email has been sent out with an order summary.

Here are a few things to consider when designing a purchase confirmation page:

• Make it obvious that the purchase is completed by an image or illustration. A graphical illustration having a “check mark” as the prominent element of the illustration can give user a sense of achievement and task completion.
• Good customer service should be a take away. A customer service link is necessary next to the delivery date if user has any questions regarding the order or delivery date.
• Provide important information. Purchase details like products, price, quantity, total price and delivery should be mentioned as part of the order summary to reduce user anxiety.
• Provide payment confirmation. Mode of payment used plays a very important role as it informs the user that transaction has been done error free.
• Provide the next step by giving clear CTA. Confirmation page should not only provide information but also gives user an action that can be taken otherwise the user will feel lost. A CTA to track order can inform user of the next step that can be taken.

User will not feel lost after making the purchase if there is a clear CTA

Prototype

Here’s the link to prototype of the checkout flow https://marvelapp.com/3ebfh8h?emb=1

Welcome any suggestions you might have! If you liked this post, don’t forget to clap. Follow me here on medium, there’s plenty more coming soon. Get in touch at tripti.gupta9100@gmail.com