Bonobos PDP
Product Detail Page

Nearly all users go through a product page before making any purchase, and it’s often the point in the journey where users make up their mind on whether or not they want to purchase the item. We wanted to reduce friction and improve education of our products to increase the ATC rate. 
My Role
Led the design of multiple iterations.

The TEAM​​​​​​​
Niki Canton, UX Research
Jeromy Ko, Product Manager
Tech Lead, Joe Bliss
Due to the large fit offering Bonobos provides, there are a larger number of variants than competitors – which can be visually overwhelming and can lead to confusion. There is also limited real estate to communicate the numerous value props and complexities
The goal of this project was to remove friction from the browsing experience on PDPs and improve the way we educated our customers about our product. Through extensive observation, we learned which key elements were most important to our customers in their decision making. 
First and foremost we wanted to make the imagery most prominent, as this was determined to be the single most important factor when assessing a product (aside from price). We also wanted to provide better access to information around sizing and fit by creating more prominent entry points to existing materials we have that spell out the differences in fit and how to best determine size.
Taken as a whole, the PDP redesign looked to move PDPs beyond simple transaction pages into something that acts as a gateway to other features like Outfit Recommendations, Sizing Wizard and more. By showing other items and building trust and confidence, future PDPs can help drive conversion, average order value, unique products per transaction and lower our return rates.
Emphasis on Imagery

Phase 1 changes included adding thumbnails to the gallery as well as making is scrollable, rather than clickthrough. We also moved the product details from the bottom of the page to the left hand column and enlarged the variants to make them more touch friendly. 

The final iteration maintained the scrolling carousel, but showed two image at a time both showing the customer more images, but also reducing the height of the images so the full image was above the fold. 

The Gallery
Most customers want to get a closer look at the garment and zoom in on details such as fabric. We re-designed the gallery not only for optimal close up action, but also for increased usability and navigation between images. 

Process: Screenshot from prototype set up in Principle App

The new mobile carousel allowed more information to be shown above the fold, while giving the customer a "sneak peek" at this next image. Furthermore, the sliding scroll significantly reduced effort over the previous click through or drag carousel had offered. ​​​​​​​

The right information, at the right time 

During our research, we found many of our participants overlooked copy. However, those who did want to learn more about the product needed a way to locate the details. We also wanted to maintain some level of copy for SEO purposes. The result was adding copy back into the PDP, but limiting it, and providing a clear link to the full details for those who were in search of it.