← All case studies/Product page redesign

Men's face wash product page design: show every size at its real price

This salicylic acid face wash for men has 2,285 reviews and a 4.82 rating. On its product page the main photo showed a two-pack of 60 ml tubes while the price under it was $9, the price of a 20 ml trial tube. An Amazon button sat right under Add to Cart, and the page ended after three sections.

+16,1%revenue per visitor
+11,4%average order value
+4,2%conversion rate
Before
The original product page: a two-pack photo and a $9 price, on a phone
The original page
After
The redesign: scroll it and tap the options. Open it full screen ↗
A/B test results against the original page
  1. +16,1%revenue per visitorBoth changes below together
  2. +11,4%average order valueEvery size shown to scale, with its cost per month
  3. +4,2%conversion rateAmazon button out of the buy box
The problem

What the photo showed wasn't what the price bought

The first photo showed two 60 ml tubes. The cheapest option, preselected under "One-time", was $9: a 20 ml trial tube. A shopper who paid $9 expecting the tubes in the photo got a "baby sized" tube, and one of them said so in a review.

Before: a two-pack photo at the top of the page
Before: $9 one-time, and an Amazon button under Add to Cart
What a first-time buyer asksWhat the old page gave themStatus
How much do I get for $9?A two-pack photo, a 20 ml trial at $9Conflicting
How long does a tube last?"3 month supply" on the 60 ml button onlyHidden
Where should I buy it?"Buy on Amazon Prime" right under Add to CartConflicting
How does salicylic acid work?One collapsed "Active ingredients" rowHidden
How do I use it?Not on the pageMissing
A shopper who feels misled by the size doesn't come back for the 60 ml tube.
3sections after the buy box
What I changed

I showed every size to scale, with its price and cost per month

Before
Before: size, scent, a $9 one-time price, and Amazon
After
After: three sizes drawn to scale, each with its price

The size picker now draws each tube to scale: a small 20 ml trial at $9, a 60 ml tube at $12 that lasts about three months ($4 a month), and two 60 ml tubes for sink and shower at $19 ($3.17 a month, marked best value). Under it, one line confirms what ships: "What you see is what ships: a 60 ml tube."

Subscribe and save 10% is preselected, every 3 months to match the tube, and the Add to Cart button shows the exact total.

Before: a review about the "baby sized 20 ml tube"
After: the same review, with a reply that points to the new size picker

Conversion principleMake value visible in the unit the shopper thinks in (price per month + honest sizing). A $12 tube that lasts three months is cheaper per month than the $9 trial, once you can see it.

A/B test result: +11,4% average order value from this change, tested against the original page

I took the Amazon button out of the buy box

A bright yellow "Buy on Amazon Prime" button sat directly under Add to Cart, the same size. It sent ready buyers to another store, where the subscription, the free sunscreen and the brand's own reviews don't follow them.

Before
Before: Add to Cart, then Buy on Amazon
After
After: one button, plus free sunscreen and the skin quiz link

The buy box now has one action. Under it: free sunscreen on orders over $25, made with a dermatologist, and a link to the 60-second skin quiz for anyone unsure.

Conversion principleOne primary action per decision (choice architecture). A second store button under Add to Cart splits the buyer's attention at the moment of purchase.

A/B test result: +4,2% conversion rate from this change, tested against the original page

I built the page out to explain the product and the routine

The old page had reviews and related products after the buy box. The new one explains why the product works and how to use it: a diagram of salicylic acid cleaning inside the pore, sixty seconds morning and night in three photos, the dermatologist's line, why $12 is about $4 a month, the three-step routine, reviews you can filter by skin type, questions, a closing add-to-cart and a full footer. On a phone a slim bar keeps the size and Add to Cart in reach.

Inside the pore: what 2% salicylic acid does
Why $12: about $4 a month
Step 1 of a simple routine
The closing add-to-cart

Conversion principleExplain the mechanism (reason why). "It cleans inside the pore" turns a $12 wash into something a skeptic can believe.

On desktop
The original page on a laptopThe redesign on a laptopBeforeAfter↔
The first screen on a laptop. Drag to compare.
Why it worked

Why these changes worked

Shoppers saw two tubes in the photo and paid for one small one, and some felt misled. Drawing every size to scale with its cost per month showed that the 60 ml tube and the two-pack are the better deal, and average order value rose 11,4%.

With the Amazon button out of the buy box, ready buyers finished on the brand's own store, where subscriptions and offers apply. Conversion rose 4,2%, and revenue per visitor rose 16,1% overall.

Let's talk

Let's find out why your visitors aren't buying.

Send me the page. On the call I'll tell you what I'd fix first, what it could move, and whether I'm the right person for it.

Book a call