New PDP Design on an iMac.

Dick's Product Details Page

Redesigning the e-commerce product page layout.

Overview

During Dick’s Sporting Goods' technological transformation, the company was moving away from monolithic web pages towards responsive, modular pages to iterate and test rapidly. For ten weeks, I worked with the Product Selection team in an Agile environment to improve the user experience of the Product Details Page (PDP). The PDP needed to be redesigned to better fit users' expectations and the page layout needed to be simpler and more intuitive. The new design has driven a 33% increase in revenue so far.

Role

User Experience Design Intern. Led research and design critique efforts. Collaboratively designed low through high fidelity mockups and supported development.

Duration

10 Weeks. June 2019 - August 2019

Team

Tricia Cigna, Senior UX Designer

The Problem

When I came to the team, a new responsive Product Details Page (PDP) was built and being tested, but it was only a Minimum Viable Product (MVP), and it was not an ideal experience for customers. The left side of the page was sticky with a scrolling details column on the right, with important information hidden under an extra click.

While A/B testing this MVP, we gathered customer feedback from a survey link directly on the page. Much of the feedback was negative towards the page layout. 

"...think of using a full page description. Having it pop up on the side and having to scroll makes it a bit complicated and feels like missing information."
"Funny format, have to scroll for miles on right to get information with oversize picture on left."
"Show reviews on the main page without needing to click on the reviews button."
"At first glance I haven't seen a description of item."

Overwhelmingly, users expressed that they had a lot of difficulty finding hidden information. The discoverability of the page was low, and this caused users to miss important information about the product. In addition, conversion rate was down from the legacy PDP on both desktop and mobile experiences. But, we knew this was just an MVP. It was time to iterate!

Research

‍Our team started by creating a list of requirements for the PDP. These were things that we needed to include to preserve usability for the customer, including product description, shipping information, error messaging, and ratings and reviews. 

Next, we entered the discovery phase. We documented our thoughts and research in Miro. I first did some competitive analysis of other online retailers’ PDPs, including Nike, Walmart, and Amazon. I paid close attention to if they used any sticky elements or hidden information.

Competitive analysis of different e-commerce websites.

Interested in the best practices for e-commerce, I continued my research by reading Baymard Institute articles related to the PDP and took notes. I pulled some key takeaways about layout dos and don’ts from the articles:

Most importantly, I read every piece of user feedback from the site, wrote down the salient comments, and incorporated these into my designs.

Ideation and Iteration

Using all our findings from research, I began wire-framing alternate Product Details Page layouts in Figma. My senior design teammate and I both created around ten different iterations of the layout, including responsive design for both mobile and desktop. I experimented with shifting elements around on the page and a sticky table of contents to navigate. I played with different colors, fonts, and components to improve the hierarchy and design. Our team also received a request to create a richer-content PDP for a new footwear launch, which I mocked up with my new layout.

Many iterations of the design for the PDP.
Mobile design iterations for the PDP.

The New PDP

I led many critiques with our team and other designers to gather the best parts from each of our layouts to create our new PDP design.

To address the biggest user pain point of hidden information and a non-intuitive layout, the final designs bring out information from panels onto one page, which reduces the number of clicks and helps users find what they are looking for faster. The reviews are also displayed on the main page, including a summary for quick skimming. After the add to cart button, the product details take up the full width, better utilizing page space and reducing scrolling. We also added a size and fit section to increase customer confidence in buying online.

The new PDP, along with the rollout of a new design system I helped to create, has driven a 33% increase in online revenue (as of winter 2020).

Product Details Page Final Desktop DesignProduct Details Page Final Mobile Design
See in Production

Looking Forward

I feel very fortunate to have worked on usability of such a high impact e-commerce page. I wish I could have continued working on this project even past the end of my internship to complete A/B testing and run more user tests to improve the experience even further. Some lessons I took away from this project: