Product Page Redesign
52%
Traffic lands on PDPs
60%
Returns cite sizing
95%
Sessions are mobile
4M+
Monthly sessions
Redesigning DFYNE's highest-traffic page to reduce size-related returns, clean up information hierarchy, and let customers build matching sets without ever leaving the product page.
The problem
- The PDP assumed users arrived through a browse flow, even though most users landed directly from search or ads.
- Long stacked content pushed reviews, sizing guidance, and matching products far below the fold.
- Small size pills and buried model information created unnecessary friction on a 95 percent mobile audience.
- Sizing guidance was weak despite size-related issues driving 60 percent of returns.
How I approached it
- 1
Behavioural analytics
Used Clarity recordings, heatmaps, and traffic analysis to understand how users actually arrived on and moved through the PDP.
- 2
Returns and ticket review
Used customer care and returns data to identify sizing as the main source of downstream friction.
- 3
Prototype testing
Built interactive prototypes and tested them with colleagues who do not use the website day to day — fresh eyes, no curse of knowledge — to validate hierarchy and sizing changes.
- 4
Cross-functional consultation
Worked across marketing, operations, buying, customer care, and development to shape a redesign that solved multiple business and user problems together.
What I changed
- Moved secondary information like delivery, returns, BNPL, and full specs into modals to keep the buy flow compact.
- Added contextual sizing guidance with visible model info and larger mobile-friendly size pills.
- Turned Complete the Look into an inline set-building flow with independent sizing per item.
- Added breadcrumbs, same-colour cross-collection discovery, and custom filterable reviews.
- Surfaced the deeper catalogue architecture issue blocking instant colour switching and started the infrastructure work behind it.
Before & after
The redesign turns the PDP into a stronger landing page, buying flow, and set-building surface at the same time.
Before
- Information stacked in a long list structure
- No breadcrumbs for direct-landing users
- Small size pills and weak mobile tap targets
- Model info buried in an accordion
- Generic fit guidance disconnected from the decision point
- BNPL messaging cluttering the buy flow
- Basic product carousel for cross-sell
- Same product in other colours for recommendations
- Default Judge.me review widget
- Full page reload on every colour change
After
- Clean hierarchy with secondary information moved into modals
- Breadcrumb navigation back to collections
- Enlarged size pills optimised for mobile
- Model info visible at the top of the product section
- Contextual fit note beside the size selector
- BNPL moved out of the primary buy flow
- Inline set-building with independent sizing per item
- Cross-collection discovery in the same colourway
- Custom reviews with filterable dimensions
- Instant colour switching defined as an in-progress infrastructure fix
The Problem
The PDP had been designed as the end of a browse journey, but most users were landing on it directly from search, paid social, or other entry points. That meant one of DFYNE's most important pages was acting as a first impression without giving users enough orientation, navigation, or decision support.
At the same time, sizing guidance was weak despite size-related issues driving most returns. Small mobile tap targets, buried model information, and long stacked content made the page harder to use for the audience that mattered most.
The Redesign
The page was restructured around a tighter buying flow: secondary content moved behind modals, sizing guidance became contextual and visible near the selector, and Complete the Look became a true inline set-building tool with independent sizing per item.
The redesign also expanded the PDP's role as a landing page by adding breadcrumbs, better discovery surfaces, and a custom review experience that supports real purchase questions rather than passive social proof.
What Sits Underneath
While redesigning the page, a deeper catalogue architecture issue surfaced: colourways were stored as separate products rather than true variants, which forces full page reloads every time a shopper changes colour.
That turned colour switching into an infrastructure problem rather than just a UI problem, and the redesign now frames that backend restructure as the next major step in improving PDP performance and usability.
Try it
What it did
- Targets lower size-related returns through stronger fit guidance and upcoming Fit Analytics integration.
- Extends proven set-building behaviour to the page where 52 percent of traffic already arrives.
- Improves navigation and discovery for direct-landing users who never pass through collection pages.
- Turns the remaining colour-switching friction into a defined infrastructure project instead of leaving it as a front-end symptom.