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
Through usability testing and heuristic analysis, I identified that users were overwhelmed by the volume and hierarchy of information on the PDP, making it difficult to quickly assess product suitability.
A recurring behaviour was that users scanned inconsistently and missed key information such as promotions, product attributes, and availability, leading to slower decision-making.
This highlighted a need to prioritise essential information and structure content more effectively, rather than simply reducing it.
Based on these insights, I focused on improving information hierarchy, scannability, and progressive disclosure.
"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.
First Outcomes & Success Metrics
First tests showed an 8% increase in PDP to-add-to-basket rate and a 4% uplift in overall conversion rate.
These improvements were driven by clearer information hierarchy and faster decision-making, allowing users to confidently evaluate products with less effort.
Engagement with rich content and AI-supported summaries also increased by 10%, indicating stronger interaction with key product information.