Experimentation Agency Message Testing Training Pricing Fast Marketing Community Blog Resources Help

Optimize an ecommerce checkout flow

Use case

Get more people to complete purchases and increase revenue.

Upgrade for unlimited access to thousands of playbooks on increasing traffic, improving ROAS and more.

Start 7-day trial for $1

1. Map the steps of your ideal checkout flow and compare them to your current process.

For example, if your current checkout flow is a single page with a long checkout form, and you want to transition to a 3-step checkout process, map the steps of the new process to see which UI elements should be on each page of the flow. If you’re designing a checkout flow from scratch, map the process to determine the UX/UI and development needs. 

Join the discussion on how to complete this step.

2. Show the cart using an animated drawer when shoppers add something to the cart.

  • Keep the Checkout button and content visible until the users click somewhere else.
  • Change the Add to cart text to Added for the product.
Join the discussion on how to complete this step.

3. Include the product’s main image, product name, quantity and price on the drawer and cart page. 

  • Display the cart content clearly and show the final cost, including shipping and taxes.
  • Shrink cart contents and show upsells on the cart page.

Join the discussion on how to complete this step.

4. Allow users to easily remove items, change details like amount or size, and save the cart for later. If they abandon the cart, send email reminders with the items on their wishlist. 

Include steppers to increase or decrease the quantity.

Join the discussion on how to complete this step.

5. Show alternative payment methods next to the credit card option. Remind users about security, free shipping, and free or easy returns underneath the checkout button.

Use secure payments with SSL.

Join the discussion on how to complete this step.

6. Use two Checkout CTA buttons, one above the cart and another below. 

Have a text link for coupons – Got a coupon? – that shows an input field when clicked.

Join the discussion on how to complete this step.

7. Offer a guest checkout by default to remove forced registration and add a link to allow users with existing accounts to log in.

New clients will be able to create an account after they pay. You can ask for the email upfront – this will make it easy to start an abandoned cart recovery process. Alternatively, create an account for guests in the background automatically using the provided email address. When they decide to create an account, they will have an order history with all their previous orders merged for this account.

Join the discussion on how to complete this step.

8. Have a 1–2–3 step flow on the checkout page by starting with shipping info first, follow with payment method and end with review. 

Users shouldn’t need to enter their billing address again if it’s the same as shipping. You should:

  • For credit card info, ask name first and the credit card number last.
  • Use an interface like Skeuocard to make a payment form that looks like an actual credit card.
  • Use different background colors for the credit card number field.
  • Put an SSL logo and a written statement for your security methods like Secure credit card payment. This is a secure 128-bit SSL-encrypted payment.
  • Add explanations for expiry and security code.
  • Store credit cards in your system to make buying a one-click process.
Join the discussion on how to complete this step.

9. Offer new buyers account creation on the Thank-you page after check out, and give returning buyers the option to log in.

  • Use New customer or a similar term instead of Register.
  • Use the name, email, and address provided on the checkout to create their account.
  • Ask for their desired password – or provide an option to auto-generate it – and confirm permission to create their account.
  • Offer an incentive to create an account upon completing the purchase. For example, getting a coupon by entering a password, order tracking, faster purchasing.

Join the discussion on how to complete this step.

10. Use cart abandonment emails and retargeting ads to bring shoppers back to continue shopping. 

Send these between one and four weeks after carts were left off.

Join the discussion on how to complete this step.

Current Playbook:

Optimize an ecommerce checkout flow

Mar 14, 2022

0 votes

Blog - How to Design an Ecommerce Checkout Flow | CXL

Request a playbook

Get unlimited access

Thousands of playbooks on increasing traffic, improving ROAS and more.

Sign up now