Insights

How to Design A Better Checkout Experience

WTC&T

It’s believed that by 2023, 91 percent of the American population will be considered “online shoppers.” But, these 300 million digital customers have an unfortunate tendency to abandon their carts almost 70 percent of the time. Why the last-minute cold feet?

The most common checkout gripes heard by online retailers are:

  • “This takes too long.”
  • “Why can’t I continue to the next step?”
  • “I put in the wrong shipping address. How do I go back to fix it?”
  • “I finished checkout and entered the wrong information. Now I have to contact customer service to get this corrected.”
  • “I would have bought this but didn’t have my card on me to reference.”
  • “This is such a hassle on my device.”

In a world where online shopping is devouring the retail industry, users should have a seamless experience, especially where it matters most: during checkout. Both B2C and B2B brands have to take a cold, hard look at their checkout process to uncover where users are abandoning ship.

Three principals of an improved checkout design

What separates a good checkout experience from a poor one lies within the design. Our UX team has summed up three crucial design elements that can optimize the checkout process, and in turn, the entire brand experience.

MAKE IT FAST

Speed is the first step towards an improved checkout, which is affected by the actual form design and measured by eye-tracking. Take a look at Form 1; the user has a straight, simple path down. Whereas in Form 2, the user has to make their way horizontally across fields, then down a row, then across again, etc., taking more effort to complete. For instance, try locating the Apartment Number field in each of the forms. Which was easier? The optimal design follows a hierarchy of information listed vertically, with clear titles above input fields and subtitle copy within fields for further context.

how-to-design-a-better-checkout-experience-1-.png

KEEP IT TRANSPARENT

When optimizing for speed, the quickest path forward is the one with the least mistakes. However, mistakes are inevitable. The best way to avoid piling onto the problem is to provide direct feedback on how to correct the error. Form 1 iterates an ideal state to callout an error because it’s apparent and gives direction on how to fix the mistake; versus Form 2, which is ambiguous.

how-to-design-a-better-checkout-experience-2.png

Another way to clarify the checkout process is through positioning. Also known as a progress bar, this design feature shows users the steps it takes to complete checkout and where they are in that process. This information helps keep the user engaged and motivated while mitigating the frustrations of lengthy forms and questionnaires.

how-to-design-a-better-checkout-experience-3.png

REFLECT THE USER

Finally, you want to design an experience that caters to the user and their individual shopping habits. This requires user research, analytical tools, and auditing what saved profile information you may have about each shopper. The following questions can serve as a good starting point to better understand consumer behavior:

  1. How are audiences checking out? Are they using the designed flow, or sidestepping it with an integration? Example: Apple or Google Pay
  2. What are users leveraging most, desktop or mobile devices?
  3. When returning users checkout, what are some of their tendencies, and can these tendencies be translated into personalized content?

These answers will reveal valuable insights about how your customers shop. And these details, like device-type, will aid in making business decisions that impact the checkout experience, such as payment integrations.

IS THIS THE SAME FOR B2B?

It’s important to highlight the different checkout needs of a B2B shopper versus that of a B2C consumer. A prime example is the massive bulk purchases common to B2B orders. These users know exactly what to add to their carts and typically upload a long spreadsheet of item numbers as part of their checkout journey.

A standard function of B2B websites is creating a personal account, which presents a unique opportunity to capture valuable user data. Repeat users often use the same credit cards and addresses during checkout, and in those instances, leveraging saved personal information can increase checkout speed significantly.

FINAL THOUGHTS

Abandoned carts are a downfall to the many advantages of online shopping. However, by following the three principals highlighted above, you can design a checkout process that supports users through the sales funnel instead of one that leads them to opt-out.