top of page

Fixing a Failing Checkout to Boost Sales

CASE STUDIES

Team composition

CEO | E-commerce Director | Head of brand & design | Junior designer

Context

After years of in-house coding that restricted market teams from managing content, Actegy launched a new US website to test a redesigned UI ahead of an upcoming connected device release.

The transition from Magento 1 to Magento 2 aimed to reduce the design team’s coding workload.

 

However, the new design failed to deliver the expected results, leading to a drop in add-to-cart rates and sales conversions, along with a higher bounce rate. This prompted the Executive team to reassess and improve key pages.

🚩  Abandonment rate went from 66% to 70% in 6 months

🚩 +60% Bounce rate

🚩 -56% in add to cart after launching the new site.

🚩 Conversion rate went from 3% to 2.3%

Source: Google analytics

Revitive checkout old visual

🚩 The design was not user-centered, failing to meet user needs.s & conversions.

🚩 The redesign was too drastic compared to the previous version.

🚩 The design lacks in accessibility elements.

🚩 No research was done to understand the user journey on the checkout.

Problem

The US redesign on the checkout journey led to usability, accessibility, ranking and trust issues, bring down the conversion and making it unsuitable for global rollout.

How might we optimise the checkout flow to improve usability  and accessibility, reducing friction and increasing sales conversion while ensuring it scales effectively across multiple global markets?

User Goals

➡️ Improve the overall journey

➡️ Better usability and accessibility on mobile

➡️ Simplify the checkout step

Business Goals

➡️ Go back to an abandonment rate of 66%

➡️ Return to a 3% of conversion rate

➡️ Increase sales volume 6 months after release

Design Thinking Process

Using data insights and the Design Thinking process, I assigned the Junior Designer to lead the competitor analysis, applying her findings to create wireframes and visual experiments while building on existing personas. Later, I mentored her in developing a user testing plan to validate our solutions.

Competitor analysis

Understand what works well in the industry, spot opportunities for improvement, and design a better user experience.

Dyson

Indirect competitors

✅ Multiple Payment Options.

✅ Everything is scrollable and scroll automatically.

✅ Accepted payment methods clearly shown.

✅ Possibility to register the machine.

✅ Click and collect option.

🔴 Account Creation Requirement.
🔴 Time and delivery picking is difficult on mobile.
🔴  Separations between 3 steps of the checkout is not very clear.

🔴 Contact icon blocks the usability of the checkout.

Dyson.png
Philips

Indirect competitor

​✅ Guest Checkout Availability.

✅ Clear one-page checkout.

✅ Multiple payment available.

✅ Clear delivery method with fees.

✅ More payment option available at the end of the journey.

🔴 3 buttons overwhelming the screen
🔴 Steps separation not very visible
🔴 Payment methods after entering card details which make it very unusual.

🔴 No order summary available through the checkout flow.

Philips.png

User Testing

Following the previous stage and experiments, I organised a usability test with five colleagues from the scientific team—none of whom were familiar with the project or frequently visited the Revitive website.

The Junior Designer wrote the test plan and conducted the sessions, while I provided support, took notes, and helped analyze the results.

Internal User Test Plan

Mobile Checkout flow

👥 5 Internal Users from science teams

🎯 Objective:

Identify usability issues in the mobile checkout flow and gather feedback to improve the experience.

📌 Goal:

Improve the mobile checkout experience by reducing friction and making the process more seamless for users.

🛠 Testing Method

Moderated testing → Each participant completes tasks while we observe and take notes.

 

Think-aloud approach → Users describe their thoughts while interacting with the checkout.📍 Tools: Note-taking on pain points and user reactions

🔍 Scenario:
You are a first-time customer buying a product on your mobile device. Complete the checkout process smoothly.

Tasks:


  • Add an item to the basket – Observe how intuitive the process is.

  • Proceed to checkout – Check for friction in transitioning from basket to checkout.

  • Enter shipping & payment details – Assess form usability, auto-fill options, and ease of input.

  • Complete the purchase – Evaluate clarity of payment options and final confirmation.

  • Review confirmation page – Ensure order details and next steps are clear.

