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. 

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.

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:

• Horizontal tabs make content hard to discover
• Accordions can work and perform well on mobile
• One long page with a sticky table of contents provides discoverability with minimal effort
• A full-width cross-sell section signifies the end of a page to the user

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.

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).

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:

• Don’t invest too much time and effort into one initial design - divergent thinking is a key stage
• Competitive analysis of popular brands is very helpful in identifying current trends, user expectations, and areas to improve
• Lots of research has already been done on e-commerce UX best practices, so use it!