P4
Participant 4
After
More manageable presentation
“It felt like it wasn’t being thrown at me all at once.”
Superdrug PDP Redesign
Making product exploration clearer within a template built to evolve
UX Strategy⊹Product Design⊹User Research⊹UX/UI Design
0Intro
A Transformation Project, Not a Redesign
I led the UX and UI redesign of Superdrug’s product detail page, bringing product imagery, variant selection and purchase information into a clearer hierarchy. A business workshop helped us prioritise features and plan a template that could evolve with business and customer needs.
My Role
As UX lead and hands-on designer, I shaped the experience direction and personally designed the interaction and visual layout. I translated prioritised business requirements into a modular template for desktop and mobile.
Observed Outcome
Mobile PDP add-to-basket rate rose year on year
+1.1 ppyear on year
Add-to-basket rate
13 Jul–11 Oct 2025 vs 12 Jul–10 Oct 2026 · Mobile
13.65% to 14.71% (+1.1 percentage points, rounded). Rate = sessions with add_to_cart / sessions with view_item in the supplied totals. Year-on-year comparison does not isolate the redesign’s effect.
0Intro
A Transformation Project, Not a Redesign
I led the UX and UI redesign of Superdrug’s product detail page, bringing product imagery, variant selection and purchase information into a clearer hierarchy. A business workshop helped us prioritise features and plan a template that could evolve with business and customer needs.
My Role
As UX lead and hands-on designer, I shaped the experience direction and personally designed the interaction and visual layout. I translated prioritised business requirements into a modular template for desktop and mobile.
Observed Outcome
Mobile PDP add-to-basket rate rose year on year
+1.1 ppyear on year
Add-to-basket rate
13 Jul–11 Oct 2025 vs 12 Jul–10 Oct 2026 · Mobile
13.65% to 14.71% (+1.1 percentage points, rounded). Rate = sessions with add_to_cart / sessions with view_item in the supplied totals. Year-on-year comparison does not isolate the redesign’s effect.
01The Challenge
Giving the product room to be understood
The existing PDP needed stronger hierarchy. Product imagery lacked prominence, while the layout needed less clutter and a clearer relationship between the product, its variants and supporting information.
The design challenge extended beyond rearranging one page. The template had to accommodate different products, promotional content and future features while giving customers a consistent way to explore and choose.
We conducted a full business workshop to gather feature requirements and prioritise what we wanted to develop. I used those priorities to understand what the template needed to support now and where it needed room to evolve.
That shaped the direction: make the immediate purchase decision clearer, while creating a structure that could absorb future requirements without repeatedly adding clutter.
Core problem
The core problem was a cluttered PDP that made product information difficult to scan and new features difficult to add without increasing complexity.
01The Challenge
Giving the product room to be understood
The existing PDP needed stronger hierarchy. Product imagery lacked prominence, while the layout needed less clutter and a clearer relationship between the product, its variants and supporting information.
The design challenge extended beyond rearranging one page. The template had to accommodate different products, promotional content and future features while giving customers a consistent way to explore and choose.
We conducted a full business workshop to gather feature requirements and prioritise what we wanted to develop. I used those priorities to understand what the template needed to support now and where it needed room to evolve.
That shaped the direction: make the immediate purchase decision clearer, while creating a structure that could absorb future requirements without repeatedly adding clutter.
Core problem
The core problem was a cluttered PDP that made product information difficult to scan and new features difficult to add without increasing complexity.
02DESIGN DIRECTION
Bringing exploration and selection together
I began with the relationship between the product gallery and the purchase area. Product images needed to play a stronger role in evaluation, with selection controls easy to find alongside them. On desktop, I designed a larger gallery within a grid. On mobile, a full-width gallery gave imagery greater prominence within the smaller screen. The layouts adapted to each device while keeping the product at the centre of the experience. Shade selection needed a clearer position within that hierarchy. I brought the available variants into the product-selection area so customers could discover the options as part of evaluating the product. Around this, I reorganised the page to distinguish core purchase information from supporting content. Promotions, ratings, questions and other product information needed a clear place within the template. I kept the overall structure consistent and adapted specific areas where product differences mattered, such as size and colour selectors. This let the template respond to each product type without requiring a wholly different page design for every category. The new template made the PDP easier to scan and understand, with a clearer hierarchy between product exploration, selection and supporting information. Its modular structure also allowed the business to add features without breaking the layout or repeatedly redesigning the page.
02DESIGN DIRECTION
Bringing exploration and selection together
I began with the relationship between the product gallery and the purchase area. Product images needed to play a stronger role in evaluation, with selection controls easy to find alongside them. On desktop, I designed a larger gallery within a grid. On mobile, a full-width gallery gave imagery greater prominence within the smaller screen. The layouts adapted to each device while keeping the product at the centre of the experience. Shade selection needed a clearer position within that hierarchy. I brought the available variants into the product-selection area so customers could discover the options as part of evaluating the product. Around this, I reorganised the page to distinguish core purchase information from supporting content. Promotions, ratings, questions and other product information needed a clear place within the template. I kept the overall structure consistent and adapted specific areas where product differences mattered, such as size and colour selectors. This let the template respond to each product type without requiring a wholly different page design for every category. The new template made the PDP easier to scan and understand, with a clearer hierarchy between product exploration, selection and supporting information. Its modular structure also allowed the business to add features without breaking the layout or repeatedly redesigning the page.
03PHASED DELIVERY
From the early fashion launch to the wider PDP release
The business wanted to launch fashion products before the planned PDP release. We therefore built and released an intermediate version that presented fashion products more effectively while the wider redesign was still being developed.
The fashion release was an intermediate step towards the wider redesign. It met the earlier business deadline while we continued developing the shared PDP template. Phase 1 then launched in Q2 2025 across all product types, including fashion, bringing those products into the same modular structure with a revised layout and clearer hierarchy across desktop and mobile.
The wider roadmap included clearer member pricing, gift-with-purchase interactions, promotional tags, out-of-stock states and enhanced swatches, alongside further sticky Add to Basket work. These remained separate from the first release. After launch, the focus shifted to understanding how customers used the experience—and what that behaviour actually meant.
03PHASED DELIVERY
From the early fashion launch to the wider PDP release
The business wanted to launch fashion products before the planned PDP release. We therefore built and released an intermediate version that presented fashion products more effectively while the wider redesign was still being developed.
The fashion release was an intermediate step towards the wider redesign. It met the earlier business deadline while we continued developing the shared PDP template. Phase 1 then launched in Q2 2025 across all product types, including fashion, bringing those products into the same modular structure with a revised layout and clearer hierarchy across desktop and mobile.
The wider roadmap included clearer member pricing, gift-with-purchase interactions, promotional tags, out-of-stock states and enhanced swatches, alongside further sticky Add to Basket work. These remained separate from the first release. After launch, the focus shifted to understanding how customers used the experience—and what that behaviour actually meant.
04Testing and Validation
From the early fashion launch to the wider PDP release
We used two complementary studies: a before-and-after prototype comparison and a secondary static comparison of the initial designs. Together, they helped us assess clarity and identify what needed refining.
In the before-and-after study, participants compared the original PDP (Design A) with the redesign (Design B). The redesigned hierarchy made information easier to digest, while the gallery, visible shades and persistent Add to Basket control supported product exploration.
Key Feedback
P9
Participant 9
After
Visible colour swatches
“You can see straight away without having to click into anything.”
P10
Participant 10
After
Product imagery
“I’m inspired because I like that they use people from different skin tones and people of different ages to highlight how this product can be used.”
P1
Participant 1
Comparative prototype validation
“It felt like I could read each section and kind of focus and then move on from that and then look at the other section rather than it all blending into one.”
Measured progress and customer feedback
Across comparable July–October periods, mobile PDP add-to-basket rate increased from 13.65% in 2025 to 14.71% in 2026, an improvement of 1.1 percentage points when rounded to one decimal place. The validation research helped explain what customers valued in the redesigned experience: a clearer information hierarchy, more prominent imagery, easier access to shade options and a page that felt more considered for mobile.
Mobile PDP add-to-basket rate rose year on year
+1.1 ppyear on year
Add-to-basket rate
13 Jul–11 Oct 2025 vs 12 Jul–10 Oct 2026 · Mobile
13.65% to 14.71% (+1.1 percentage points, rounded). Rate = sessions with add_to_cart / sessions with view_item in the supplied totals. Year-on-year comparison does not isolate the redesign’s effect.
04Testing and Validation
From the early fashion launch to the wider PDP release
We used two complementary studies: a before-and-after prototype comparison and a secondary static comparison of the initial designs. Together, they helped us assess clarity and identify what needed refining.
In the before-and-after study, participants compared the original PDP (Design A) with the redesign (Design B). The redesigned hierarchy made information easier to digest, while the gallery, visible shades and persistent Add to Basket control supported product exploration.
Key Feedback
P4
Participant 4
After
More manageable presentation
“It felt like it wasn’t being thrown at me all at once.”
P9
Participant 9
After
Visible colour swatches
“You can see straight away without having to click into anything.”
P10
Participant 10
After
Product imagery
“I’m inspired because I like that they use people from different skin tones and people of different ages to highlight how this product can be used.”
P1
Participant 1
Comparative prototype validation
“It felt like I could read each section and kind of focus and then move on from that and then look at the other section rather than it all blending into one.”
Measured progress and customer feedback
Across comparable July–October periods, mobile PDP add-to-basket rate increased from 13.65% in 2025 to 14.71% in 2026, an improvement of 1.1 percentage points when rounded to one decimal place. The validation research helped explain what customers valued in the redesigned experience: a clearer information hierarchy, more prominent imagery, easier access to shade options and a page that felt more considered for mobile.
Mobile PDP add-to-basket rate rose year on year
+1.1 ppyear on year
Add-to-basket rate
13 Jul–11 Oct 2025 vs 12 Jul–10 Oct 2026 · Mobile
13.65% to 14.71% (+1.1 percentage points, rounded). Rate = sessions with add_to_cart / sessions with view_item in the supplied totals. Year-on-year comparison does not isolate the redesign’s effect.
04Testing and Validation
From the early fashion launch to the wider PDP release
We used two complementary studies: a before-and-after prototype comparison and a secondary static comparison of the initial designs. Together, they helped us assess clarity and identify what needed refining.
In the before-and-after study, participants compared the original PDP (Design A) with the redesign (Design B). The redesigned hierarchy made information easier to digest, while the gallery, visible shades and persistent Add to Basket control supported product exploration.
Key Feedback
P4
Participant 4
After
More manageable presentation
“It felt like it wasn’t being thrown at me all at once.”
P9
Participant 9
After
Visible colour swatches
“You can see straight away without having to click into anything.”
P10
Participant 10
After
Product imagery
“I’m inspired because I like that they use people from different skin tones and people of different ages to highlight how this product can be used.”
P1
Participant 1
Comparative prototype validation
“It felt like I could read each section and kind of focus and then move on from that and then look at the other section rather than it all blending into one.”
Measured progress and customer feedback
Across comparable July–October periods, mobile PDP add-to-basket rate increased from 13.65% in 2025 to 14.71% in 2026, an improvement of 1.1 percentage points when rounded to one decimal place. The validation research helped explain what customers valued in the redesigned experience: a clearer information hierarchy, more prominent imagery, easier access to shade options and a page that felt more considered for mobile.
Mobile PDP add-to-basket rate rose year on year
+1.1 ppyear on year
Add-to-basket rate
13 Jul–11 Oct 2025 vs 12 Jul–10 Oct 2026 · Mobile
13.65% to 14.71% (+1.1 percentage points, rounded). Rate = sessions with add_to_cart / sessions with view_item in the supplied totals. Year-on-year comparison does not isolate the redesign’s effect.
05POST LAUNCH LEARNING
A foundation for continuous improvement
The redesign created a clearer customer experience and a flexible foundation for the business: a modular template that accommodates new features and product types, supported by a dedicated PDP roadmap for continuous improvement beyond the MVP.
That foundation made the next question possible: how could the PDP move beyond presenting information to helping customers find the guidance relevant to their decision?
05POST LAUNCH LEARNING
A foundation for continuous improvement
The redesign created a clearer customer experience and a flexible foundation for the business: a modular template that accommodates new features and product types, supported by a dedicated PDP roadmap for continuous improvement beyond the MVP.
That foundation made the next question possible: how could the PDP move beyond presenting information to helping customers find the guidance relevant to their decision?
05POST LAUNCH LEARNING
A foundation for continuous improvement
The redesign created a clearer customer experience and a flexible foundation for the business: a modular template that accommodates new features and product types, supported by a dedicated PDP roadmap for continuous improvement beyond the MVP.
That foundation made the next question possible: how could the PDP move beyond presenting information to helping customers find the guidance relevant to their decision?
06CONTINUOUS IMPROVEMENT
A PDP that keeps evolving
The redesign established a foundation for continuous improvement across desktop and mobile. We continue to explore and test changes, from sticky Add to Basket on desktop and new colour selectors to an AI shopping assistant and contextual prompts. Each initiative helps us understand what supports product evaluation and makes the next step clearer.
Our approach starts with early discovery. We test design variants through UserTesting to identify usability issues and refine promising ideas before taking promising variants into live A/B tests. This helps us focus development resources, learn in smaller increments and remain agile before committing to larger projects.
The AI shopping assistant is one part of this wider roadmap. We are exploring where prompts feel useful, how guidance should behave during browsing and how it can respond to customers’ questions without adding clutter.
Early research helps us focus development effort, while live experiments guide the PDP’s next iteration.
06CONTINUOUS IMPROVEMENT
A PDP that keeps evolving
The redesign established a foundation for continuous improvement across desktop and mobile. We continue to explore and test changes, from sticky Add to Basket on desktop and new colour selectors to an AI shopping assistant and contextual prompts. Each initiative helps us understand what supports product evaluation and makes the next step clearer.
Our approach starts with early discovery. We test design variants through UserTesting to identify usability issues and refine promising ideas before taking promising variants into live A/B tests. This helps us focus development resources, learn in smaller increments and remain agile before committing to larger projects.
The AI shopping assistant is one part of this wider roadmap. We are exploring where prompts feel useful, how guidance should behave during browsing and how it can respond to customers’ questions without adding clutter.
Early research helps us focus development effort, while live experiments guide the PDP’s next iteration.
Have an interesting challenge?
Let’s makesomething great.
Have an interesting challenge?