Key Areas to Observe
📌 Ease of navigation – Do users struggle to find buttons or progress to the next step?


📌 Form usability – Are inputs easy to complete on mobile?


📌 Payment process –  Are payment options clear?


📌 Friction points – Where do users hesitate or get confused?

Next Steps
✅ Synthesise findings – Identify common issues & insights.


✅ Prioritise improvements – Focus on quick UX/UI fixes.


✅ Iterate & test again – Apply changes and revalidate usability.

User insights

1️⃣ Support button is too big
4/5 found them distracting

📌 Insight:

Users find the support button too prominent, possibly overwhelming the interface.

💡 Action:

Reposition it to maintain visibility without being intrusive.

3️⃣ Delivery type should come before delivery address 5/5 prefer this order

📌 Insight:

Users expect to select the delivery method first, which aligns with mental models from other e-commerce sites.

💡 Action:

Reorder the checkout flow so users choose delivery type before entering their address.

5️⃣ Payment Options were  not noticeable
3/4 expected 4 options

📌 Insight:

Users expected more payment choices, but they may not have been well communicated.

💡 Action:

Improve payment option visibility, possibly using logos, icons, or better payment option sections.

2️⃣ Back button is not noticeable
2/5 didn’t see it

📌 Insight:

The back button lacks visibility, leading to potential navigation issues.

💡 Action:

Increase contrast, size, or placement to make it easier to spot.

4️⃣ VAT Exemption was missing
5/5 asked where find the VAT exemption

📌 Insight:

Users need should be able to apply for VAT exemption following UK's health rules.

💡 Action:

Make VAT exemption more prominent, possibly near the payment section with a clear CTA.

6️⃣ Overall usability is strong
5/5 found it easy to use

📌 Insight:

The checkout feels smooth and intuitive, meaning most usability principles were well applied.

💡 Action:

Maintain core usability while making the requested adjustments.

New Checkout

Following the usability test and user feedback, I organised a priority workshop with the E-commerce team, CEO, and developers. The session focused on reviewing the competitor analysis, stakeholders ideas, tested designs, and user insights to align on key improvements.

Final Priorities

These 3 MVP changes were selected for ease of implementation, requiring no additional capacity while delivering immediate business impact.

Priority #1

VAT exemption should be visible but simple, ensuring no checkout disruption or drop-offs.

Priority #3

Buttons:

- Delete the contact button 

- Improve the back buttons

Priority #2

The type of delivery should be before the delivery address form.

Challenges

Challenge #1

We aimed to make minimal but impactful changes, following an Agile approach to avoid adding to the already high implementation backlog and to prevent any risk of disrupting the checkout flow.

Challenge #2

Stakeholder pressure for quick results → Ran prioritisation sessions to align expectations & secure buy-in.

Results & Successes

I guided the Junior Designer in applying metrics to her design, which she reviewed every 3 weeks. This was especially crucial since we didn’t conduct direct user testing and to make sure we could make changes quickly without impacting the sales.

6 months post launch results

📊 Card abandonment is back to 66%, as it was before the redesign.

📈 Checkout conversion has improved slightly from 2.3% to 2.7%

📌 Recover lost sales (could also be due to Covid)

Future improvement in Backlog

✅ Multiple payment option available earlier in the journey.​

✅ Conduct user surveys to identify pain points and needs for potential improvements.​

✅ Review the metrics and user feedbacks to decide what should be improved.

Team Successes

Junior Designer

First time writing a user test plan and conducting the test. This was a great learning curve and she became more confident at the end of the testing sessions.

Personal

I had the chance to show the importance of user centred design with the great user feedback we had. This was a step forward in communication the importance of UX within the company.

Revitive - Checkout - Clay_Mockup1.png

You wish to read more case studies on Revitive and my B2C work?

bottom of page