UX teardown · 06
Every number on the banner is true.
Somebody was browsing Hearth for a smart plug and a banner slid into view: $36.00 with a line through it, a big red $6 beside it, "Limited-time offer with promo code" in small print underneath. Six dollars. They tapped. The product page said $36.00, and under it, in green, "Savings: $6 with code VOLT6". The $6 was the discount. Nothing on the banner was false. The strikethrough was accurate, the $6 was accurate, the small print said exactly what the deal was. And almost everyone who sees it reads a price that does not exist.
Before
Search Hearth
Holiday deal
Save on the Volt Smart Plug
$36.00
$6
WORKS WITHHOMEVOICE
Limited-time offer with promo code
Under $25
The $6 is the discount.
After
Search Hearth
Holiday deal
Volt Smart Plug
$36.00
$30
Save $6 today
WORKS WITHHOMEVOICE
Limited-time offer, 3 days left
Under $25
Same card. The big number is the price.
Nobody lied. The layout did.
A struck-through number next to a bigger, bolder number is one of the most widely understood pieces of design in the world. It means "it was this, now it is this". Nobody had to be taught it. Every price tag, every sale rail, every checkout page since strikethrough existed has said the same thing, and people carry that meaning with them onto every new screen. Designers call it a mental model. It is the reading a person brings before they read anything.
Hearth's banner borrows the shape and puts a different number in the slot. The struck-through price is real. The $6 is real. But the slot beside a strikethrough belongs to the new price, and the moment a discount is placed there it becomes a price whether anyone intended it or not. The small print is not a correction. It is 12px of text under a 44px number that has already done its work.
Why it hurts
A real discount, and it loses the sale.
Same four steps as every interaction, run against the banner as it ships:
1
Filter: passes, too well. The eye goes straight to the red badge, because red beside a strikethrough is the shape of a sale and nothing else on the page competes with it. The banner is very good at being noticed. That is the problem, not the fix.
2
Seek: fails. The person is looking for one thing, the price, and the banner hands them a number in the price's slot. Their search ends there. The truth is in the small print they were never going to read, and again on the product page in green under a $36.00 they were never expecting to see.
3
Act: fails, and this is where it costs money. They tap and the page says $36.00. The ones who find the green line work out it is $30. But $30 is not being judged against $36 any more. It is being judged against the $6 they walked in with, and next to $6 it is a loss. The first number a person sees becomes the yardstick for every number after it. Hearth set the yardstick at $6 and then asked for five times that.
4
Store: fails. What sticks is not the plug or the price. It is the feeling of having been had, and people push back on that by walking away from offers they would otherwise have taken. The next red number this store shows them will be read as a trick before it is read as a deal.
Three of four fail on a banner where every number is true. The whole defect is which number is big.
The fix
Put the price in the price's slot.
Not a redesign. The same card, the same red badge, the same strikethrough. The badge says $30, because $30 is what they pay, and the saving is said in words underneath: "Save $6 today". Every number is still true. Now they are also in the places people expect to find them.
01
The slot next to a strikethrough means "now".
Only ever put the new price there. Not the saving, not the monthly instalment, not the price after a code. If a number is not what the person will be charged, it does not belong beside the number they will not be charged.
02
Say the saving in words.
"Save $6" cannot be misread. "$6" can. A discount is a sentence, not a price tag, and it needs the verb. The fixed banner loses nothing by saying it: the saving is still there, still visible, and now it means what it says.
03
Choose the anchor on purpose.
Whatever number a person sees first is the one every later number gets compared to. Show $6 first and $30 is a loss. Show $36.00 first and $30 is a win. Same plug, same price, opposite feeling. The banner gets to pick which, and the one that shipped picked wrong.
04
This was never about smart plugs.
"From $9 a month" where $9 is the annual plan divided by twelve. "Up to 50% off" on a rail where one item is. "Free" with a card required. Each one borrows a shape people already trust and puts a different number in it, and each one collects the tap and pays for it at checkout, when the number they saw meets the number they owe.
The rule worth stealing
The big number is the price.
Whatever you make biggest, people will read as what they pay. That is not a rule you get to set. It is the reading they arrive with, and your design either fits it or fights it. So the big number is the price, the saving is in words, and the strikethrough only ever sits beside the number that replaces it.
