Serta.com
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
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
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.
IMPROVE MATTRESS CONFIGURATION STEPS
REDUCE VOLUME OF UPSELL MODULES
TAILOR CONTENT/HIERARCHY TO USER PREFERENCES
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
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.
Sticky functionality and anchor links
Final Designs
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
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
Sticky functionality and anchor links
Final Designs
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