case study 02

One template. Three tiers. Three opposite answers.

A unified product page template across a card portfolio Sole designer — template and all tier applications Live A/B tests, four products Mixed / conditional
Problem
Product pages had drifted apart across a portfolio spanning business, premium and consumer cards. Unifying them under one template was the obvious move.
What I did
Designed the template and every tier application of it, then tested live across four products.
Result
Won on business, lost on premium, lost on consumer — all by low single digits.
What it proved
The tiers read pages in opposite directions. “Product template” is the wrong abstraction for a portfolio spanning tiers.
The scroll inversion — reader scrolls, two cohort gauges move in opposite directions INTERACTIVE BUILD · inline HTML, no asset file

Two cohorts, one page, opposite reading behaviour. Build this as an interactive component rather than a still: the reader scrolls a mock page and watches the two gauges diverge under their own hand. The finding is temporal, so let them enact it.

Shell page. Structure, masthead and at-a-glance are final. Body copy is in the markdown draft; screens and the items below are still needed. Delete this block when the page is written.

  • What the “smarter sticky banner” did differently, and what the product exploration component was
  • What you were betting each of the three changes would fix
  • Whether premium desktop losses concentrate by product
  • Duration and team shape
  • Screens: template + three tier applications, above-the-fold per tier, exploration component, sticky banner states

One template. Three verdicts.

TierDirectionProbability read
BusinessUp — best product a few points72% the redesign is best
PremiumLow single digits down, isolated to mobile99% control is best
ConsumerDown a few points97% control is best

Read as a portfolio average, this is a wash with a slight negative tilt. Read as three results, it's the most useful thing I've worked on.

The hypothesis had an assumption buried in it

The stated hypothesis took for granted that “friction” and “appeal” mean the same thing on every product page in the portfolio. That assumption is the actual subject of this case study, and it was invisible to me when I wrote it.

The template, then its three tier applications at identical scale
One system, three products with different jobs. The whole argument depends on seeing that it really was one template.
Above the fold — business, control vs test img/pt-fold-business.png
Where business shoppers begin evaluating.
Above the fold — premium, control vs test img/pt-fold-premium.png
Where premium shoppers finish deciding.

Business shoppers convert when they scroll. Premium shoppers convert when they don't.

Business — the body is the dealbreaker. People who scrolled into the page body converted at roughly twice the rate of those who didn't, and the gap held in both control and test. A card journeys study independently found business shoppers naming lack of clarity and detail as a top pain point.

Premium — won or lost in the first viewport. Exactly inverted. The people who didn't scroll converted at more than twice the rate of those who did — in both control and test, so it's a property of the audience rather than an artifact of either design. And a premium landing page study found those shoppers reported their trust came from the brand, not the page.

Scrolling isn't engagement on a premium page — it's hesitation. The page's job is to confirm a decision in the first viewport and then get out of the way.

BUILD THIS — the scroll inversion as information design
Business scrollers ~2x, premium non-scrollers ~2x, in one image. Zero confidentiality exposure and no screenshot can carry it. Highest-value asset in the portfolio.
Product exploration component — on business and on premium img/pt-exploration-component.png
Best candidate for the change that helped one tier and hurt the other.
Sticky banner — behaviour on scroll MOTION · img/pt-sticky-banner.mp4 + .webm
“Smarter” is a claim about behaviour, so it needs motion. Four-second silent loop.

A template is the right abstraction for pages that share a reading behaviour

Card tiers don't share one. So the output shouldn't have been one template — it should have been a template family, with an explicit tier-specific contract about what lives above and below the fold.

Before unifying pages under a template, check whether the audiences read them the same way. If they don't, consistency of component is fine and consistency of architecture will cost you conversions.

What I'd flag

The limitations I'd raise before someone else did.

Two tests stopped early and nobody wrote down why.
My recollection is we had enough signal to make a call — a legitimate reason to stop — but it was never documented, and an undocumented pause is indistinguishable from a test that broke. That's the precise failure mode the catalog's Inconclusive-versus-Untested distinction exists to prevent, and this initiative is one of the cases that taught me it was necessary.
Three changes shipped together on every tier.
So I know the bundle's direction per tier and can't tell you which component drove which effect.
I designed the assumption in.
Nothing forced the portfolio-constant framing; I didn't interrogate it, and the scroll data was available in principle before the test ran.

Next: Eighteen initiatives nobody could account for — the system that made every result above reusable.

Partnership work under NDA. Screens are abstracted and metrics are relative. What's real here · Privacy