PUMA Elevated PDP
UX/UI
Project Overview
Objective
Design a product detail page (PDP) experience that clearly distinguishes limited-edition products from regular items, creating a more engaging and premium journey for customers purchasing collaborations.
Info
Team: Sole UX Designer & Researcher
Duration: One Month
Tools: Figma
Type: PUMA (as part of an internship)
Goals
- Develop a reusable elevated PDP template for future collaborations
- Make premium products feel more exclusive and price-justifiable
- Enhance the overall e-commerce shopping experience
- Drive higher engagement and sales
Challenges
- Adapting and elevating designs using only existing content
- Maintaining core PDP functionalities for user familiarity and predictability
- Weaving in an engaging brand and collaboration story
- Working within the constraints of Puma’s design system
01 - Discover
The aim was to create a clear distinction between the experience of purchasing a regular product and a limited-edition product on Puma’s e-commerce platform. The goal was to make premium collaborations feel elevated, price-justifiable, and exciting for customers, ultimately improving the online shopping experience and driving sales.
I began with researching industry inspiration, including Sanity’s “5 Ways to Make Your E-commerce Product Pages Pop” and UX guidance from Baymard Institute, which emphasised the importance of high-quality imagery in purchase decisions. I also analysed premium PDP examples from brands such as Apple, Canada Goose, and Master & Dynamic, noting their use of hero images, scroll animations, and integrated video content to create a richer product story.
02 - Define
The challenge was to design an “elevated” PDP template that could be reused for different collaborations while:
- Preserving key product page functionalities for predictability
- Incorporating engaging brand storytelling
- Working within design system constraints
- Adapting existing content to fit the elevated look and feel
The core problem statement became:
“How can we create a premium PDP experience that makes collaborations feel special and worth the higher price point while staying consistent with our e-commerce platform?”
03 - Develop
From research, I identified essential elements for the elevated PDP:
- A hero image to set the tone
- Brand hype and collaboration backstory
- Live media content (videos/GIFs) in the product gallery
- Links to other products in the collection
I produced wireframes before moving into low- and high-fidelity mock-ups, keeping key shopping functions like “add to cart” and sizing selectors in familiar locations. I experimented with full-screen visuals, integrated video, and animated transitions, drawing inspiration from premium retail sites while aligning with Puma’s design system.
04 - Deliver
The final design debuted with Puma’s Perks and Mini collaboration. It featured a striking hero image, immersive brand story elements, and interactive media to highlight product features. The template was built for scalability, enabling reuse for future limited-edition launches without rebuilding from scratch.
05 - Reflection
The elevated PDP successfully made the product feel exclusive and premium while remaining functional and on-brand. Next steps would involve A/B testing against standard PDPs to measure impact on time spent, cross-product navigation, and sales uplift. Success metrics would include:
- Increased time spent on the PDP and overall shop
- More clicks to related products in the collaboration
- Higher sales for limited-edition items
- Greater hype and engagement around collaborations
This project reinforced the value of blending storytelling, UX best practices, and design system discipline to create a premium online shopping experience.
