Redesigning the checkout experience of C&A online store

How would you redesign the checkout process for an e-commerce website that sells fashion apparel for men and women? The website has a large catalog of products, including clothing, shoes, and accessories.

Timeline – September 2023

The problem

The existing checkout process may not be efficient or user-friendly, which impacts user satisfaction and conversion rates.

The goal

The checkout process is one of the most important parts of an e-commerce website. Improving this is paramount to the success of the business. The goal of this exercise is to explore ways to provide a seamless, efficient, and visually appealing checkout experience that enhances user satisfaction and boosts conversion rates.

Assumptions

  • The e-commerce site for men’s and women’s fashion apparel is C&A.
  • One of the goals of the company, is to improve user satisfaction and conversion rate of the existing checkout process.

Constraints

  • The solution will mostly focus on the web experience of C&A.
  • The focus of the case study will be for the checkout process only.

Understanding the problem

How do we learn more about the users? What are their pain points?

I did some investigation online to learn about some of the customer pain points. Some of the user complains were revolved around the following:

  • The app is slow.
  • Users struggle with the checkout when making payments.
  • Some users struggle with the language (No English option)

The next logical step was then to learn more about the users. Who are the typical users of C&A online store, what are their motivations.

Secondary research

According to research data from the Baymard Institute 68% of users abandon their cart during checkout. Several reasons are give for why this is happening, leading me to pull out some criteria for reviewing the existing platform and other competitors

  • Basic Accessibility – Language support (English)
  • Usability heuristic – (recognition rather than recall) – Social media login
  • Usability recommendations from Baymard Institute
  • Perceived cognitive load – features or actions that require extra effort from the user.

Reviewing the existing solution

Good points

  • Guest checkout availability.
  • One column layout (good readability and mobile responsiveness)
  • Combines shipping and billing addresses.
  • Multiple payment options

Areas of improvements

  • No social login
  • No English language support
  • Order preview is at the bottom.
  • The order details and pricing stretch end-to-end on the screen.

Reviewing the competition - Zalando checkout

Good points

  • English language support
  • Two column layout in the confirm page
  • Combines shipping and billing addresses.
  • Multi-stepped process
  • Multiple payment options

Areas of improvements

  • No guest checkout
  • No social login
  • Too many checkout steps

Reviewing the competition - Asos checkout

Good points

  • Social login
  • Two column layout with Order Preview on the side.
  • Multiple payments support

Areas of improvements

  • Add guest checkout
  • Add English language support
  • Combine shipping and billing addresses.
  • Provide immediate option to complete transactions.

What can we improve?

A couple of ideas around things we can do to improve the checkout experience are:

  • English language support.
  • Social login support.
  • 2- column layout with Order preview on the right hand side.
  • Add payment trust signals to let users know of the secure status of their payments.

What can we improve?

Login Screen

  • Added English language support - this can be implemented across the site.
  • Added social login option

Checkout option A

  • Two column layout - with minimal scroll.
  • Added some trust signals.
  • Streamlined pricing detail section.
  • Replaced the icon on the discount code and PAYBACK points options - to provide a better visual cue to users

Checkout option B

To improve checkout experience:

  • Two column layout - minimal scroll.
  • Added more trust signals
  • Showing the expanded mode of the payment options
Source: Baymard Institute

How do we test these ideas?

Testing with AI

Tested the two options with AI.See the test score of the respective screens.

Attention insight tests to see:
  • Where visitors will look within the first 3 to 5 seconds of seeing the design
  • Clarity score shows how clear the design is for a new user

Read more: Heatmaps and Clarity score

A/B Testing with users

Created some polls and shared them online and on social media to know which solution they users would prefer the most.

The results came in and Checkout option B got the most votes.

Checkout option A with total votes of 5/18

Checkout option B with total votes of 13/18

Outcomes and Takeaways

Thank you for making it this far. After going through all this exploration we can come to the following conclusions:

  • Option B was the winner. Passing the AI tests and human A/B tests. Probably because of the extra security features added.
  • It was interesting to bump into the research work of the Baymard Institute (referenced in some links above). It guided and helped with some of the design decisions.
  • Using AI for testing screens was a new one for me, and I was able to also see its limitations. For instance, the original C&A screen had a clarity score – but we can tell from observation and tests results that the newer screens were much better.

Thank you for reading.