5 Mobile Checkout Design Tips To Increase Your Cart Conversion

Guest post by Jeffrey Li

More people are shopping online than ever before since the rise of mobile commerce.

Unfortunately, mobile shoppers are impatient people. They don’t have the patience for long forms, long load times, or small, hyperlinked text. At the same time, they expect that when making a purchase, the experience is going to be seamless, convenient, and secure.

Because of this shift in shopping habits, you should prioritize optimizing your checkout experience so your customers don’t abandon their carts (which is something that 69.23% of people do).

This post shares some key areas you want to focus on optimizing so as to convert as many shoppers as possible in the unforgiving world of mobile commerce.

1. Security

Do you feel safe when shopping online with your smartphone? If not, then you aren’t alone.

A mere 23% of online shoppers believe their personal data is secure. This statistic reveals how important it is for online retailers to reassure their customers that measures are being taken to protect customer data. Keeping this in mind, here are some ways you can get your customers to trust you: 

Trustmarks

Trustmarks are indicators on websites used to reassure visitors that it’s a safe place to provide their information. One Trustmark you probably recognize is the SSL Certificate. This certificate is what makes the “https” part of URLs green and include a padlock icon, as a way of indicating the site is secure.

Below, you’ll find a list of trustmarks that you can use to up your game in the privacy department.

trustmarks

Image Source

Streamlined Experience

In order for retailers to establish trust, they should keep customers on the same domain for the entirety of their transactions.

Sending customers to a different website at any point during the checkout process is not a good move, as it diminishes customers’ trust and confidence in the site’s safety. As a result, customers may become more apprehensive about providing their data.

2. Payment

The landscape of ecommerce payments has changed vastly in the last few years. Formerly, there was payment by card. Now, there are more payment providers than most people can recall.

Providing customers with more payment options can be the metaphoric cure to checkout pains. Furthermore, it allows customers to stay laser-focused on their primary goal, which is completing their orders. Here are some things to consider in the new payment-processing ecosystem: 

Offer More Payment Options

Nowadays, customers have the ability to make purchases simply by tapping their smartphones on a card machine.

Retailers can benefit considerably by keeping up with the times and providing a wider array of payment options. As of December 17, 2017, only 5.3% of adult smartphone users have used Android Pay. This figure stands at 12.8% for Apple Pay. Clearly, usage of mobile wallets is not yet widespread (but there is still glory to be had in being an early adopter).

Here are some payment providers you can adapt to get ahead of the curve:

Expedited Payment

In 1999, Amazon patented its 1-click purchase process. This patent expired on September 12, 2017, opening the floodgate for competitors to reproduce the feature.

Innovations like 1-click ordering work because they drastically simplify processes otherwise considered bothersome. Striking a balance between convenience and security can be tough, however. But Amazon has proven that the upside potential is tremendous.

Whether it’s adding 1-click purchase or checking out with a fingerprint, consider what other ways you can help speed up the payment process for customers. 

add to cart payment buttons

Image Source

3. Make Better Forms

Filling out forms on a mobile device is not usually a positive experience. After all, screens are small, and it’s much easier to type things out with a physical keyboard. Given that, forms should be designed with this physical limitation in mind so as to make them as intuitive as possible.

Addresses

Most users don’t want to fill out the same information twice. People usually have the same billing and shipping addresses. So offering a checkbox that allows them to use their shipping address as their billing address can easily remedy this particular annoyance. This feature is often overlooked, however, even though it can save customers time and effort.

my billing information is the same as my shipping information

Image Source

Layout

With the small size of mobile screens, you should be mindful of how to best utilize the space. You can improve ease of navigation with these guidelines:

  1. Keep the form on one continuous column and avoid placing questions side-by-side. 
  2. Top align your labels to reduce the horizontal space required. 
  3. Use some form of zebra striping to visually contrast elements. 

Autocomplete

Autocomplete should be enabled in HTML so users can complete the form using the information they have historically entered. In Google Chrome, Autofill can automatically fill out forms based on users’ Autofill profiles.

Length

Keep your forms as short as possible. By asking for too much information, you run the risk of cart abandonment because, as previously mentioned, people don’t want to spend a lot of time filling out forms.

Moreover, adjusting the size of the fields to match the length of the expected response can result in better user experience.

Effective CTAs

There are numerous elements that go into creating an effective call-to-action. Here are some tips:

  1. Design the CTA to fit the space while making it easy for users to find it. This can be done by choosing a color that contrasts with the surroundings and making the CTA span the width of the page.
  2. Experiment with the copy so you can understand what attracts the most customers. For buttons, test multiple variations to figure out how to maximize your click-through rate.
  3. Position the CTA where visitors are most likely to see it. 
  4. Draw attention to the CTA by utilizing white space. 
  5. Limit the number of distractions (the checkout page is not the place for social media and any other external links, which could divert users’ attention). 

