Rodan + Fields
How can we redesign the Product Detail Page to showcase our product portfolio optimally?
Problem
Over the years, the team incrementally added and tested lots of new features on the PDP. What we realized we needed to do was step back and realign on how to most effectively communicate the value of R+F’s product portfolio as a regimen based skincare brand to convert users to make a purchase successfully.
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 examples and documented the sequence of information they present from top to bottom. 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.
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 customer & business needs
Customer Needs
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?
New Customer
Retail Customer (RC)
What other products might be right for my skin?
What do I get by being a loyal customer?
How can I replenish quickly and easily?
What does my Consultant recommend about this product?
Preferred Customer (PC)
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.
