Checkout

UX experts are conducting a heuristic evaluation.

Checkout as a service platform

In this case study, I’ve collected highlights from the process of designing the Checkout as a service platform that is used by 277 websites across over 140 markets.

My role was to design Checkout as a service and Fraud Detection platforms. I was working in close cooperation with a large team of product managers, fraud data scientists, data analysts, tech team leads and software engineers.

In compliance with the non-disclosure agreement, I’ve omitted all confidential information in this case study.
One designer for a large team.
The prototype that I built to test the latest version of the design.

The challenge

THG (The Hut Group) is a British e-Commerce company. It operates 277 international websites selling fast-moving consumer goods direct to customers through its proprietary e-commerce platform. The company aims to establish itself as a leader in the Beauty, Lifestyle and Wellness markets.

All THG owned websites use one checkout as a service platform that can fit into the requirements of each website. Which means that any changes made on checkout would be transferred across all websites.

The challenge was to design a checkout platform that can be tailored to specified needs, e.g. some countries have their characteristics like in Korea people have to provide Customs-issued ID number, and in the USA people are more likely to buy now and pay later.

The old multi-step checkout (Mobile).
The old one-step checkout (Desktop).

The research

The core piece of UX design is the ability to let the 'why' inform the 'what'

To better understand users' problems, I’ve reached out to the broader team. I’ve involved researchers, data analysts, product managers and engineers. That helped me to answer the following questions:

  1. What obstacles users have?
  2. Why do users get confused or anxious, when they can no longer proceed?
  3. How do users behave, where do they stop and drop-off?
Page layout

On mobile devices, the layout of the old platform was a traditional multi-step checkout and on desktop, it was a one-step long scrolling page. The biggest pitfall of one-step checkout is that when wanting to review the order data, users have to review what they’ve typed directly in the active form fields. Stats showed that the old checkout has a high number of errors in address fields and card filed.

A high-level overview of the journey.
Similar cases

I investigating previous attempts that aimed to improve the checkout experience. I reviewed previous checkout usability studies conducted by other UX designers. I’ve read checkout articles and reports by Baymard Institute. These articles are based on nine years of observations and test findings from usability research on e-Commerce checkout processes and abandonment rates. I watched talks and listened to podcasts to learn more about similar cases like Reinventing PayPal’s checkout by Bill Scott. I’ve participated in Google’s UX marathon to learn more about mobile checkout and forms UX best practices.

It was interesting to learn that going backwards in the flow to edit data is often a significant hassle both for guest users and existing account holders on other websites. And that Baymard Institute’s benchmark reveals that 90+% of multi-page checkouts have issues with either showing all steps in the checkout as process steps or turning them into links.

Usability studies

Working together with the UX researcher Loc Phan, we designed a scenario and tasks for the remote unmoderated usability study, to gain insights into how the platform compares with the nine biggest competitors. We recruited participants and asked them what would they expect to see during the checkout.

It was interesting to hear participants saying that the first thing they expect to see is a product summary. However, the BigQuery data showed that typically people with lower order value first look for the delivery cost.

А clip from usertesting.com.

During the usability study, people were complaining that they can't find the order summary. People want to see the name and image of an item and full price breakdown. The old checkout didn't display full order summary. Things got worse on mobile version where order summary was presented at the last step of the checkout.

The old order summary which wasn't informative enough for users because people wanted to see the item name along with the image, as well as delivery details.
Reasons for abandonment during checkout (Source: Baymard Institute).
Intercept surveys

To better understand why people were abandoning checkout, I set up an intercept survey. We prompted the survey if it seemed that people intended to leave the checkout. Please see examples of questions that Qualaroo suggests to uncover why potential buyers aren’t converting. I also created an automated survey on order complete page. We asked people who completed checkout to rate their experience with us. And if people rated low, we asked them to provide their feedback. That helped us understand what went wrong. Also, a post-purchase survey rating helped us measure how the new version performs compared to the previous. I found an article by Hotjar about how to set-up an e-commerce post-purchase survey helpful, here is a link to an article if you want to read more.

Post-purchase survey on the order confirmation page.
Lorna, Loc, Ade and me are conducting a heuristic evaluation.
Identified usability problems and recommendations.
Expert review

I’ve invited team members to join me with conducting a heuristic evaluation of competitors and old checkout. We found multiple usability issues and came up with a list of recommendations. For example, the progress status wasn’t visible on mobile devices during checkout. Information about the return and cancellation policy wasn’t available. In case of error, the message appeared at the top of the page, and the user had to scroll down to identify the problem. There were no visual cues that the user could go back or exit checkout, as well as save for later. Missing summaries of the past steps which would add a sense of progression for a user. All these usability issues were resolved in the new checkout.

Customer journey mapping

To understand what steps and actions users take during checkout I’ve looked into BigQuery data and analysed first-time buyers on three websites Coggles, LookFatastic and MyProtein. I’ve chosen those three websites due to the highest traffic and popularity. This helped me notice that users behave differently if they have higher-order value. As an example, customers who have an order value above £100 spend more time during checkout and they are more willing to share their order information with friends.