Inline Errors

It’s really annoying when you submit a form only to have the page reload and tell you there was an error that you have to scroll to find. This is even more annoying on a mobile device.

To combat this, replace your popup errors with floating errors to validate the data in real-time. This way, the error is apparent as soon as it’s made and users can easily make corrections.

inline errors

Image Source

4. Reducing Friction

Friction in this context refers to any obstacles that hinder users from completing the checkout process. Whenever there’s too much friction, visitors are more likely to bail. Here is a general set of pointers to help get your visitors from point A to point B as seamlessly as possible:

Order Summary

It should be incredibly easy for customers to review and modify their carts prior to checkout. This idea is similar to how servers at restaurants often recite your order back to you. They’re providing you with an opportunity to either confirm or modify your order.

Everlane’s order summary page is a nice and clean example of this. Notice how you can easily adjust the quantity or remove the item(s) from your cart. With just the essential information, customers can choose to place their orders.

order summary

Image Source

Guest Access

Unless you’re offering some extremely exclusive service, there’s no reason your customers should be required to sign up before checking out. This barrier can be eliminated by including a Guest Checkout option and delivering your value proposition for creating an account once the purchase is complete. 

guest access

Image Source

Promotion & Discount

You’ve probably experienced this before. You’re in the middle of checking out and you come across a discount field but you don’t have a code, so you leave the site to try and find one.  

You don’t want your visitors to do this, however, because it may discourage them from placing their orders if their search is unfruitful.

Avoid setting visitors up for disappointment. Hide the discount field by default or make it small enough so it can be found only if visitors are looking for it.

One-Handed Usage

Studies by UX matters have shown that 49% of people hold their phones with one hand. Therefore, you should design your app with one-handed usage in mind.

Consider how you can place vital app elements where they’re easily accessible. Another factor to consider is how scrolling might affect the shopping experience.

Below is a diagram showing the “zones” where elements are most comfortable to reach via a person’s thumb, depending on grip preference.

one-handed usage

Image Source

5. Progression

There’s something innately satisfying about completing a task. Specifically, it’s the release of certain neurotransmitters associated with positive feelings.

Taking this into account, representing the progression of the checkout flow contributes to improving the overall user experience and conversion rates. Here are some suggestions for getting this right: 

Progress Bar

In a survey conducted by Kissmetrics, 75 percent of survey respondents were in favor of including progress bars. Progress bars serve to eliminate uncertainty in mobile checkouts by helping users gauge the time required to complete the task.

This is a highly versatile feature that’s an asset to any checkout system. Using its tracking system, Domino’s Pizza does an exceptional job of keeping customers in the loop, all the way from placing their orders to pickup. 

progress bar

Image Source

Multiple Stages

Not only does segmenting your checkout into multiple stages help deliver information in a more digestible manner, it also acts as a safety measure against losing data if back navigation is accidentally triggered. These stages can also be used to create the progress bar.

Extras

Bonus round! Here are a couple of extra features you might consider implementing: 

Capture Email Addresses Early

By capturing email addresses at an early stage, you can use them to launch a cart abandonment campaign and potentially recover sales that would otherwise be lost.

You can take this even further by incentivizing users with a discount code of some sort. For example, you could offer users free shipping on their next order.

See how Squarespace offers abandoned cart recovery as an option in its website settings: 

capture email addresses early

Image Source

Alternate Way Out

If your customers decide they don’t wish to complete the purchase process, offer the option to add the items in their carts to a wish list. Who knows? They might reconsider in the future, and if they do, the items will be waiting for them.

alternate way out

Image Source

Save the Cart

To satisfy those customers who would rather complete their purchases using a computer as opposed to a smartphone, provide an option to finish their purchase later, either by saving or emailing the cart elsewhere. Integrate this with users’ accounts, if you have that option at your disposal.

save the cart

Image Source

Great! Now what?

In this post, we’ve gone through many different design patterns you can incorporate into your checkout flows. But if there’s no one-size-fits-all checkout system to maximize conversions, how do you know where to start?
The answer is simple: experiment!

While you probably won’t finish reading this and immediately modify your checkout system to comply with everything that’s been discussed, you can go about it methodically by A/B testing.

In its simplest form, A/B testing consists of running a controlled experiment with version A, the baseline, and version B, the variation. These experiments run simultaneously, and the resulting metrics are what allow you to make informed product decisions. You can learn more about A/B testing in our handy guide.

While it might take time, data-driven decision making is invaluable to any conversion tactic and ever-important in the world of complex user behavior.

Jeffrey LiAbout the author: Jeffrey Li is a student who has developed his expertise working in high-growth mobile startups such as Thanx, Ritual, and Flipp. Currently, he is at a YC Startup, Taplytics, as a Digital Marketing Intern. Outside of work, Jeffrey spends his time pursuing his passion for photography and filmmaking.