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.
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
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.
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
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 Summaries: Created "Quick Glance" product layers to replace long technical text.
Icon Hierarchy: Built a "Content Block" library to turn raw data into visual badges.
Smart Accordions: Used testing to prioritize key info while nesting secondary data.
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:
Faster Discovery: AI sentiment engine replaces scrolling with personalized pro/con summaries.
Higher Quality Data: Prompt-based "AI-assisted writing" turns quick taps into detailed reviews.
Strategic Alignment: Facilitated workshops to align stakeholders on a trust-first product vision.
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.
before
Above the fold +
description
Reviews section
Upselling
after
Top + description
Reviews section
Upselling
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.