Made by Michael
Redesigning a PDP that only half the users finished scrolling.
End-to-end redesign of the Bed Threads product page using research, testing, methodologies and best practices. HotJar, two personas, a card sort, hand sketches, and 12 bespoke components, shipped to engineering with a hand-off doc the squad still references.
Brief
Work end-to-end to redesign the Bed Threads product page using research, testing, methodologies and best practices.
Problem
The original PDP buried the moments shoppers actually used. HotJar showed only half of users scrolled past the size selector, swatches absorbed roughly 60% of all on-page taps, and reviews picked up under 1%, even though 90% of 18-34 shoppers say they trust online reviews as much as a personal recommendation. Hierarchy, not content, was the bottleneck.
My role
I led the PDP arc end-to-end alongside the broader Bed Threads platform work:
- Competitor audit across linen, bedding, and adjacent e-commerce
- HotJar heatmap and session-recording review on the live page
- Two personas, a card-sort workshop, and stakeholder sessions
- Hand sketches of overall structure, then 12 bespoke components individually
- Mid/high-fidelity components in Figma against the brand system
- Mobile size-selector pattern (bottom-of-viewport popup)
- Dev hand-off doc and QA
A PDP rebuilt around what shoppers actually do.
Competitor analysis
I audited PDPs across linen, bedding, and adjacent e-commerce. The patterns worth carrying: square hero images that pull more content above the fold, small breadcrumbs for context, minimal product copy, on-page bundling instead of cross-sells, "Order Swatch" CTAs, and an image-with-dimensions slot inside the gallery. Patterns to leave behind: BNPL messaging subdued to the point of invisibility, "Buy it now" buttons that skipped the cart, and review pages hidden behind a click.
- Square PDP image brings more content above the fold; landscape variants tested too
- Sophisticated image gallery with 360° and VR feature
- "On-page" bundling: duvet insert and pillow options surfaced inline
- Order Swatch CTA, "NEW" callouts on colour swatches, USP callout
- Stylists framing for CS agents; commonly-asked questions on the PDP itself
- Mobile sticky add-to-cart positioned at the top of page to stay out of viewport focus
HotJar insights
Heatmaps
The heatmaps gave a falsifiable read on the original page: 97% scrolled below the fold, 75% made it to swatches, 50% past the size selector. Colour swatches absorbed roughly 60% of all on-page taps; lifestyle imagery 14%; "Read More" 5%; reviews under 1%. And that's before the sticky add-to-cart is counted.
Observed behaviour from session recordings
- A few shoppers oscillated between BYOB and Bedding Sets: bundle already in the cart, cart open, jumping back to the Bedding Set page to keep comparing swatches.
- A few users tapped the checkout thumbnail expecting it to link back to the product.
- One user visibly hesitated between Bedding Sets and Sheet Sets, cursor pinging back and forth, unsure which one to click.
Synthesised research
Product images
60% of US digital shoppers needed an average of 3-4 images when shopping online; 13% needed five or more (Salsify via eMarketer, Feb 2018). Merchandise shown in context is more memorable. "Don't sell your product, sell the experience your product offers" (ecommerceuxdesign.com).
Reviews
90% of 18-34 consumers trust online reviews as much as personal recommendations (Bright Local consumer review survey, 2015). 68% of consumers are inclined to trust more when there are both bad and good reviews; 30% suspect inauthenticity when they don't see anything negative (VWO).
User behaviour
79% of test users always scanned new pages; only 16% read word-by-word (Nielsen Norman Group). The PDP had to reward scanning before it rewarded reading.
Personas
Two personas, named and grounded in household and lifestyle context. They became the tie-breaker every time hierarchy decisions got noisy: which trust signal goes above the fold, what reads first on mobile, when a swatch needs a "NEW" badge.
Stakeholder workshop
A FigJam workshop with the squad (UX, engineering, merchandising, marketing) running a problem → solution → outcome framework across the platform's pressure points: hero, BYOB, curation, product hierarchy. Sticky notes were attributed by author so debate could be traced back to who raised it. The workshop became the tie-breaker for which PDP moments earned the top of the page, and which got bundled together.
Information architecture — low fidelity
With the research and card-sort in hand, I sketched the overall structure of the page by hand. Pen first, Figma later. It forced decisions about hierarchy before pixels could hide them.
Features — low-fidelity ideation
After the overall structure was mapped, I pulled out the 12 bespoke components and sketched each one on its own page. Reasoning about one piece at a time made props, states, and content rules cheap to change.
Sticky add-to-cart
A sticky add-to-cart sits within reach but stays out of viewport focus. The annotated flow below covers every state engineering needed: default Add to Cart, the size-selector popup that pushes up from the bottom of the viewport, the Size guide sheet, the King Special pre-order branch with email capture, the Added-to-Cart success state with tick + copy, and the timed revert back to default.
Methodology
Half of mobile shoppers never made it past the size selector on the original page. The fix framed every interaction along a usability spectrum (Natural, Stretching, Hard) and pushed the size moment into the Natural zone: a bottom-of-viewport popup brings the selector to the thumb, keeps the product image visible behind it, and confirms the choice in place. The same spectrum framing guided the swatch density, the sticky-CTA placement, and the accordion-vs-stack decision in product details.
Dev hand-off
One Figma file covering every component: Final full design, Sticky add to cart, Product details, Push-in colour, Why linen, Reviews, Select size, Pre-order, Buy-now-pay-later A/B test, Brands out / Out-of-stock, Gift card, plus the desktop variants. Each frame carried its states, content rules, breakpoint behaviour, and the conditional logic between catalogue data and the PDP UI. The hand-off became the squad's source of truth for engineering and for the merchandising team writing the back-end copy.
Final design
The redesigned PDP lifts the information hierarchy around what shoppers actually do (swatches, size, reviews, dimensions, on-page bundling) and trims everything that competed for tap-share without earning it.
Live result: View the product page on bedthreads.com.au.