Checkout funnel analysis.

The checkout progression funnel showed me where exactly users drop-off. Out of 100% visitors a month, only 9.75% reached the order complete page, though this number differs by brand and locale. Data showed that desktop users had the highest rate of errors and the highest drop-off rate compared to mobile.

As-is scenario.

I found out that it took 11 tabs, seven pages for a user to reach payments page. In the new checkout, I managed to reduce these numbers twice.

Analysis of the old one-step checkout (Desktop).
Notes taken during the interview with customer support agents.
Customer insights

I’ve organised a tour to visit the customer support team which is based in a different city. I invited other designers, who were involved in improving the Account section. We’ve spent half-a-day with the customer support team and interviewed agents asking why people contact us. Looking at the data that customer support collected I’ve learned that most of the contacts were post-purchase. Almost 30% of contacts were about the item quality and delivery issues. People might order the wrong size, or they are not happy with the quality of the item and want to get a refund.

Payment resolution page

Interviewing agents helped me to uncover what people say and how they feel during checkout. As an example, in case if the payment didn’t go through we were sending users an email asking to resolve payment problem through Payment resolution page. Users felt confused and lost; they were saying that they don’t understand why they received that email. Stats showed that almost half of the visitors dropped off from the page. I improved users experience by simply explaining in a plain language why we sent an email and what they should do next to resolve the payment issue. On the Payment resolution page, I added a copy that explains what people should do before re-entering any card details. It might be that case that their card is expired, they don’t have enough funds or billing address isn’t correct. That helped to reduce drop off rate from payments resolution page.

Regular playbacks

From the earliest stages of the project, I wanted to keep everyone on the same page. Establishing excellent communication is vital for the success of the project. I’ve set up a recurring meeting that happened every Friday where I played back findings. So every Friday we came together and synthesised what we’ve learned, and shared “aha” moments with each other. It helped me to keep the managers and the team in the loop and provide clear visibility of what is going on and what to expect next.

'Checkoutville' a visualisation for the hierarchical structure of the checkout as a service platform by Rob Hannay
The team is ideation on possible opportunities

Facilitating workshops

By running UX workshops I prompted the team to focus on users needs. Based on evidence collected by me, we put assumptions of what people say and feel during each step. This helped us build empathy to users and see on a customer journey map where we can bring the difference.

The team is ideating on possible solutions.

I facilitated an ideation session with stakeholders where we identified opportunities and ideas on how to solve users problems. We came up with a prioritised list of feature hypotheses. Then I invited everyone who participated in previous workshops to join design sessions where we collaboratively put our best ideas on paper and came up with some sketches. This helped me to collect best-agreed features and create refined higher fidelity prototype which I put to a usability test, and then iterated.

Saving items

To retarget users who abandon checkout and incentivise them to finish the process we were sending them personalised email with an order summary and a reminder to complete their purchase. During the ideation session we came up with an idea to allow users to save items for later if they decide to continue on another device or at a more convenient time.

Eco-friendly packaging

It was interesting to learn that people became more conscious of environmental issues and willing to reduce their carbon footprint, so they contact the company asking to provide eco-friendly packaging. So during the ideation session, we came up with the hypothesis to display eco-friendly option for packaging.

Eco-friendly packaging option that a competitors provide during checkout.
Eco-friendly packaging option on a competitor's checkout.
Express checkout

Apple Pay, Google Pay, Amazon Pay and PayPal Smart Button provides an easy, quick and secure way to pay for items and services on websites. Using biometrics, e.g. Face ID, Touch ID or passcode users can quickly and securely transmit payment, shipping details and contact information to make purchases. To integrate those features into our websites, I reviewed best practices and recommendations that Apple, Google and PayPal provide on their websites. As an example, Apple suggests that the best user experiences place the Apple Pay button as early in the checkout process as possible to leverage Apple Pay-provided information and minimise data entry.

The evolution of checkout designs.

Results

Because a new checkout should deliver personalised experiences to users across different territories e.g. Japan, China, South Korea, UK, Germany and many more. As well as it should meet expectations of different types of users e.g. existing, new, and guest. With that in mind, I’ve designed a new checkout making it scalable and modular.

Refined high-fidelity wireframes.
On the left is an illustration of a user story map that I drew to explaining to engineers, managers and stakeholders what we’re trying to achieve. On the right is a photo taken during a workshop where I asked the team to create a user story map.
User Story Mapping

I’ve invited the team to create a user story map. Story mapping is a top-down approach that breaks down your product vision into actionable steps you can prioritise. We created a user story map by prioritising user stories into three categories ‘must-have’, ‘should have’ and ‘nice to have’. Engineers evaluated each story point using T-shirt sizing technique. All user stories that went to the ‘must-have’ section formed the minimal viable product. We collected enough ideas to ship not one but many variations to run A/B test and learn which version is better.

Released life version of the new checkout.