In this case study, I’ve collected highlights from the process of designing the Checkout as a service platform that is optimised for conversion and used by 277 websites across over 140 markets.
While working at THG as a UX Designer, I designed the checkout journey of the THG's SaaS payments platform. I worked closely with a team that consisted of a product manager, a tech team lead, user researchers, data analysts, and software engineers.
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. The checkout supports subscriptions and one-time purchases and accepts online payments from local and foreign banks.
The challenge was to design a checkout platform that can be tailored to specified needs of the website or location, e.g. in Korea people have to provide Customs-issued ID number, and in the USA people are more likely to buy now and pay later.
.png)
.png)
To better understand users' problems, I’ve reached out to the broader team. I’ve interviewed researchers, data analysts, product managers and engineers. That helped me to answer the following questions:
On mobile devices, the layout of the old checkout was a traditional multi-step journey. On desktop, it was a one-step long scrolling page. The biggest pitfall of one-step checkout was that when wanting to scan the order data, users had to scroll up 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 payments method area.
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.
I investigated previous attempts that aimed to improve the checkout experience. I've read 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 like Reinventing PayPal’s checkout by Bill Scott. And I’ve participated in Google’s UX marathon to learn best practices for mobile checkout.
Working together with the UX researcher Loc Phan, I designed a scenario for the remote unmoderated usability test. The main objective for the test was to compare existing version versus the nine biggest competitors. We recruited participants and asked them to complete checkout process on our and competitors' websites.
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.
Interestingly the data showed that typically people with lower order value first look for the delivery cost.
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. 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 to tell us more.
I’ve conducted a heuristic evaluation of the checkout of competitors and the previous version. I found multiple usability issues. For example, the checkout progress status wasn’t visible on mobile devices, and information about the return and cancellation policy wasn’t available. There were no visual cues that the user could return or exit the checkout process.
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.
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.
I found out that it took 11 tabs and seven pages for a user to reach payments page. I managed to reduce these numbers twice in the new design.
.png)
I visited the customer support team which was based in a different city. I've spent a day there to interview agents to better understand why people contact the support centre. 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.
Interviewing agents helped me to uncover what people say and how they feel during checkout. As an example, if the payment didn’t go through there was no specific error page explaining what just happened. We were sending users an email asking to resolve payment problem with a link to a 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 payment resolution page. I improved users experience by simply explaining in a plain language the payment didn't go through and they should expect an email with instructions what they should do next to resolve the payment issue. On the Payment resolution page, I added a text that explains what people should do before re-entering any card details. It might be 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.
From the earliest stages of the project, I wanted to keep everyone on the same page. I’ve set up a recurring meeting every week where I played back findings. We came together and synthesised our learnings, 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.
By running UX workshops I prompted the team to focus on users needs. Based on evidence, 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.
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 ideas and create refined higher fidelity prototype which I put to a usability test, and then iterated.
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.
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.
People were contacting the customer support and asking to provide eco-friendly packaging. It was a sign that people became more conscious of environmental issues and willing to reduce their carbon footprint. So during the ideation session, we came up with the hypothesis to display eco-friendly option for packaging.
