When it comes to eCommerce checkout design, what’s good for the goose is not good for the gander. The goose has its own preferences, way of thinking, levels of patience and understanding. The goose has different methods of payment than the gander, different concerns about security. You show the goose’s interface to the gander, and those personalized options aren’t going to sync up.

So how do you optimize a checkout for your own geese, er, customers? Constant refining, testing, and customization based on user research.

pexels-photo-60289
Source: unsplash.com

Frequent readers of the LemonStand blog know we’re big supporters of growth-driven design. Rather than spending months on a design and then just leaving it online after launching, growth-driven design encourages rapid and continual updating. There’s always room for improvement, and growth-driven design seizes these troublesome areas and fixes them without wasting any time. This keeps your eCommerce site running at its best, at all times.

And when it comes to an eStore’s checkout, the fulcrum of every eCommerce business, anything less than the best is unacceptable.

In this article, we’ll explain how and why checkout optimization is crucial to your eCommerce site. We’ll break it up into two key areas: customization and testing.

Customization

As we’ve mentioned before, customization is crucial for a successful eCommerce site. Sure, templates or secondary domains might be easier, but that easiness comes at a price.

What it comes down to is that “boilerplate” and external checkouts are shortcuts — the kind of shortcuts that cut corners. They work for extreme situations, like with an impossible deadline or bread-and-water budgets, but for most cases should be avoided. The advantages of customized checkouts more than make up for the extra effort and resources.

screen-shot-2016-11-11-at-6-08-12-pm

Source: Authorize.net

For starters, redirecting your shoppers to an external domain for checkout is risky, for quite a few reasons:

  • When it comes time to enter credit card information, shoppers become extra sensitive. Even well-intentioned payment pages can cause extra anxiety that leads to cart abandonment.
  • Phishing attacks on eCommerce checkouts are on the rise. Because customers are already extra sensitive at checkout, the suspicion of a scam makes leaving the site even riskier.
  • While the company saves money and time on designing, they usually have to pay a per transaction fee. If the company becomes successful enough, the “cost-saving” measure actually becomes a loss.
  • The UX is broad, not personalized to your target shopper.

Let’s focus on that last one, since it’s worth discussing in detail. An optimized checkout is one that is designed specifically for your target shoppers.

 

 

Every eStore has its own market — young, old, male, female, formal, casual, etc. — and each group has their own preferences for interacting with the interface. Some people prefer navigating through menus, others the Search field. Some will abandon unless they can checkout as a guest, others sign in the second they arrive on the site. Some shoppers are more nervous than others, and would appreciate more security badges. Some simply don’t have the patience for too many form fields or pages.

screen-shot-2016-11-11-at-5-59-53-pm

Source: Threadless

There are a lot of elements during the checkout process that are subject to personal preferences. Layout, the number of pages, the number of forms, the color scheme, button size — different users have different impressions for each of these, which means if you design them to suit your specific shoppers, they’ll appreciate it. For this reason, LemonStand allows designers to alter these as they wish, to suit virtually any customer group.

External domains disregard these personalized options. Their interfaces are designed to be general; one size fits all, but it fits no one perfectly. Customizing your checkout allows you to make those acute design decisions that your customers will love, but not necessarily other people’s customers. And that’s the point: customized checkouts are hand-tailored for the people that use them. External domains are not.

As we explained in 5 Steps to a User-Centered Design Your Shoppers Will Adore, a lot of research and planning goes into discerning who your users are and what they like. However, whatever theories and ideas you have must be tempered through real-life testing.

Testing

Consistent and reliable testing is the difference between a checkout that’s optimized to your particular users, and a checkout that’s merely “functional.” Without testing, your entire design is built only on conjecture. That’s a fine place to start, but can only get you so far.

The heart of growth-driven design is learning where you can improve and then making the necessary corrections… and user testing is the most direct path.

Once you have your initial research on your customers (outlined here), you can start designing based on your findings. First, you’ll want to compile some sample user flows to represent the most common scenarios. These consist of the logical step-by-step processes your customers go through, something along the lines of:

  1. Go to the checkout page.
  2. Sign in.
  3. Enter shipping address.
  4. Enter credit card information.
  5. Double check purchase and information.
  6. Click “complete.”
Related posts:  Guided Selling vs Faceted Search: Which Offers a Better Shopping Experience?

That’s a basic and oversimplified version, but the utility of this exercise lies in hashing out the details. For example, from where do they go to the checkout page? Do they click the prompt directly from the cart dropdown menu when they add their last item? Does your site have a cart dropdown when items are added? How long does the shopper browse between adding their final item and the actual checkout?

screen-shot-2016-11-11-at-5-54-17-pm

Source: Threadless

These questions are all essential to creating the best UX possible, but the answers are different for different customer types. Using what you know already about your users, you’ll want to design your checkouts using these user flows as the backbone.

Come up with a few different user flows to boost your critical thinking. As mental exercises they don’t cost much, but the more time you spend on them, the greater your understanding of the user’s experience will be.

Multiple user flows means multiple options. This is part of the plan; the ultimate goal is to test multiple designs and choose the one that performs the best.

Design variant checkouts that explore different variables — all rooted in your initial user research and user flows. Some of these variants will be drastic, such as a single page checkout versus a multiple page one. Others may test only minor elements, such as the color of the call-to-action. The point of testing is to separate the theory from fact. Even veteran designers who have seen it all are often surprised by the results of user testing.

For checkout optimization we recommend A/B and multivariate testing. Both test types are similar in that they show users different versions of a page and mark which one performs better. The key difference, however, is that A/B testing only experiments on one variable at a time, while multivariate testing examines, you guessed it, multiple variables at the same time.

checkout optimization - split testing

Source: “Split Testing.” Jerry Nihen. Creative Commons.

We’ll give A/B and multivariate testing a more thorough treatment in an upcoming article, but for now let’s discuss some general points to give you an idea.

A/B testing works best for visuals. In Smashing Magazine’s The Ultimate Guide to A/B Testing, Paras Chopra recommends this single variant format for identifying the best options. Modifying his list for the checkout process, A/B testing is suited for:

  • General Layout — which sections go where, and in what order
  • Placement of Elements — the best places to put standalone elements, such as an overview of what’s in the cart, sales/coupon announcements, or the CTA itself.
  • Visual Design of Elements — color and typographic choices.
  • Form Field Labels — a single confusing label could derail the entire checkout process.

Multivariate testing works better for more complicated design questions, especially testing combinations. For example, multivariate testing would be a better choice when determining which color of text and which background color to use together; A/B testing would be better if you know your background color for sure and are only concerned with text color.

According to Optimizely, multivariate testing can reach the results faster than A/B testing, but require much, much more traffic/test takers. Another issue, according to the article, is that multivariate testing does not distinguish between which elements are more important for conversions and company goals.

The bottom line is that, for an optimized checkout, you need more than just a customized design, you need that design to be proven through empirical testing. Without reliable data, growth-driven design is no longer driven by growth.

Remember that you don’t need the checkout to be perfect before launch, but rather you perfect it continuously over time, using data collected when the site is live. The process of checkout optimization is never finished; even if you manage to get it perfect the first time, tastes and customer markets change over time. That’s why optimization — and testing — needs to be consistent.

Takeaway

This is the first in our new series on checkout optimization. Soon, we’ll start getting into more specific best practices that you can apply immediately. If you’re looking for more practical advice on checkout optimization right now, read our previous article 9 Best Practices to Optimize Checkout Design.