Optimize an ecommerce checkout flow
Optimize an ecommerce checkout flow
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.
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.
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.
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.
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.
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.
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.
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.
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.