Product Detail Pages
For M.M.LaFleur, a DTC women's professional clothing company, product detail pages, (PDPs) are the primary method for customers to learn about products and add them to their bag. The original PDPs were designed for desktop, but now traffic is 80% mobile.
M.M. also creates engaging content about product features and styling, but there was no way to display it without time-consuming engineering work to code each page.
The new design increased add to bag rate, improved mobile usability, and gave the Merchandise team the ability to instantly add product highlights.
Optimize the PDP experience to support 80% of users shopping on mobile devices
Create ways to highlight product features and styling methods without the use of lengthy descriptions
Make it as easy as possible for users to add products to their bag and checkout
Integrate reviews and more comprehensive information about the product fit in order to reduce return rates
Create a design that complements both legacy imagery and new dynamic product and mood images
Explored PDPs for similar clothing companies to analyze their features and layouts.
Existing Design Feedback
Before sending all traffic to the new survey, we A/B tested the original survey against the new design with actual customers to get more quantitative data.
To exist above the fold on mobile, the product title and price have to be on top of the image which makes it difficult to find as the user browses the product; The image ratio should be altered.
The gray background on desktop makes the page appear that there is no content below, causing users to not scroll.
Most users miss the horizontal tabs for Fit and Material/Care. Vertical sections are more commonly used and may help increase engagement.
The large block of description text is overwhelming and often skipped by customers, while the icon attributes are helpful and easy to skim. Consider adding more icons to let customers easily understand the product highlights.
Texting a stylist is a feature that users are delighted by, but it's hidden at the bottom
Iterate, User Test, Repeat
Designed and redesigned the survey to create a user-friendly flow.
Working with the Merch and Creative teams, we developed several reusable "stripes" for the PDPs. Each stripe provides several options for different image and text layouts.
Using a content manager called Contentful, it's easy to create stripes that highlight unique product features and styling options without additional engineering work.
Changed the mobile image aspect ratio to 1:1, which allowed the product title and price to be shown next to the rest of the product data
Integrated with a service called Yotpo, which allows user to rate and review the products
Implemented a floating "Add to Bag" button that follows the user as they scroll, making it as easy as possible to purchase the item
Moved "Ask a Stylist" to be more obvious and near the sizing, which is the most common aspect that customers have questions about
Added additional icons to highlight products features, including bra strap holders, adjustable hems, removable shoulder pads, and more
Moved the Fit information to be above the details, which helps users to better understand how the clothing will fit
Concatenated the Details section, so now lengthy descriptions are less overwhelming and take up less space
Before sending all traffic to the new survey, we A/B tested the original survey against the new design with actual customers to get more quantitative data. The add to bag rate increased by 65%.
Additionally, heat maps show that customers scrolled much more with the new design - allowing them to learn more about the product.