How I turned a user drop into a +25 % conversion uplift
Validated with AI-predicted attention heatmaps before engineering started.
THE PROBLEM
The listing surface wasn't failing visually. It was failing informationally.
Conversion rate sat at 10%. The surface had no information hierarchy. Price, availability, and time-sensitive status signals were visually equal, buried, unweighted, unordered. Users couldn't extract what they needed fast enough to act.
THE INSIGHT
We were violating a scanning pattern we already knew about.
F-pattern scanning: attention lands heaviest top-left and drops off fast. Our listing cards placed every decision-critical signal price, status, availability centre and right. Exactly where attention dies.
The fix wasn't more information. It was moving the right information to where eyes already land.
EXPLORATION
Three concepts. Each tested a different hypothesis.
THE DECISION
Two pushbacks. Both won with evidence, not opinion.
The timer colour system. Engineering pushed back on a three-state colour shift, a number update is simpler to build than a colour change. I made the case using existing user feedback: people were scrolling past listings about to close without registering the urgency. Green → yellow → red gave the timer a second communication channel beyond the digits. Users didn't need to read "0:12" to know a listing was closing. The colour told them first. We kept it.
Green > Yellow > Red
The tile-level purchase button. One PM pushed for an explicit buy button on the card. I pushed back: tapping a listing opens a detail view where the purchase step lives, progressive disclosure that lets users preview before committing. Adding a button to the tile duplicates the step and consumes space the hierarchy needs. We removed it. Validating this with usability testing is the V2 research priority.
THE FINAL DESIGN
Key design decisions, annotated.
Designed for mobile. Extended to desktop without layout compromise.
AI VALIDATION
Validating the hypothesis before a line of code was written.
Before engineering began, I used Attention Insight to generate predictive heatmaps of both versions. It was directional check, not a substitute for user research. The prediction held: CTA score 9.4% → 25.0%. Clarity score 30.7% → 46.7%.
IMPACT
Every key metric moved in the right direction.
+25%
Conversion uplift
12+
Partner brands launched
0
The AI-predicted attention shift was confirmed directionally by post-launch analytics. Direction was consistent across all partner brands; magnitude varied by brand context.
Any high-density listing surface, financial products, marketplace search, event booking faces the same problem: multiple decision signals competing for attention in a short session. The solution is the same: information hierarchy mapped to scanning behaviour, not visual decoration.
Built once. Shipped across 12+ partner brands without a single layout change.
A component that doesn't require redesign per brand is a commercial asset
REFLECTIONS
What I'd do differently, and what comes next
Test progressive disclosure earlier. The detail-view decision was grounded in established UX convention, not usability evidence from this specific context. A moderated session pre-launch would have confirmed the assumption or caught an edge case before ship.
Instrument listing states individually. We measured conversion at the surface level. We didn't know which status state - filling fast, full, starting soon was driving or blocking conversion at the card level. That granularity would have made V2 decisions significantly sharper.