Redesigning the Product Detail Page
Industry:
Retail, Beauty
2023
Timeline:
Role:
Senior Product Designer
Responsibilities:
UX/UI Design
RODAN + FIELDS
Overview
Over the years, the team incrementally added and tested lots of new features on the Product Detail Page (PDP). As a result, critical information was fragmented across tabs, tooltips, and sections below the fold.
A fragmented PDP diluted the product story. We realigned the experience to clearly express R+F’s regimen philosophy and convert more effectively.
Problem
Key product context was hidden below the fold and within tabs, causing users to overlook important information.
Important information placed in tooltips went unnoticed because the tooltip triggers were too small and lacked visual prominence.
Important information such as pricing value and subscription benefits was easy to miss.
When users landed on individual products that were part of a regimen, the pathway to the full regimen page was unclear, limiting discovery of the complete solution.
As a result, users often evaluated products in isolation rather than understanding the full regimen, limiting the opportunity to increase both conversion and average order value.
How might we surface the value of Rodan + Fields’ regimen-based skincare system on the Product Detail Page to help users understand the full solution and increase purchase conversion?
Focus on the goal, not features
Build a scalable PDP that meets and fits the needs of all R+F’s portfolio of products and tailor experience for different user types (Consultant, Preferred Customer, Retail Customer, New Customer).
• Optimize for mobile
• Improve product page SEO
• Ensure ADA compliance
Early insights from the field
We tested the existing product detail page with 8 participants. Our goals were to understand the challenges and identify the areas of opportunity to drive the planning phase for next steps.
Heatmap Observations
Customers want to learn more about regimen
11.6% of all clicks on page were on “More” button below product description (most clicked on part of PDP)
Images on product page help drive conversion and tell product story
14.8% of page clicks on product images
Visitors are significantly more likely to engage below fold
75% of page visitors view product description, which lies beneath the fold
Popular placements matrix
Most Important
Price
Product Description
How to use (regimen set)
Safety warnings
Reviews + Ratings
Least Important
Founder testimonials
Before & After photos
FAQ
Sign up for membership
Help chat
Competitive Analysis
Looked at both mobile and desktop experiences for both direct and indirect competitors’ product detail pages.
I picked a few competitors and documented the sequence of information they present from top to bottom (for both mobile and desktop, only mobile shown). This was helpful to see what was table stakes across brands and identifying where there were opportunities and gaps.
What makes our product portfolio unique?
The main offerings are 6 different regimens that each target a different skin concern. It is recommended by the founders to use this as a set as the ingredients were formulated to be applied to the skin in the right order so that each step effectively builds on the last.
Took a deeper dive into our product portfolio and classified the different types of products into the following categories. a deeper dive into our product portfolio and classified the different types of products into the following categories.
Doing this exercise helped to define what information to display on each type of PDP to better optimize and tailor the experience for the type of product. Below is a chart outlining which modules made sense to show or not show for the different types.
Prioritization
Identified some areas we could make quick wins on and ranked them by level of impact to prioritize which features to tackle first.
Understanding Business & Customer Needs
Customer Needs
New Customer
How can I find the best product for my skin? How do I know if this product is credible?
How can I get the best value?
Retail Customer (RC)
What other products might be right for my skin?
What do I get by being a loyal customer?
Preferred Customer (PC)
How can I replenish quickly and easily?
What does my Consultant recommend about this product?
Business Needs
Highlight promotions
Show clear pricing & savings value for each user type
Call out the benefits of our perks program so that users enroll in it
Lead customers to buy a full Regimen set rather than individual products
The Redesign
PDP (Regimen/Bundle)
PDP (Regimen 1:1)
Perks Program: Tooltip to Modal
Responsive Design
Ensured the newly designed PDP was optimized for each breakpoint.