Home

Improving the as-is checkout experience — Part 1

UX experts are conducting a heuristic evaluation.
This case study consists of two parts. In the first part.

In this case study, I’ve collected highlights from the process of improving the user’s as-is checkout experience on THG owned websites. Please bear in mind that this project is still a work in progress. This case study consists of two parts. In the first part, I’ll describe the challenge and research, and in the second part, I’ll cover the design process involving stakeholders and test results.

THG (The Hut Group) is a British e-commerce company. It operates over 100 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 spaces.

Please bear in mind that I’ve omitted any confidential information in this case study to comply with a non-disclosure agreement.

Background

I’ve joined the Payments Platform vertical, whose aim is to help customers complete their order process.

One designer for the team.

My role is to support Checkout, Payments and Fraud Detection teams. I’m working in close cooperation with a team of product manager, project manager, fraud data scientists and data analyst, tech team leads and software engineers.

What is Payments Platform?

The challenge

All THG owned websites use one checkout platform that can fit into the requirements of the website. Which means that any change made on checkout would be transferred across all company-owned websites.

The upper management tasked us to improve the look and feel of the current Checkout and to increase conversion. This is a business opportunity and a technical problem, but it doesn’t describe the problem of the users. As a UX expert, my aim is not only to serve business needs but also solve users problems. To do that I need to clearly understand the context of use, what challenges users face, and how would we measure the success.

A high-level overview of the journey.

Stakeholders interview

The first step was to interview stakeholders to uncover more details and understand their goals. I’ve learned that currently, we see a high number of errors in the checkout. I’ve interviewed Customer Experience managers and found out that we receive between 10k-15k checkout related contacts per month. This includes queries about checkout, payment processing and order placement.

I’ve asked all stakeholders to send me their top 5 recommendations on how to improve checkout conversion rate. This helped me to understand their vision and where their ideas overlap.

Checkout funnel.

By interviewing software engineers, I’ve learned that their biggest challenge is that they have to maintain two separate code bases for mobile and desktop checkout. The reason is that on mobile devices the layout is a traditional multi-step checkout and on desktop, it is 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.

Current multi-step checkout (Mobile).
Current one-step checkout (Desktop).

A problem statement

Remember the original problem stated that the goal is to improve the look and feel of the current Checkout and to increase conversion. That was a business opportunity and a technical challenge. I interviewed stakeholders and came up with a refined version:

The goal is to design the checkout experience that meets users’ expectations. Improve checkout conversion by reducing the error and abandonment rates; and to create a frictionless user journey in order to lessen the propensity for people to contact Customer Support.

Although, that goal helped me to identify three main KPIs that we are aiming to improve:

  1. Reduce abandonment rate in the checkout
  2. Reduce error rate
  3. Reduce checkout related contacts to Customer Support

It’s still not clear what problem I need to solve for users. This goal prescribes the solution. A good problem statement defines the endpoint, it’s solution-agnostic and derives from users’ needs. Without a clear problem statement, we’ll end up with a lot of wasted work and excessive revisions. A problem statement should layout boundaries and constraints, user and business goals, timeline, and define success criteria. We can’t solve the problem if we don’t define the problem in the first place.

To put together a better problem statement, I’ve reached out to the broader team. What obstacles users have, why they got confused or anxious, and when they can no longer proceed, how do people behave during the checkout flow, where they stop and drop-off? To answer those questions I’ve involved UX researcher, web analyst, product manager and engineers.

Reasons for abandonment during checkout (Source: Baymard Institute).

The research

I’ve started by investigating previous attempts that aimed to improve the checkout experience. I reviewed previous checkout usability studies conducted by other UX experts from the THG. 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.

What I've learned was that to reduce checkout abandonment, we need to start from product and basket pages. However, the current focus is checkout and due to technical reasons amending product and basket pages should be considered as a separate project.

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.

А clip from usertesting.com.

UX researcher Loc Phan provided me with a list of competitors for three categories: Wellness, Beauty and Luxury (overall nine competitors). I and Loc designed scenario and tasks for the remote unmoderated comparative usability study. Formative usability study aimed to gain insights into our checkout in comparison with competitors. We recruited 7 participants where we asked them what would they expect to see and what questions they expect being asked during checkout.

It was interesting to hear participants saying that the first thing they expect to see is product summary, however looking at BigQuery data I noticed a typical behaviour for people with lower order value that the first thing they actually search for is the price of the delivery.

Overall comparative usability study showed that participants rated the current checkout process as the best.

Intercept surveys

Proposed post-purchase survey on the order confirmation page.

To better understand the context of use, I suggested to set up an intercept survey. We can prompt the intercept survey if it seems that people intend to leave the checkout. The automated user research tools like Qualaroo, which allows firing the survey when it looks like someones’ mouse is approaching the browser close button. Please see examples of questions that Qualaroo suggests to uncover why potential buyers aren’t converting. Another idea was to create an automated survey on order complete page. We can ask people who completed checkout to rate their experience with us. And if people rate low, we can ask them to provide their feedback and understand what went wrong. Also, a post-purchase survey rating can help us measure how the new version will perform 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.

