Business Benefits
Increase conversions.
Do A/B tests on single-page versus multipage checkout flows to determine which page layout leads to the most conversions.
To test which works best for you, design two versions of your checkout page and use an A/B testing tool like Optimizely to see which leads to more orders. You can also see where in the multistep step process people drop off, which can provide insights into where customers are having last-minute concerns.
Structure your page with design elements, like section borders and headings, that highlight each distinct checkout section to improve page legibility.
Shoppers will abandon their carts if the checkout process is confusing or complicated. Design a simple and legible layout that includes expected page elements, like:
- Surrounding borders for each section, like for shipping or billing.
- A distinct heading at the top of each section.
- Distinct form labels, like First Name, Last Name, and 16-Digit Credit Card Number.
- Whitespace, like margins or padding, between sections and input fields.
- A progress bar and step numbers, if using a multipage checkout process.
Consider designing the credit card input form to match what a credit card looks like, like the free Skeurocard interface.
Include a prominent guest checkout option that does not require account registration.
Since one study found that one in four cart abandonments are due to forced account registration at checkout, remove forced registration. Instead:
- Offer two simple choices: New or returning, preferably with the new customer option more prominent.
- For account registration, offer single sign-on options through Facebook or Google to make it easier to create an account.
- Still consider capturing their email in the first step, so you can try to recover an abandoned cart.
- Provide the ability to automatically make an account after checkout on the thank-you page.
- Consider incentivizing account creation with a discount off their next order.
Ask for customer information in the order of easiest to most complex.
For example, start with the customer’s name and necessary contact info, then shipping and billing info. To simplify the process even further:
- Use autopopulated fields, like Google Autofill.
- Ask for the minimum information needed, and make all other information optional.
- Include a checkbox option to automatically use the same shipping and billing address.
- Consider offering express checkout options through PayPal, Google Pay, or another payment method, like Amazon’s 1-Click Payment. Include a separate button for the express checkout option under your main checkout button.
Include expandable text blocks or tooltips that address customer questions and last-minute buyer objections.
To know what last-minute objections your buyers have, interview your customer service team to identify the most common questions and problems your buyers encounter when checking out, or look at user test results from tools like Hotjar that have a popup exit poll feature when a user exits the checkout page early. Example problems include questions about shipping duration, shipping limitations, how refunds are processed, and privacy or security concerns.
This may include a tooltip in the credit card area that explains where to find the security code on a credit card, an expandable box with the full return policy, or a shipping duration calculator based on zip code.
Add on page elements that highlight the security and trustworthiness of the checkout process and your brand.
Example design elements include security seals for the company you use to secure the information, credit card logos, and a lock symbol in the credit card number field. Include information on privacy, shipping, and return policies, so customers know they can trust your company. Consider also adding a few powerful customer testimonials or reviews to reinforce the purchase decision, like Process Street’s testimonials example with a What Our Students Have to Say section on the side.
Add a way to contact your support team, like live chat, a chatbot, or customer support contact information and availability.
If offering live support is not a feasible option for your company, offer a customer support chatbot. Always provide your support phone number, email address, and a timeframe for when the customer can expect a response.
Write descriptive CTA button copy that explains the outcome or benefit of clicking.
For example, use Back to Shopping instead of Back because Back could mean back to the previous step, previous page, or back to shopping. A/B test your button copy with an optimization tool, like AB Tasty or Crazy Egg, to see which variation leads to the most conversions. For example, test Pay Now versus Pay Securely Now.
Include a button that lets the customer save the cart and return to your store.
This helps decrease the customer’s fear of losing their cart if they forgot to add something. You can also let users make small cart adjustments, like changing the quantity or deleting an item, during the cart page step before the checkout page. If you’re using a multipage checkout process, give users a button to go back to a previous step too.
Optimize your site through A/B testing on-page elements and tracking user behaviors with heat mapping or live user testing.
Use A/B testing and heat mapping tools like Hotjar, AB Tasty, HeatMapper, or Optimizely. Test page variables, like button placement, button copy, resource placement, and a one page compared multiple page process, to determine the highest converting combination.
Last edited by @hesh_fekry 2023-11-14T12:20:39Z