How Checkout UX Audit Helped to Decrease Overall Abandonment Rate by 10%

Challenges

Our agency was working with the client on redesigning product and category layouts, using the Google Analytics data.

At some point while researching Google Analytics, we found out that the checkout abandonment rate was too high and surpassed 50%. It also turned out that the client regularly receives negative feedback from customers about the difficulties of completing checkout.

We decided to optimize the checkout process, including the shopping cart and checkout flows, to make them user- and conversion-friendly. For that we had to:

• • ✔️Identify and analyze the main usability issues to ensure a better UX for ecommerce;
  • ✔️Provide suggestions for ecommerce CRO improvements.

Solutions

CRO Audit

Our UX/CRO team started working on the project by analyzing the customer feedback, recording all the observations, insights, and conclusions. We also paid our attention to the Baymand Institute research and studies on shopping cart and checkout abandonment in parallel to find figures and insights.

The client’s feedback and the research allowed us to align the main pain points of UX in web design and gave us an idea of how we can eliminate them:

• 🔸Extra costs too high (shipping, tax, fees). Solution: making it more transparent for users with the appropriate website UI design and making shipping and return information clearer and easier to find.
• 🔸The site wanted me to create an account. Solution: finding an efficient way for both business and customers to avoid creating an account.
• 🔸Too long/complicated checkout process. Solution: optimizing the checkout UX, including steps, fields, microcopies, user interactions & distractions, should help eliminate this issue.
• 🔸I couldn’t see/calculate total order cost up-front. Solution: making it more transparent for users with the appropriate UI.
• 🔸I didn’t trust the site with my credit card information. Solution: visually emphasizing the security of the credit card fields and making the payment process look secure and credible with the help of UI/UX website design and copywriting.
• 🔸Website had errors/crashed. Solution: completing a checkout process from the point of view of a regular user and writing down errors both technical and UX/UI that need to be fixed in the future.
• 🔸There weren’t enough payment methods. Solution: introducing more payment integrations, especially express checkout integrations (Amazon Pay, Google Pay, Apple Pay) and local providers.
• 🔸The credit card was declined. Solution: improving UX/UI to avoid confusion and offer alternatives.

Based on our experience working with projects for online shopping, there are also other popular reasons for cart abandonment that can be solved, including:

• 🔹Re-entering info (for example, credit card, shipping fields).
• 🔹Discount/promo code doesn’t work.

Finally, we came up with the list of common metrics for both pages:

• ✔️% of exit rates from the page
• ✔️% of moving to different pages from the conversion funnel (e.g. homepage)
• ✔️% of overall abandonment rate across all the devices to see the difference

We also decided to track the % of the average abandoned order value for the shopping cart separately and the % of checkout abandonment click-through rate (the percentage of recovery emails/messages opened that resulted in a customer clicking and returning to the website).

After that, we decided to form our own opinion and test the website from the point of view of a regular user. During our testing, our UX/CRO team noticed that the shopping cart and checkout pages usually have slightly different patterns and even UI features, and they also differ according to regions – Germany, UK, US, etc.

To maintain UI/UX website design consistency, we had to take into account common elements across all countries and regions:

• ✔️Cart: navigation, estimated subtotals, product suggestions, footer;
• ✔️Checkout: shipping & billing address, order totals.

We also paid attention to some regional differences that included:

• ✔️Cart: different versions of carts depending on the country;
• ✔️Checkout: currency, language, shipping and payment methods.

After analyzing dozens of reports in Google Analytics and visualization funnels, we concluded that every next step in the checkout process is a possible conversion killer for the client’s business.

An in-depth research allowed us to see which blocks of checkout needed UX and conversion rate optimization services to decrease an overall abandonment rate:

• ❕Shopping cart content;
• ❕Shipping information;
• ❕Payment options and information.

Based on our research, CRO marketing best practices and UX design principles we learnt from our previous experience working in the client’s niche, and analysis of areas of improvement on the existing website, we built forecasts for the client and came up with the following metrics:

• ☑️-10% of the overall abandonment rate across all the devices;
• ☑️-10% of exit rates from the page;
• ☑️-5-10% of moving to different pages from the conversion funnel (e.g. homepage);
• ☑️-15-20% of checkout abandonment click-through rate (the percentage of recovery emails/messages opened that resulted in a customer clicking and returning to the website).

UI/UX Website Design with Recommendations

All the information gathered from the previous stages helped us conduct a website UX audit and come up with the list of recommendations divided by the following blocks:

Shopping cart content:

• ✔️Added a feature to edit the shopping cart content without leaving a checkout page.
• ✔️Introduced a functionality that allows seeing similar items right on the checkout by clicking the button ‘Similar items’.
• ✔️Implemented an option of splitting items to ship them to different places in order to save customers’ time to make multiple orders with different shipping addresses.

Shipping information:

• ✔️Added a feature to enter address/postcode, which automatically preselects the city so that a user needs to enter or select less data manually.
• ✔️Made delivery options more concise and limited available ones to fastest and cheapest only in order to avoid customers’ confusion.
• ✔️Provided a delivery date/range instead of a delivery speed depending on the shipping information entered to set up clear expectations for users and potentially decrease customer support requests.

Payment options and information:

• ✔️Introduced additional legal information for payments depending on the specific region or country entered on shipping.
• ✔️Highlighted a relevant payment system according to the card number provided.
• ✔️Duplicated order totals at the very end of the checkout process near the button with a call to action ‘Complete a purchase’ to set up clear expectations.
• ✔️Made an order summary block on the right sticky and flexible depending on the delivery entered, since a customer sees an updated information.

UX writing

As a part of UX optimization, we also made headings of checkout blocks more user-friendly and encouraging for customers, such as ‘What a wonderful choice!’ for cart content, ‘We ship wherever you are’ for shipping information, and ‘Secure and flexible payments’ for payment information.

This is a Figma draft we got, which we eventually showed to the client:

After receiving positive feedback from the client, we were ready to move to the collaboration with the client’s web designer and visualize solutions with wireframes of the improved checkout process. At this stage, we often accompany a UX/UI designer and supervise the implementation so that the layout matches both our recommendations and brand identity attributes.