Lorna, Loc, Ade and Anuar are conducting a heuristic evaluation and cognitive walkthrough.
Identified usability problems and recommendations.

Expert review

I’ve invited another UX designer and two UX researchers to join me with conducting a heuristic evaluation of competitors and current checkout pages. We found multiple usability issues and came up with a list of recommendations. For example, the progress status isn’t visible on mobile devices during checkout. Information about the return and cancellation policy isn’t available. In case of error, the message appears at the top of the page, and the user has to scroll down to identify the problem. There are no visual cues that the user can go back or exit checkout, as well as save for later. And missing summaries of the past steps which would add a sense of progression for users.

Current checkout technical performance results.

Performance analysis

I used Google Lighthouse for performance analysis and an automated accessibility testing tool, the A11y Machine. The performance analysis shows that our checkout performs well in comparison with competitors, but there is always room for improvement. I found out that it takes 11 tabs, seven pages for a user to reach payments page; ideally, we need to reduce these numbers twice. Also, we can see that the average checkout conversion rate on Hut, Coggles and Mybag (THG owned luxury category websites) is small compared to other websites like Myprotein, Lookfantastic and Beautybox.

It was interesting to learn that currently, THG doesn’t make any attempt to retarget users who abandon checkout and incentivise them to finish the process. In case people leave the checkout without placing an order, it’s possible to send them targeted personalised email with an order summary and a reminder to complete their purchase. Another incentive would be allowing users to save items for later if they decide to continue on another device or at a more convenient time.

As-is scenario.

As-is performance

To understand what steps and actions users take during checkout I’ve looked into BigQuery data and analysed 14 first-time UK 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 often engage in the order complete page, and they are more willing to share their order information with friends.

Express checkout wireframes.

Customer Experience data

Currently, the customer support team receives on average 120k contacts per month and the majority of them are post-order contacts, and every contact costs the company around £0.75. I’ve organised a tour to visit the customer support team which is based in a different city. I invited other UX designers, who are 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 experience collected I’ve learned that most of the contacts happen after people purchased something. Almost 30% of contacts are 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.

Interviewing agents helped us to uncover what people say and how they feel during checkout. As an example, in case if the payment didn’t go through we send users an email asking to resolve payment problem through Payment resolution page. Users feel confused and lost, they were saying that they don’t understand why they received that email. Analytics stats show that almost half of the visitors drop off from the page. We can improve 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, we can explain what the user should do before re-entering any card details. It might be that case that their card is expired, they just don’t have enough funds or billing address isn’t correct.

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 we played back all findings. 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.

Behaviour analysis of the current one-step checkout (Desktop).

Quantitative data

Web Analyst Chanté visualised the high-level overview of the flow and checkout progression funnel. These graphs showed us where exactly users drop-off during the process. Based on data, we can see that out of 100% visitors a month, only 9.75% reach the order complete page, though this number differs by brand and locale. Data shows that desktop users have the highest rate of errors and the highest drop-off rate compared to mobile during checkout. I’ve asked Chanté to help me by answering these questions:

  1. What is the first thing on the interface that users click to complete their intended task?
  2. How far people scroll before drop-off?
  3. What is the time before the first click accrued?
  4. What is the engagement rate for each element on the interface?
  5. What is the hover rate of each component?
  6. What is the click recurrence of each element?
Initial draft express checkout wireframes.

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.

An example of a user story map that I drew to explaining to engineers, managers and stakeholders what we’re trying to achieve.

What’s next

Workshops with stakeholders

I’m going to run a discovery workshop with stakeholders where I’ll playback findings and encourage innovators behaviour. My goal is to prompt them to focus on users needs. Based on evidence collected by the CX team and me, we’ll put assumptions of what people say and feel during each step. This will help the team build empathy to users and see on a map where we can bring the difference.

Next, I’ll facilitate ideation session with stakeholders where collectively, we will identify opportunities and ideas on how to solve users problems. We’ll come up with a prioritised list of feature hypotheses. Then I’ll invite everyone who participated in previous workshops to join design studio session where we’ll collaboratively put our best ideas on paper and come up with solution sketches. This will help me to collect best-agreed features and put them to a usability test and iterate.

User Story Mapping

The final step would be making a user story map from design solutions that meet users expectations. Story mapping is a top-down approach that breaks down your product vision into actionable steps you can prioritise. We’ll create a user story map by prioritising user stories into three categories ‘must-have’, ‘should have’ and ‘nice to have’. Engineers could evaluate each story point using T-shirt sizing technique. All user stories that go to the ‘must-have’ section will form the minimal viable product. Ideally, I’m hoping to collect enough ideas to ship not one but many variations so we can run A/B test and learn which version is better.

Next project

MyStock

For investors who want to algotrade, but don't want to code

Read more