PDP Optimizations

BROOKLINEN

2024

PDP Optimizations

The Brooklinen PDP is constantly being reviewed, iterated on, and improved for an optimal user experience. We recognized an opportunity to optimize the mobile viewport on these pages in order to make key interactions easier and make shopping on Brooklinen more delightful overall.

VOOP Optimizations:

What are VOOPs, you ask? For us, it means "Viewable On One Page". Is this real UX terminology? Probably not!
Anyway, these are the key VOOPs that we kept in mind when optimizing our PDPs:

VOOP 1: Landing Screen

Upon landing on a PDP, a user could not even see the product image.
‍

VOOP 2: Image Gallery + Swatches

Color swatches were not in view with the image gallery, so browsing colors required a lot of up and down scrolling.

VOOP 3: Product Details

Product details were wordy and overwhelming to skim through.
‍

Reconsidering Sticky Elements

A large portion of our mobile viewport was being taken up by sticky elements. By implementing a new scroll behavior for the navigation menu, along with some other sticky element updates, we gained 268px of screen space.

An A/B test showed us that unsticking our Add to Cart CTA actually increased CVR rate with statistical significance.
‍

We also found a new home for this evergreen “Free Shipping” message. This way, it is top of mind for the user as they add to cart, but not taking up valuable screen space.

Swatch Optimizations

A number of changes were made to our color swatches to help optimize the viewport.

Swapping placement of the size and color selectors put the swatches closer to the gallery, so users no longer needed to scroll up to see the gallery upon selecting a new color (something we received a fair amount of user feedback on.)

Additionally, Essential and Seasonal colors were condensed into one section, with a new home for the "Seasonal" callout.

I updated the swatch styles as well, transitioning from circle to square. This makes colors easier to view and compare.

I also updated our "Out of Stock" swatch style, as the previous treatment made it very difficult to spot which colors were not in stock.

VOOP 2 Optimized

Getting the swatches in the same viewport as the image gallery was a huge usability win.

Product Detail Redesign

User feedback told us that our product details were very wordy and required some hunting for relevant information.

We shortened our copy, as well as redesigned this section to an accordion style. This made it easy to skim and select the specific information the user was interested in.
‍

Final VOOP Optimizations

With spacing edits, swatch changes, and sticky element optimizations, we were able to make vast
improvements to the key VOOPs of the PDP.

VOOP 1

VOOP 2

VOOP 3