Role : Lead Product Designer · Team : 2 PM, 1 Engineer, 1 QA · Timeline : 4 weeks · Platform : Mobile + Desktop (Web)
A high-traffic listing surface. 3M+ users. 8+ partner brands. One design that had to work for all of them with no per-brand customisation.
THE PROBLEM
The listing surface wasn't failing visually. It was failing informationally.
Conversion rate sat at 10%. Before opening Figma, I mapped session drop-off with the PM and Head of Product to confirm where users were losing momentum.
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.
Scattered decision signals
No priority hierarchy
Low Conversion Rate
(10%)
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.
P1
Countdown Timer
creates immediate urgency
(Urgency/Cost)
P2
Ticket Price
captured early in the scan
(Cost)
P3
Reward pool
primary financial motivator
(Incentive)
EXPLORATION
Three concepts. Each tested a different hypothesis.
Concept A
Rejected
Too much vertical space per item — not enough listings visible above the fold. For a user making a fast decision on mobile, scrolling to compare is a conversion killer. This ruled out the vertical format entirely.
Vertical card
Structurally close to what we shipped, but a PM pushed for an inline purchase button on the tile. I pushed back: tapping a listing already opens a detail view where purchase happens a progressive disclosure pattern that reduces commitment anxiety. A tile-level button duplicates the action and consumes the space needed for status signals. Removed.
Concept B
Horizontal tile + buy button
Three rounds of layout iteration to lock the information hierarchy. Decision signals anchored top-left in priority order: countdown timer (urgency), price (cost), reward pool (incentive). Deployable across all partner brands without touching the layout.
Concept C
Horizontal tile + with improved layout
Selected
THE FINAL DESIGN
Key design decisions, annotated.
RESPONSIVE
Designed for mobile. Extended to desktop without layout compromise.
The same information hierarchy — timer anchored top-left, price below, reward pool right-aligned — translates directly to a 3-column grid on desktop. No redesign. The card component scales; the hierarchy holds.
Navigation labels and brand theming are configured per partner — the component architecture and information hierarchy are product-agnostic.
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 — a directional check, not a substitute for user research. The prediction held: CTA score 9.4% → 25.0%. Clarity score 30.7% → 46.7%.
SCALE
Built once. Shipped across 8+ consumer brands without a single layout change.
Per brand: colours and brand imagery updated. Layout, hierarchy, interaction states, accessibility spec — untouched.
This wasn't just a UX improvement. It compressed brand deployment time and removed the quality variance that comes from building each brand separately.
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.