Picking a size shouldn't feel like guessing.

Too much choice, too high up.

On the existing PDP, the customer hit five decisions before they'd really started shopping. Above the fold: one size button (a dropdown of dimensions) plus four system buttons (the rug-pad combinations Ruggable sells). All five sat inline, all five had equal weight, and all five had to be parsed before scrolling.

The PM team had a hypothesis sitting in the backlog: by reducing the visible options above the fold (one size button, one system button) and giving the rest of the decision room to breathe in a side drawer, we could lift add-to-cart and conversion. The drawer would also let us add what the inline pattern couldn't fit: images, room-context guidance, and a real size guide.

One size button. One system button.

The pattern was simple on the surface: replace the inline controls with a single Size button and a single System button. Tapping either opens a right-anchored drawer with the full options inside, plus the room to do what the inline pattern couldn't: illustrate sizes with images, surface a Size Guide, and explain system differences in plain language instead of system codes.

Two ways to lay it out. Both tested.

We prototyped two versions of the drawer for both Size and System: a clean variant showing options as labels and dimensions only, and an image variant pairing each option with a visual. The PM team wanted clean evidence on which approach earned the drawer real estate.

Size drawer

Variant A · Clean

Dimensions, listed.

No images. Each size as a tappable row with dimension and use-case label. Lower visual cost, faster to scan.

Variant B · Images

Each size, illustrated.

A visual paired with each option. More guidance for customers who couldn't translate dimensions on their own.

System drawer

Variant A · Clean

Same options, just collapsed.

Same four system options, surfaced from a single button. Removed inline clutter without changing the underlying choice.

Variant B · Images

Each system, illustrated.

Visuals paired with each pad system to make the differences scannable at a glance.

User testing alongside the A/B

The A/B test would give us the lift. It wouldn't tell us why. To answer the "why" I set up a usertesting.com study running in parallel, with three questions to answer:

• Do users prefer the drawer layout over the current PDP design?
• Does the extra space inside the drawer effectively showcase the chosen images and information?
• Do the images inside the size and system drawers convey the intended message clearly?

What users said

Eight desktop sessions and eight mobile sessions. Themes were consistent enough across both platforms to act on.

A drawer earned its place. On desktop, first.

The drawer pattern shipped to A/B on Flatwoven and Tufted PDPs across desktop and mobile web. Desktop carried the lift cleanly. Mobile was directionally similar but didn't reach the team's stat-sig threshold within the test window. The call: ship the drawer on desktop for F/T, leave mobile in test, and keep watching the data.

Same drawer, five more rug types.

With the drawer working on Flatwoven and Tufted desktop, the next ticket asked for the Size Drawer to roll out across the rest of the catalog. Different rug types carry different size availability (Faux Hide, for instance, was rolling out a new 4.5×6 in its animal-hide-shaped silhouette), so each template needed its own desktop and mobile design that respected the available sizes without forking the pattern. Pad System selection stayed inline for this round; the drawer earned its place for size, not system.

Room Size Guide, moved up.

A Room Size Guide already lived on the PDP, just farther down the page. Behavior data showed customers scrolling specifically to reach it, which is the kind of signal you can act on: people were doing the work to find context that mattered to the size decision. The drawer had opened real estate at the exact moment that decision was being made, so we moved the Size Guide there. Same content, surfaced where customers needed it instead of where they had to go find it.

Before · Original PDP

After · PDP Drawer

Once it earned the real estate, what to put in it.

With the drawer pattern shipped and expanding, the next test wave was about the contents. PM and I scoped a series of moves to evolve how the drawer earned its space:

1. 01
   Recast the Size Guide.

   Move from a static size chart to something more useful. Room-tailored images, Small/Medium/Large labels instead of Area/Runner/Round, and best-use-case context for each size.
2. 02
   A recommended-system upsell.

   Surface a recommended pad system inside the Size Drawer so the customer doesn't have to bounce out and back to make a coordinated choice.
3. 03
   Show the current selection, always.

   Pin the current price, size, and system at the top of both drawers so the customer knows exactly what they're modifying. Reduces the "wait, what did I pick again?" round-trip.

What the drawer taught us.