Product Details Page Redesign


Feature image of the PDP design within an iPhone frame overplayed on a MacBook Pro
Manager of Product Design,
North American E-commerce
Jul 2018–Aug 2019

The Opportunity

The Product Details Page (PDP) is the transition point from upper to lower funnel, where the user decides to add to bag/cart and purchase. Traffic to these pages was increasing month over month while traffic through the traditional user journey from homepage to category details page was declining. In addition to this behaviour, mobile traffic continues to rise and the need for a mobile focused design projected to drive significant revenue growth.
Slide of redacted metrics

The Solution

We focused relentlessly on each component of the product details page.

Our mantra was:
Match guest need by delivering considered micro experiences on the PDP.
On mobile, viewport 01 (what the user sees on first load of the page) was the most important screen to get right. Our solution aimed to be quiet and get out of the users way so they could experience the product and make adding to their bag/cart easy.
Close up of the mobile version of PDP redesign viewport 01
On desktop we used the increase in screen size to add a recommendations module to assist the guest in finding the right product and hopefully increasing units per order.
Close up of the desktop version of PDP redesign viewport 01
Behaviour indicated that if a user scrolled past the first viewport (which only about 50% of users did) more information was required before conversion. Our goal was to value the users time. We designed a progressive education strategy that made key information scannable using iconography with further information in accordions to continue to educate the user where they needed.

We didn’t just make the design of viewport 02 respond to a larger screen size, we celebrated the product and adapted the design to maximize the impact offered by the form factor.
Version 01 of the PDP redesign
Further viewports include Outfitting modules, similarities and recommendations, and user generated content – all of which are controlled by personalization algorithms that use machine learning to get smarter over time.

The Process

We started with a design sprint that included Product Design, Product Management, Engineering, and Frontline Staff. It was an amazing way to ensure we were aligned as a team as well as reducing our blindspots. In fact, we identified a significant issue with an early design concept that would have hurt conversion as well as required development resources to re-engineer a component.
Photo of white board from design sprintPhoto of sticky notes form design sprintPhoto of sticky notes form design sprintPhoto of sticky notes form design sprintPhoto of sticky notes form design sprint
The team proceeded with an experiential analysis of product description pages we liked and didn’t like. Using this information we developed a shared language and understanding of the direction we were heading.
Everyone PDP exampleOutdoor Voices PDP exampleNet-A-Porter PDP exampleAdidas PDP example
From this point our lead Product Designer worked on each component which we reviewed weekly. This work was shared at peer reviews and in product team reviews. On a bi-weekly cadence I would share our progress using high-fidelity, clickable InVision prototypes with a steering committee that consisted of the executive leadership team.
Screenshot of Viewport 01 and the key componentsScreenshot of Viewport 02 and the key componentsScreenshot of Viewport 03 and the key componentsScreenshot of Viewport 03 and the key componentsScreenshot of Viewport 04 and the key componentsScreenshot of Viewport 05 and the key components
After we’d user tested much of viewport 01 and viewport 02 and had high confidence in the work we began presenting the work to the EVP and CEO on a quarterly basis. Requirements were nailed down, epics and tasks were created in JIRA, and A/B tests were developed. The majority of the A/B tests showed positive results and these components are being productized in advance of Q4 2019.
Roadmap breakdown of the new PDP design and development delivery
Success Metrics for PDP redesign: Add To Bag, Voice of Guest, Performance, Conversion, and Bounce Rate

Want to collaborate?

Let's Talk!