Reimagining the PDP for Web & App
Streamline the product experience across Web and App by surfacing key info above the fold through AI-powered summaries and a modular content framework that transforms complex data into high-converting, digestible insights.
The challenge
The existing Product Detail Page (PDP) was a "wall of text." Key decision-making data (ratings, benefits, health relevance) was buried below the fold, leading to high bounce rates and cognitive overload.
Key Obstacles:
Technical debts: A rigid data system made it difficult to restructure product information.
Stakeholder friction: Multiple teams had conflicting visions for the Review and Upsell sections.
Mobile parity: The app was a mirror of the web, lacking native-first interactions.
The Goal: Optimising product clarity and conversion through data-driven design and stakeholder alignment.
Role:
Product Designer
Platform:
Responsive Web, iOS, & Android
Collaborators:
PDP squad, SEO team, Merch team
Tools:
Figma, UXTweak, Figma Make, AI Tools
Status:
In development
Problem analysis
Testing and Validation
Working with a User Researcher and PM, I conducted a PDP audit and moderated user tests to identify why users weren't converting.
The Reality Check
Information density: High-value content was trapped in accordions; users didn't want to "work" to find ingredients or usage.
Underutilised fold: The most popular real estate was cluttered with low-impact info.
The Reviews Paradox: Users relied on reviews but were overwhelmed by the volume. We needed a "quality over quantity" approach.
"I have to scroll three times just to see
if this is right for my skin type.
Why is this promo taking up half the screen?"
"I trust the reviews, but I don't have time to read 50 of them. Just tell me if people like the texture or not."
"It feels like I'm hunting for info.
If I can't find the ingredients in five seconds,
I’m going back to Google
The Solution
Together with lead designers and design system team, we decided to redesign the PDP into a modular, rich-content experience that prioritised visual storytelling over text-heavy descriptions. To optimise the work, we split the project into 4 delivery blocks.
Block 1: Above-The-Fold optimisation
I restructured the information architecture to ensure the Image Gallery, Star Rating, Info tags and Price/ATB were immediately visible. I introduced a "sticky" CTA for App mobile to maintain conversion opportunities during long scrolls.
Block 2: From Text to Rich Content and AI powered Clarity
To bypass legacy data system limitations and reduce cognitive load, I moved away from a text-heavy structure toward a Modular Content Framework:
AI-Generated Summaries: I designed an AI-powered product description layer. This pulls from technical specs to create a "Quick Glance" summary, allowing users to find critical info (like suitability or key ingredients) in seconds rather than digging through long paragraphs.
Icon-Led Hierarchy: Worked with the Design System team to create a "Content Block" library. This transformed fragmented back-end data into digestible, visual sections (e.g., replacing a 3-paragraph bio with high-impact Key Benefits badges).
Smart Accordions: Prioritized information based on user testing, ensuring the most sought-after details were surfaced by default while technical "deep dives" remained accessible but secondary.
Block 3: The AI powered Review Engine
I led the redesign of the review section to reduce its physical footprint while significantly increasing its utility through highly personalized AI features:
AI-Summarised "Read" Experience: Instead of forcing users to scroll through hundreds of entries, I designed an AI-powered sentiment engine that surfaces common pros and cons tailored to the user’s specific concerns (e.g., "Good for sensitive skin").
AI-Assisted "Leave a Review": To combat "reviewer's block," I introduced an AI-guided flow that helps users draft high-quality, descriptive reviews in seconds based on quick-tap prompts, ensuring more useful data for future shoppers.
Media Integration & Social Proof: Integrated photo/video reviews directly into the AI summaries to provide immediate visual validation.
Strategic Alignment: Navigated a complex stakeholder environment with varying visions by facilitating workshops that prioritised user trust and speed-to-insight over raw review volume.
Block 4: Intentional Merchandising
Created ad-hoc components for upselling and cross-selling. These were designed to be "campaign-ready," allowing the business to toggle specific bundles for Black Friday or H&B Day without a full code deploy.
Outcomes and Evolution
Team Collaboration & Execution
Design System Integration: Co-created new tokens and components to ensure the PDP was scalable for different product categories.
Engineering Handover: Split the project into 4 delivery blocks. This allowed engineers to build and ship incrementally, reducing the "big bang" risk and speeding up the feedback loop.
Stakeholder Management: Navigated conflicting requirements by grounding every design decision in user testing data.
Expected Outcomes & Success Metrics
Primary Goal: Increase PDP-to-ATB (Add to Basket) and overall CVR.
Engagement: Increased interaction with rich media and AI-summarized reviews.
Scalability: A modular framework that allows for rapid category-specific updates.