Serta PDP
Revamp

Helping users build their mattress and compare features through a new PDP buy box structure

Introduction

In my role at Serta Simmons Bedding, I lead yearly UX benchmarking and user research for all top-level pages for Serta.com. In Q2 of 2024, I focused on gathering qualitative feedback via UserTesting.com as to the ease of use of Serta’s mattress PDP template used site-wide. From there, I gathered key themes of feedback that would drive the rest of the project.

In collaboration with our creative and SEO teams, new PDP concepts were designed that addressed pain points in 2 unique ways. By testing concepts against one another, our team is able to validate hypotheses & better understand which UX resonates more with our consumers. These concepts are currently in user research. Check back soon for more updates!

Overview

SEO, site operations manager, Serta creative marketing team.

3 month timeline.

Team

Figma, UserTesting.com, Shopify, ContentSquare

Tools

Design Solutions

Visuals, content, hierarchy –
2 unique concepts A/B tested

Screenshots of the Serta iComfort mattress product page on a tablet and smartphone, showing a bed with blue and beige bedding, product details, pricing, and model options.
Laptop and smartphone screens displaying an online shopping page for a Serta iComfort mattress, with images of the mattress and bed setup.

Usability Testing the Old

User research

Uncovering user pain points in the old mattress product page template

Within UserTesting.com, I conducted a qualitative, unmoderated usability study with 8 desktop and 8 mobile users. Participants were asked a series of questions about our Perfect Sleeper Innerspring PDP ease of use with the goal of uncovering problem areas that would drive the redesign.

Methodology

  • Ages 26–65

  • Household income of $40k–$150k

  • Must purchase products online at least every day, week or month

  • Have purchased from a select list of major brands including Walmart, Target, Amazon, Etsy, eBay

User Qualifications

Two webpage images of mattresses. The left page shows an online product page for a Perfect Sleeper Innserping Mattress, with detailed descriptions, size options, and a price of $899. The right page presents a mattress demonstration, highlighting features like zoned support, pressure relief, and cool touch cover, with an image of a woman sleeping on a mattress with additional informational graphics.

Identified improvement areas

After watching user recordings, I identified key themes that would drive the redesign of the page to have a more intuitive experience and address pain points.

A simple line drawing of the letter 'L' and the number '5' in an isometric style, connected and outlined in dark blue on a pink circular background.

IMPROVE MATTRESS CONFIGURATION STEPS

Network or connection diagram with three circles connected by lines in a triangle shape.

REDUCE VOLUME OF UPSELL MODULES

Icon of a document with text lines on a pink circular background.

TAILOR CONTENT/HIERARCHY TO USER PREFERENCES

Icon of a dollar sign with a downward arrow, indicating a decrease in money or expenses.

REDESIGN BUY BOX ORDER SUMMARY SECTION

Interested in viewing the full research findings deck?

After watching all user sessions, I created a deck that highlights user feedback and recommendations for a new PDP structure. This deck was sent out to Serta stakeholders such as the brand, product, creative, copy and SEO.

Interact with this live PDF!

Concept 1

Exploring solutions

A simplified layout with benefit-led content and a clear step up story

Concept #1

Hypothesis #1

By reducing redundant content, users will be able to compare more details within the buy box, reducing scroll.

Hypothesis #2

By swapping the order of the buy box steps, users will better understand the dynamic pricing of their selections

Hypothesis #3

By adding new features such as sticky ATC, estimate delivery date, and more, this PDP will align with industry standards

Hierarchy & content

A refreshed page with user priority in mind — comparing high-level info in the buy box with in-depth details below the fold + reduced modules

Screenshot of an online product page for a Serta iComfort mattress, showing product details, options, pricing, and customer information.
Screenshots of a mattress product listing, showing options for different mattress sizes, firmness levels, and features, with prices and add to cart button.

Visual upgrades & a new variant structure within the buy box

By adding supporting images to variants, users are able to quickly compare options, plus, new variant layout allows users to only see what’s available per model. A new order summary brings clarity and transparency to pricing.

Online mattress shopping webpage featuring Serta iComfort mattresses with options for model, firmness, size, and add-ons.

Sticky functionality and anchor links

Screenshot of a product page for the Serta iComfort Mattress on a website, showing options to select model, price, and an Add to Cart button.

Final Designs

Screenshot of an online product page for a Serta iComfort mattress, featuring images of the mattress on a bed, product specifications, customer reviews, and related information.
Screenshot of an online mattress product page for the Serta iComfort mattress showing product details, images, and purchase options.
Screenshots of a mattress product webpage showing images of a mattress, its layers, and different firmness levels, with a person sitting on the mattress.

Concept 2

Exploring solutions

A clean design with less important content shown on default

Concept #2

Hypothesis #1

Showing less on land within the buy box will create less visual overwhelm.

Hypothesis #2

By nesting firmness levels within the mattress model, users will easily understand available options

Hypothesis #3

Adding an interactive mattress module will align with competitors and be more engaging than a compare chart

A visually minimal buy box on default, leveraging accordions with a new interactive mattress cut out module in place of concept 1’s compare table

Hierarchy & content

Screenshot of a product webpage for a Serta iComfort mattress, showing size options, price, purchase options, and product details. The right side compares mattress models and lists benefits and FAQs. The bottom features icons for warranty, comfort, quality, and compatibility.
Screenshots of a website displaying a Mattress product, its pricing, model options, features, and purchase buttons.

Visual upgrades & a new variant structure within the buy box

In this concept, a high-level bulleted list of benefits per model gives allows users to fully compare without leaving the buy box

Online product page for a Serta mattress with filter options, size choices, firmness levels, and an orange add to cart button at the bottom.

Sticky functionality and anchor links

Screenshot of a Serta mattress product page with sections highlighting quality features, a blue and white color scheme, and the price of $1,499.

Final Designs

An e-commerce webpage displaying a mattress for sale, with product details, reviews, and comparison charts, optimized for desktop and mobile views.
Screenshot of a website displaying a Serta iComfort Mattress for sale, showing a product image, price of $1,499, and options for selecting size and firmness level.
Serta mattress comparison webpage showing a detailed diagram of the mattress layers and features, with a price of $1,499 and an add to cart button.

What’s next?

Check back soon for testing results!

With 2 new design concepts approved by stakeholders, designs have now been handed off to our copy team to write final content. Final mockups will then be turned into working prototypes for user testing. Here, we’ll gain feedback on both designs to ensure we solved user pain points and create one final page layout