Bed Threads product page: responsive composition across desktop and mobile.
Product · 2022 · Bed Threads platform

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.

Role Senior UX/UI Designer
Client Bed Threads
Year 2022
Disciplines E-commerce · Research · Mobile-first

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
Outcome

A PDP rebuilt around what shoppers actually do.

12+
bespoke components shipped to engineering
2
personas guiding hierarchy decisions
22
competitor observations synthesised
1
mobile size-selector pattern, codified for the system

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
Competitor PDP audit: gallery and badge patterns.
Competitor audit: gallery + badge patterns.
Competitor PDP audit: BNPL placement and CTA hierarchy.
Competitor audit: BNPL placement, CTA hierarchy.
Competitor PDP audit: variant picker and dimensions.
Competitor audit: variant picker, dimensions in gallery.
Competitor PDP audit: review surfacing and FAQ.
Competitor audit: reviews + on-PDP FAQ.

HotJar insights

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%. Session recordings showed the same friction in motion — shoppers oscillating between BYOB and Bedding Sets, hovering between Bedding Sets and Sheet Sets without knowing which to click, and tapping the checkout thumbnail expecting it to be a link.

HotJar capture of the original Bed Threads PDP.
Original PDP capture: the 50%-past-the-size-selector page.

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, 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 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.

User behaviour

79% of test users always scanned new pages; only 16% read word-by-word (NN/g). 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.

Persona 1: household and lifestyle context.
Persona 1.
Persona 2: household and lifestyle context.
Persona 2.

Card sort & sketches

A card-sort workshop with stakeholders set the order of operations on the PDP. From there, hand sketches: first the overall structure, then each of the 12 bespoke components on its own page so the system could be reasoned about one piece at a time.

Hand sketch: overall PDP structure.
Overall structure.
Hand sketch: size selector placement.
Size selector placement.
Hand sketch: bespoke components, one at a time.
12 bespoke components, one at a time.

Mid-fi components

Mid- and high-fidelity in Figma to understand the experience and reflect the brand. Each component carried its own props, states, and content rules — colour swatches, size selector, reviews module, dimensions strip, on-page bundle, USP callout, FAQ, sticky add-to-cart.

Mid-fi components: PDP system explored in Figma.
Mid-fi: components explored against the brand system.

Sticky add-to-cart

A sticky add-to-cart sits within reach but stays out of viewport focus, modelled on the competitor pattern that shoppers already understood. Mid- and high-fidelity ideation tested placement, density, and the moment it should become visible relative to the size selector.

Sticky add-to-cart ideation across mobile and desktop.
Sticky add-to-cart: placement and density tests.

Mobile size-selector pattern

Half of mobile shoppers never made it past the size selector on the original page. The fix treats size as a deliberate moment, not a row in a list: 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 pattern became a small piece of methodology the team reused.

Mobile size-selector pattern: bottom-of-viewport popup.
Bottom-of-viewport popup: size as a moment, not a row.

Dev hand-off

Annotated specs covering each component's states, content rules, breakpoint behaviour, and the conditional logic between catalogue data and the PDP UI. The hand-off doc became the squad's source of truth for engineering and the merchandising team writing the back-end copy.

Dev hand-off: annotated PDP component specs.
Hand-off: annotated specs for each component.

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.

Final design: redesigned Bed Threads PDP across desktop and mobile.
Final: hierarchy rebuilt around swatches, size, reviews, dimensions.

Methods

Competitor analysis HotJar analysis Personas Card sorting Stakeholder workshops Mobile-first Hand sketching Component design Developer hand-off