User Experience design for consumer website: Checkout (checkout process) design

What is checkout (checkout process)? As far as I'm concerned, it's the process of picking up the checkout after the product is finished. From the decision start checkout to enter contact information, payment selection to the final payment success, the whole process is called checkout (checkout process). Before the revision, their original Checkou process is this:

The sign of the original checkout in

Control

You can find the original checkout flow into: Sign in, Shipping, Billing & Review, Receipt, that is, from the Point checkout button to the final checkout success needs to take four steps.

After a redesign, the new process becomes a step (see figure below). How do you do that?

First, the checkout mandatory Sign in (reserved only returning Customer Sign in to facilitate direct access to shipping and delivery option). Secondly, the shipping and billing information are integrated to form a long form in a simple flat form for the user to fill in and confirm. The right side of the page is the order details. After clicking on the place order, checkout completes, prompts the user to be able to register the new account number (Create accounts) in order to track specific orders.

Another good interaction I personally think is the order summary display on the right. Since the merged pages are longer, they make the order summary to float up and down the page, which allows the user to always see the details of the orders.

In terms of the final data, the new design is compared to the old design:

• The completion rate of purchase rose by 257.26%
• The average order amount rose by 8.54% (the increase in the number of authors claiming to be unexpected and not knowing the exact reason)
• Overall site conversion rate rose 0.54% (this value is not well explained by the author, the comments below are also asked)

The new checkout Design

Checkout after successful, prompt registration

why they are so designed, to know that even Amazon is also 4 steps checkout, they are how to consider? the author of the process is not disclosed in the original text, but we can basically find the answer from the intense comments below and the author's response.

First, the store is designed to sell licensed goods. Therefore, by simplifying the product design and lowering the threshold to improve the conversion rate of the shopping is their core KPI, put aside the pressure of operation (mainly not registered can be checkout not conducive to two times shopping and merchandise recommended), their design starting point is to help users to complete the order as much as possible. The extra checkout process gives users the opportunity to change their choices. (A guy in the comments said he did similar experiments, with a 20% less conversion rate.) Secondly, because they sell niche (niche) goods, checkout steps or more do not affect the actual conversion rate. Because the user can only buy here, there is no other choice, this factor can also be considered as the previous mentioned the second indicator did not improve a lot of reasons. Finally, another man found that they only offer visa payments, the authors explained, because Visa is an Olympic franchise partner, and this objective factor also helps them to spend less on design. If you must have a variety of payment options, then really put all the payment methods combined with other information on a page, I think they will also have the pressure of ideological struggle:)

By the digression, some friends will think their form design is not perfect, for example, in real-time data validation, Error prompts, form field tips, and so on there are also areas to improve. But we should realize that the perfect and elegant design is often met but not, the most suitable design is that we should strive to achieve. I think at least on this particular issue, this example gives us an example.

Finally, this example tells us that when possible, it is also a way to improve the conversion rate by integrating multiple page forms into a less complex single page form in a timely manner. It's also a straightforward way to tell users exactly how much form information you need to fill out, but it's a prerequisite to having a good understanding of the user's behavior and the underlying needs behind the action, and not being desperate for KPIs.

Other valuable questions in the original comments:

• If the order amount from the current $45.60 into $456, whether the results of the experiment is still the case?
• How much effect does the registration after checkout end?
• A/b Test considerations: When to start and when to end?

The real last, the friends who have questions welcome you to read the original text and I discuss.