Ecommerce · Web
Click & Collect product page redesign
Click & Collect was bolted on to a website built for deliveries. I redesigned the product page so customers know how they can get an item before they build a basket.
The impact
ProblemCustomers only found out at the cart that they couldn't collect.
OutcomeConversion up from 1.37% to 1.82%, and Click & Collect orders nearly tripled.
The background
Builder Depot is a London builders' merchant. It had recently launched Click & Collect, so customers could order online and collect their goods from the flagship store. Great!
The problem was the website. It had been built around deliveries, and around showing in-store stock to people who wanted to pop in and grab things off the shelves. Click & Collect had been added on as an afterthought.
I was the only designer. I worked with developers, PMs, QA and stakeholders, and my job was to redesign every product page template so Click & Collect became a proper journey from start to finish.
The problem
A product could reach a customer in four ways: in-store pickup, Click & Collect, delivery from our own depot, or delivery direct from a dropshipper. The page hid all of that behind one Add to Trolley button.
So customers built a basket assuming they could collect everything, and only found out at the cart that they couldn't. Fulfilment was decided per shipment, not per item. If you wanted three things delivered and one collected from the same depot shipment, you couldn't. If one product wasn't available for collection, the Click & Collect option vanished for the whole shipment, with no message and no reason.
That matters in construction. A builder needs materials on site that day, and finding out late can hold up a job and cost them time, money and sometimes their reputation.
What I found
I read the feedback forms, tested the page with three trade customers, audited competitors and spoke to stakeholders.
One customer drove 45 minutes to collect an item, waited 15 minutes in the shop, then was told it wasn't in stock. He drove 45 minutes home. For a self-employed person, that is a day's work gone.
The feedback forms kept saying it. The information existed, we just weren't showing it when people needed it.
One trade customer said he'd probably go into store. He hadn't noticed the Click & Collect badge.
Wickes and Screwfix treat delivery and collection as separate choices up front.
Vans queued onto the main road. Click & Collect was meant to ease that, and the page was letting it down.
What I did
The page had one job before anything else: tell the customer how they can get what they want. I split the single Add to Trolley into two buttons, Deliver and Collect, and moved the stock checker up next to them.
The harder part was everything behind that. A product can be available both ways, delivery only, collect only or neither. It can be out of stock, outside the delivery area or discontinued. Each case still had to make sense on standard products, m² products with a calculator, and configurable grids on desktop.
I designed mobile first, because 65% of our customers are on a phone. Google Analytics showed our most common small screen was 360px wide, so if a layout worked there, it worked anywhere.
The design
What changed after testing
I ran workshops and simple tasks with staff and stakeholders. The main message: too much on the page.
The stock link
- Tried
- A small link below the buttons.
- Learned
- People were missing it, not ignoring it.
- Changed
- Moved beside the buttons, with more contrast, and renamed View In-store Stock.
The m² calculator
- Tried
- Packs, Covers and Area shown at once.
- Learned
- People typed square metres and were handed a pack count to work out.
- Changed
- One input and one price, with Covers behind an expand.
Smaller changes: the badges came out, since split buttons made them redundant, and the desktop grid lost the SKU to give price and availability more room.
I also threw the worst products I could find at the designs, from the longest product name to a door with 13 variants. The rest came from developers tagging me in Jira when a scenario had no answer.
The result
from 1.37%1.82%
Conversion
3 months after launch, vs the same period a year before
from ~320~900
Click & Collect orders a month
End of 2024 to late 2025
from ~10k~37k
In-store stock checks a month
About 4% of product views (July 2026)
15,000
Products covered
Every pricing and fulfilment type, on mobile, tablet and desktop
It also made the case for what came next. Multi-store Click & Collect
★★★★★
“Easy to use website. Found exactly what I needed… Ordering was simple, checkout was straightforward.”
★★★★★
“Collected my 900x760 shower tray using the Builders Depot Click and Collect service and went very smoothly indeed.”
What I'd do differently
- Postcode gating. People could still press Deliver without entering a postcode, so some only found out late that we couldn't deliver to them. I'd push harder to ask for the postcode first.
- The stock link. On mobile it sat too close to the buttons and was hard to tap. I raised it, but I didn't make a strong enough case. Next time I'd bring tap target sizes, not just an opinion. We fixed it in the multi-store project.