For a business on the brink of collapse, checkout was the most fertile ground to optimise and boost short-term liquidity for wilko.com. Optimising checkout was the first phase of our mobile UX strategy – widening the end of the funnel so more traffic could pour through.
30 second summary from ChatGPT
This case study demonstrates strong problem-solving skills, data-driven decision-making, and a keen understanding of e-commerce UX best practices.
The designer identified friction points in the existing checkout flow, addressing issues like guest checkout barriers, complex form fields, and lack of payment clarity. Through iterative testing and strategic design changes, they streamlined the process, reducing friction and improving usability. The result was a more intuitive, user-friendly checkout that better aligned with customer expectations, ultimately driving higher conversions.
Design challenge
The wilko.com mobile checkout conversion is below market parity, leaving anywhere between £8m-£12m/yr on the table. How do we increase checkout completion rates to unlock significant in-year revenue benefit?
Outcomes
- CRO winner projected +£7.7m increase (+9.74% CR) over 12 months
- Post-buyout, with 60% less traffic, we built the new checkout, which is projected to drive £5.9m (+10.1% CR, +637.50% ROI) over 12 months
- 98% of customers surveyed (80+ responses) rated it easy or very easy to use
Collaborative approach
Research activities & lightning talks to share insights from data, design and engineering
Framing the problem(s) to solve
Ideation and how might we’s
Tech review, feasibility scoping & discovery of downstream systems
Experimentation setup and engineering plan
Production-ready UI, interaction & journey artefacts for handoff
Build, QA, test, measure & analyse
Research activities
UX: Heuristic usability evaluation using Nielsens 10 heuristics
UX: Contextual enquiry, observing 4 participants complete different types of home delivery orders
UX & PM: Analysis of 5 home & garden retailers and 5 of the highest traffic UK ecommerce sites
UX & PM: Benchmarking with Baymard and IMRG
UX & Data Analyst: Behavioural Data Analysis from Content Square & GA
UX, BA & Tech Lead: Tech review of data architecture and downstream systems
Key findings
1. Barriers to delivery costs
Guest users have to provide 7 pieces of personal information before they can see delivery options and prices.
2. Pre-defined delivery dates
Customers are shown standard delivery date and price before they’ve selected a delivery option so they think this is the only method available and abandon.
3. Progress lost, baskets emptied
Strange backend logic was causing guest customers to lose the contents of their basket if they idle in checkout for a few minutes or attempt to add more items to their order.
4. Redundancy for express payments
The ~25% of customers that use PayPal and Apple Pay have to perform 9 needless interactions to checkout.
5. Wasted cognitive effort
The lack of visibility and feedback of change when customers select delivery and payment options means that they have to hunt for what to do next in order to proceed.
6. Lack of trust
First impressions of the interface is that it’s dated, disorganised and unloved, which doesn’t exactly scream reliable and trustworthy when users consider handing over personal information.
7. Poor error handling
1 in 4 customers that use the lookup to find their address, their address line 1 errors because it’s longer than 28 characters and they have to manually copy and paste parts of the address into address line 2.
How might we…
…reduce barriers to seeing delivery and payment options without impacting post-purchase experience?
…retain basket and checkout progress for guest users?
…build greater trust and confidence to reassure users when they handover their personal information?
…reduce distraction and cognitive load on mobile so users can focus on key tasks?
I created a series of flows, process diagrams and conceptual screens to generate potential solutions, along side other members of the team.
Grouping, quantifying and prioritising
Using dot voting across the team, I consolidated 25-30 ideas into 2 primary experiments for phase 1 of checkout optimisation and a few ‘ad-hoc’ experiments. The data analyst helped us quantify the commercial opportunity, which ranged between £6m – £8m.
Experiment 1
Reduce the level of friction to see delivery costs and payment options.
Experiment 2
Enable the ≈25% of PayPal and Apple Pay users to checkout in 12 fewer interactions with just their address.
Wireframes & experiment artefacts
I turned the initial concept work into happy path wireframes and held a couple of tech review walkthrough sessions.
I then worked up experiment-ready UI screens to help the BA create stories and acceptance criteria. These screens were relatively light touch given it was an experiment so we primarily focused on home delivery on mobile only, which covered 80% of traffic.
Challenges in dev
Production time increased from 6-8 weeks to around 16 weeks because of the following ‘surprises’:
- All 3 squads ended up working in checkout at the same time due to unplanned business directives and contractual obligations
- Saved cards feature was turned on before launch, so we needed to build a new journey
- A few critical bugs slipped through QA, which delayed the launch of the A/B test by several days
- Backend resource was wiped out for the length of this project, which posed roadmap risks
- Google Optimise was due to sunset within 2 months of launching so we needed a replacement tool
Communicating with stakeholders
- Fortnightly: Squad updates and demos to the Digital Experience team (product, UX, CRO and data teams)
- Feb: Walkthrough of an interactive prototype with the Head of Digital Experience & Director of Digital, Marketing & Comms
- Mar: Omni-programme video with checkout walkthrough and 2023 digital priorities to 100+ senior leaders
- Apr: In-person walkthrough with CCO & CEO
- May: Omni-channel programme activity deck with revenue predictions
- Jun: Pre-launch presentation pack to Digital, Marketing & Comms
Experiment 1 outcome
Within 2 weeks of analysis of experiment 1 and with 99.8% statistical confidence, conversion was up 2.7%, basket size was up by 1%, revenue per session was up by 5% and 5.1% more users reached the payment page. If these continued across 12 months, experiment 1 alone would hit 87% of the forecasted revenue prediction for both experiments.
The decision to push from 50% of traffic to 100% was taken within 3 weeks of go-live.
The collapse
Right in the middle of our experiments, the business announced notice of intention to appoint administrators. Dropship products (12,000+ home delivery items) were all switched off and home delivery was switched off a few days later.
Based on wilko.com’s forecasted financials, experiments 1 & 2 were poised to generate around £7.7m additional in-year revenue.
Reboot & production-ready UI
We got a second bite of the cherry after The Range buyout. I created a production-ready handoff for a brand new dev team to implement the checkout experiment into the live site using Figma components.
It felt a bit like building from scratch, given that all previous tech knowledge was lost. But in Q2, 2024, the new checkout finally launched.
A hard deadline was placed on launching by senior leaders, which cut down the MVP scope considerably and turned it into a phased release.
The results after 1 week
- Overall checkout conversion rate up 8.3%
- Mobile checkout conversion up 9.6%
- Desktop checkout conversion up 3.3%
- 98% of customers surveyed (80+ responses) said checkout was easy or very easy to use
Traffic and sales were considerably lower post-administration so the projected revenue uplift was far less at £2.18m. But had these results been applied to old traffic numbers, the uplift would have been around £6.5m across 12 months.
Fast follow & phase 2
With a hard deadline, a lot of phase 1 scope was moved to a fast-follow to mop up bugs and defects. Phase 2 included solutions for:
- Improved session behaviour and basket retention
- Improved delivery SLAs and supporting information for mixed orders containing dropship and heavy items
- Mitigating issues pre-purchase to help resolve common delivery complaints