⏤ 01 / Case study
Scaling PDP through UI design
Designing and refining multiple Product Detail Page (PDP) components to improve clarity, decision-making, and overall purchase experience across key user touchpoints.
+18% increase in add-to-cart rate · −22% drop-off on PDP before purchase
- Role
- Product Designer
- Team
- Growth / Business app
- Year
- 2023 / 2024
⏤ 02 / Overview
Overview
The Product Detail Page (PDP) is a central part of the purchase journey, where users evaluate products, compare options, and make final decisions.
Over time, the PDP evolved through multiple independent initiatives — introducing new features, business rules, and variations across markets and user types. This led to increasing complexity, inconsistent UI patterns, and challenges in maintaining clarity across different scenarios.
Rather than approaching it as a single redesign, the focus was on continuously improving key PDP components — refining how pricing, availability, actions, and product information are presented, while ensuring consistency and scalability across the experience.
⏤ 03 / Foundation
— Foundation · PDP Redesign
PDP Redesign
Problem
The PDP evolved over time, with new features being added without a clear structure. Key elements like product media, pricing, and actions often competed for attention, while things like variants, promotions, and additional benefits were not consistently handled.
Solution
The PDP was redesigned to introduce a clearer structure and more consistent patterns. Product media was improved with a more structured thumbnail carousel, key actions were made more visible, and elements like sharing, cashback, and variants were better integrated into the overall flow. The focus was on making the page easier to scan and more coherent.
Result
The page is now easier to understand at a glance, with clearer hierarchy and more predictable behavior. It also provides a more solid foundation for adding new features without breaking the overall experience.
⏤ 04 / Decision-making
— Decision-making · Price visualisation
Price visualisation
Problem
Pricing on PDP needed to support multiple scenarios — including member vs non-member views, discounts, cashback, and shade-level variations. This made it difficult to present price clearly and consistently across different contexts.
Solution
Designed a flexible pricing system that adapts to different scenarios while maintaining a clear hierarchy. The main price remains the primary focus, while discounts, cashback, and additional values are integrated in a consistent and easy-to-scan way. Pricing logic was also extended to support dynamic updates, such as shade-specific discounts.
Result
Users can quickly understand the total value of the offer across different contexts, compare options more easily, and make faster, more confident purchase decisions.
⏤ 05 / Discovery
— Discovery · Product carousel
Product carousel
Problem
Products were previously displayed in a static grid, limiting flexibility and making it harder to adapt layouts across different contexts and screen sizes.
Solution
Introduced a carousel component that supports multiple configurations — with or without tabs, titles, and within different container sizes. This allowed product lists to adapt to various use cases while maintaining a consistent interaction pattern.
Result
The new carousel improves product discovery by making browsing more dynamic and space-efficient, while enabling a scalable system that works across multiple PDP sections and layouts.
⏤ 06 / Results
Results
The redesign of key PDP components led to measurable improvements in how users discover, evaluate, and act on product information. By improving clarity, reducing friction, and creating more consistent interaction patterns across the experience, users were able to make purchase decisions with greater confidence.
+18%
Increase in add-to-cart rate, indicating that users could more easily find, understand, and evaluate the information needed to move forward with a purchase.
−22%
Reduction in PDP drop-off before purchase, suggesting a smoother journey with fewer decision-making barriers and points of friction.
60+ Markets
Scalable component solutions deployed across global markets, creating a more consistent experience while supporting different product types, content structures, and business requirements.
Beyond the immediate conversion impact, the redesign established a stronger foundation for future PDP evolution. Individual improvements were transformed into reusable patterns and flexible components that can scale across multiple use cases, helping teams maintain consistency while continuously improving the customer experience.
⏤ 07 / Next