Embedded Files
A user-centred redesign that simplifies shopping experiences, improves engagement and unlocks £3.43M in potential revenue
Overview
John Lewis’ Product Description Pages (PDPs) were inconsistent, overwhelming and difficult to maintain across multiple categories and device types after a recent consolidation project to a single composable PDP application.
The existing PDP experience had 4 different templates, 14 configurations and over 70+ components, leading to high bounce rates, lack of clarity on customer and business needs and unclear business value.
The Results
Projected potential of £3.43M full-year benefit with Product clicks from Search and Product listing (PLP) pages showing stronger engagement and reaching significance
User research on more complex future concepts indicated that "impressions were positive, with clear interactions"
Efficiency gains identified and prioritised into product team backlog with consolidation recommendations for underperforming components and templates
Recommendations for future optimisations across beauty and scaling across other categories were delivered
The Problem
PDPs were inconsistent and overwhelming, making it difficult for customers to navigate and find product information.
Key challenges included:
Complexity: 4 different templates, 14 configurations and 70+ components
Inconsistencies: UX and UI differences between web and app experiences
Performance Gaps: Certain components didn’t aid conversion effectively
Customer Frustrations: Shopping behaviours varied, requiring tailored experiences
Unclear purpose: With so many variants, the PDP’s core purpose was confusing, this was critical considering it’s a key touchpoint in the customer journey
Project Goals
For customers:
Understand different PDP user types
Identify customer wants, needs and missions
For the business:
Reduce number of PDP templates and components variants
Establish a clear ‘why’ to guide team decision-making and prioritisation
Our Hypothesis
Due to:
Multiple templates, configurations and components without clarity on whether they meet customer and business wants and needs.
We believe:
A discovery phase to analyse our current offerings and benchmark against competitors.
Will result in:
Clearer insights into customer and business wants and needs, enabling better decision-making and prioritisation to optimise and scale PDP experiences
Team & My role
After joining the PDP Product team, I identified a lack of clarity around how current and future deliverables would benefit customers and the business. To address this, I proposed and secured buy-in from the Product Lead for a user-centred discovery phase to uncover insights to guide decision-making and prioritisation.
I led a 4-week analysis, partnering with a UX designer, we took a user-centred design approach following the double diamond framework and used data and insight to help inform and validate design decisions.
My contributions included:
Design and research execution:
Led UI design, ensuring brand and design system alignment
Co-led end-to-end design process following a user-centred approach
Audited and analysed existing John Lewis journeys across web and app to identify gaps
Conducted competitor analysis across 9 premium and mid-range retail brands to identify gaps
Created 'How might we statements' to guide creative thinking for the team Hackathon
Designed and delivered an optimised Beauty PDP using Figma, with phased recommendations for iterative A/B testing
Supported user testing, contributed to test plans and prototypes for more complex concepts for the future
Collaboration and stakeholder engagement
Secured buy-in for a user-centred discovery phase from the Product Lead
Led stakeholder updates, kept the Product Lead and Product Manager informed throughout our discovery and design
Facilitated a product team hackathon to understand feasibility and viability within a multi-discplined delivery team
Organised regular collaboration sessions with tech lead, developer and Business Analyst to built MVP Beauty PDP
Presented findings and recommendations to the team
Integrated recommendations into the backlog through collaboration
Uncovering the problem - Research begins through discovery
To design a better experience, we needed to first understand what was working, what wasn’t and how we compared to competitors by leveraging multiple research methods:
John Lewis Web & App Audit
What we did?
Audited all PDP components across responsive templates to identify inconsistencies
Why?
To create a holistic view of component variants and usage to identify opportunities for optimisation
Competitor Benchmarking
What we did?
Analysed PDPs from 9 premium and
mid-premium retail brands
Why?
To benchmark John Lewis’ PDPs and identify gaps, ensuring our pages meet or exceed industry standards
User behaviour & Data Analysis
What we did?
Used Content Square, Dovetail research and Baymard reports to analyse customer interactions and component performance
Why?
To identify which components aided or hindered engagement and conversion
Persona Development
Created three core personas representing key user segments:
Tania – The Specific Shopper
Knows exactly what she wants and shops efficiently
David – The Researcher
Spends time reviewing details before making a purchase
Lara – The Browser
Explores deals, saves items and
decides later
1. Defining the problem – Uncovering key pain points
Through our research, we uncovered four key pain points:
Overwhelming information
PDPs are too long and cluttered, making it difficult to find key details
Compared to competitors we overload users with excessive information and features
Inconsistent UI across platforms
Web and app versions weren’t aligned, creating confusion
Some key components only appeared on desktop and were missing on mobile, affecting the customer journey
Customer behaviours varied across category & device
Beauty had the highest bounce rate (75.4% on mobile)
Electrical shoppers spent the most time on a page (138 seconds)
Fashion shoppers viewed the most PDP’s per session (3.41 on desktop)
Underperforming components
Some components had low engagement and weren’t aiding conversion
Features like ‘Share’ were barely used, while some important sections were overlooked
A number of components weren't performing well enough
When comparing revenue and conversion vs size or position of components that interacted in page across PDPs.
Key Insight: Not all shoppers interact with the PDP in the same way. Our design needed to cater to different shopping behaviours, not a one-size-fits-all approach.
2. Designing a simpler, more effective PDP based on customer Needs
Our research revealed that PDPs were overloaded with content, inconsistent across devices and misaligned with user behaviours. To tackle this, we developed a strategy grounded in four key design themes, guiding both the redesign and the approach for scaling improvements.
For phase 1, we focussed on the ‘Inform’ theme, as this was the fastest route to improvement without dependencies on other teams.
Inform
Reduce cognitive load by simplifying layout and information hierarchy
Increase clarity by grouping relevant information together
Inspire
Show alternative options when a product isn’t suitable or available
Present related or complementary products that inspire across categories
Inform
Provide help and advice for users to access
Reassure customers that they’ll be looked after if something goes wrong
Enable
Optimise navigation by improving key component placement, helping customers shop easily and conveniently
Adapt templates to customer shopping habits
Turning Strategy into Action — Our Recommended Approach
The team supports multiple initiatives across the business, we needed an approach that introduced changes without disrupting other deliverables.
To balance rapid improvements with longer-term scalability, we divided the approach into three phases:
This approach allowed us to test, learn and improve without overwhelming developers or disrupting other business-critical initiatives.
Key UI Changes & Improvements - Designing the optimised PDP
With a clear problem definition and validated insights, we moved into the design phase. Using existing design system components, we created tangible, user-centred UI recommendations for single and mutli-sku beauty products.
Key objectives
To simplify the PDP layout for faster comprehension
Personalise the experience based on user personas
Prioritise high-impact components and remove low-performing ones
Control vs Simplified Proposal (V1) for a Single SKU beauty product
Breadcrumbs
Move to down page to allow cleaner navigationImage gallery
Move to top of PDP to improve visual engagementStock messaging
Align with pricing to keep purchase information consistentShare button
Remove due to low engagementDelivery summary
Remove redundant anchor links to reduce cognitive loadProduct accordions
Collapsed by default, repositioned higher on page in desktop next to key informationBrand information
Remove due to low usage and unclear value to customersSpecial offers
Moved to a drawer for easy access when neededOrder countdown
Moved closer to CTAs‘Good to know’ section
Reduce from 10 attributes to 5 to improve mobile scroll depthReviews
Move summary higher, reduce visible reviews from 7 to 3
Design exploration across common viewports
I explored layout options across viewports to test our hypothesis that placing the gallery higher could improve first impressions without losing context.
For the initial test, we prioritised keeping the product title visible above the gallery, ensuring users immediately understood what they were viewing while maintaining strong visual engagement.
3. Development, Testing & Iteration
To validate our design decisions, we started by testing the simplified PDP in the Beauty category, which had the highest bounce rate. We moved into the deliver phase to bring the PDP to life, testing with real customers and planned iterations based on results.
Building & Launching
Collaborated with SEO, Buying and Experimentation teams to align on proposals, feedback and launch timing
Facilitated a one-day hackathon with the entire PDP team using our identified ‘How might we’ statements to brainstorm future opportunities based on discovery insights
Collaborated with developers to ensure feasibility, leveraged existing design system components for faster delivery and iterating as needed to launch the first version
Synced with Product team roadmaps to avoid duplication and have awareness of upcoming PDP tests
A/B Testing
Launched a 2-week 50:50 A/B test comparing the existing Beauty PDP with our new simplified version
Measured metrics: conversion, bounce rate, revenue per session and add to basket rates
Planned to understand the impact of reducing information, repositioning key components and how these influenced engagement and conversion
4. Results & Next Steps
£3.43M
Projected potential revenue from Search and PLP engagement on product card clicks
13+
Opportunities prioritised with consolidation and optimisation roadmap created
Key results
By focusing on real user behaviours and business needs, we created a PDP that’s simpler, clearer and more effective without sacrificing essential information.
Product card clicks
Achieved statistical significance, increasing product card clicks from Search and PLP pages, showing stronger engagement. Projecting a potential £3.43M full-year benefitBeauty PDP test
Although the A/B test didn’t reach significance on core metrics, early signs of improvement led to a planned re-testUser feedback on future concepts
User research with bigger, more complex iterations showed that “Impressions of the simplified PDP were positive, with clear interactions”Efficiency gains
Identified opportunities fed into a prioritised PDP backlog with recommendations to consolidate underperforming components and templatesDesign System Improvements
I collaborated with designers to reduce component variants, improve consistency and propose ideas based on discovery findings
Next Steps
Short-term: Continue A/B testing the Beauty PDP with iterative changes, aiming for statistical significance and confidence for larger improvements driven by data and insights
Mid-term: Refine designs and validate key concepts through user feedback, coordinate a Fable usability test across various assistive technologies and prioritise future enhancements based on user research insights and performance data
Long-term: Scale the new PDP layout across other product categories, ensuring consistent, data-driven and user-centric experiences
V1 A/B Tested, due to be re-tested
V2 Iterations depend on V1 A/B results
V3 Future vision test on usertesting.com
Scaling the Future PDP: Designing All Product Categories
Examples for small electricals PDP
Current Mobile
Proposed Mobile
Current Desktop
Proposed Desktop
Final thoughts: A blueprint for future PDPs
By adopting a user-centred approach, we streamlined the PDP to enhance usability, maintainability and performance. By leveraging research, data and iterative testing, we transformed fragmented PDP templates into a simplified, scalable strategy that meets customer and business needs to create better shopping experiences.
Personal Reflections
This project redefined how I blend user insight, data and business goals to create a scalable, results-driven PDP. It now serves as a foundation for continuous learning and iteration, simplifying experiences without sacrificing value.
Team Engagement: Regular involvement and collaboration kept the team engaged and empowered to help shape the future PDP, with a customer-focussed approach to guide and prioritise work
Adaptability: We pivoted when needed, particularly around contractual constraints for certain components (e.g. Recommendations and Flixmedia integrations)
Team capacity: Developer time was tight due to competing priorities. A daily session with a dedicated developer enabled regular collaboration to complete the first test build
Content Square Challenges: Data analysis was limited due to tool issues, this prevented us from analysing specific component interactions. A re-test was required to gather more reliable insights
Key learning: Product card clicks weren’t an original goal metric, but proved critical when influencing the broader user journey. We added this metric to future testing strategies
Google Sites
Report abuse