Home

Checkout

UX experts are conducting a heuristic evaluation.
Improving the as-is checkout experience

In this case study, I’ve collected highlights from the process of improving the user’s as-is checkout experience on THG owned websites. I’ll describe the challenges and my research. Please bear in mind that this project is still a work in progress.

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.

In compliance with the non-disclosure agreement, I’ve omitted all confidential information in this case study.

Background

I’ve joined the Payments Platform vertical, the aim of which 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 large team of product managers, fraud data scientists, data analysts, tech team leads and software engineers.

The challenge

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

The senior management tasked me '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 any challenges the users may face. As a UX expert, my aim is not only to serve business needs but also solve users’ problems. To do that I need a clear understanding of who are the users, 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 interviewed Customer Support managers and found out that their teams 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 analysis.

By interviewing software engineers, I’ve learned 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. The data shows that the current checkout has a high number of errors in address fields and card filed.

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

This goal prescribes the solution. A good problem statement defines the endpoint, it’s solution-agnostic and derives from users’ needs. It’s still not clear what problem I need to solve for users. 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. I’ve involved the UX researcher, web analyst, product manager and engineers, 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 during the checkout flow, where do they stop and drop-off?
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.

Working together with the UX researcher Loc Phan, we designed a scenario and tasks for the remote unmoderated comparative usability study, to gain insights into how our checkout compares with the nine biggest competitors. We recruited 7 participants and asked them what would they expect to see and what questions would they expect to be asked 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 formative usability study, people were complaining that they can't find the order summary during checkout. People want to see the item name and image and full price breakdown. Current checkout doesn't display full order summary. Things get worse on mobile version where order summary is presented at the last step of the checkout process.

Current order summary which isn't informative enough for users because they want to see the item name along with the image, as well as delivery details.

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

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.

Competitor analysis.

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.

Email campaign

To retarget users who abandon checkout and incentivise them to finish the process we send them personalised email with an order summary and a reminder to complete their purchase. Another incentive is allowing users to save items for later if they decide to continue on another device or at a more convenient time.

As-is performance

To understand what steps and actions users take during checkout I’ve looked into BigQuery data and analysed 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.

As-is scenario.
Express checkout wireframes.

Customer insights

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.

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.

Eco-friendly packaging option that a competitors provide during checkout.
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.

'Checkoutville' a visualisation for the hierarchical structure of the checkout by Rob Hannay

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?
Behaviour analysis of the current one-step checkout (Desktop).
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 core piece of UX design is the ability to let the 'why' inform the 'what'

Based on formative research and data provided, we defined the solution-agnostic problem statement that derives from users’ needs.

Current and potential customers need a way to:
  1. Review order summary
  2. Choose/edit shipping addresses
  3. Apply discounts
  4. View their offers
  5. Choose packaging options
  6. Choose their preferred payment method
  7. Want to get an accurate delivery estimation
  8. Need to know their order information right after placing an order
  9. Expect to be aware of the cancellation and return policies during checkout

Workshops with stakeholders

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

During an ideation session.

I facilitated an ideation session with stakeholders where collectively, 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 studio session where we collaboratively put our best ideas on paper and came up with solution sketches. This helped me to collect best-agreed features and put them to a usability test and iterate.

The evolution of checkout designs.
The vision

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.

The latest version of checkout.
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 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 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 will form 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.

Next project

MyStock

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

Read more