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.
Project Goals & Metrics
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
Increase add-to-bag rate as the primary metric, with secondary goals of increasing scroll depth and product exploration
I explored PDPs for similar clothing companies to analyze their features and layouts.
Existing Design Feedback
I first user-tested the current PDP design, which highlighted the following potential areas of improvement:
Since the “Add to Bag” button doesn’t appear until you select a size, some users expressed confusion and said they wouldn’t know how to add to bag
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 overlook 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
“Ask a stylist” is a delightful and unique feature, but it's hidden at the bottom
Users like that they can be notified when a product is out of stock, but the separation of in stock and out of stock sizes is confusing
Design, Feedback, Repeat
Designed and redesigned the layout according to user testing, stakeholder, and feasibility feedback
User Testing + Iteration
I built a responsive prototype using Justinmind to send through usertesting.com and made design decisions based off the results. For example:
After user testing the original PDP design, one finding was that it’s difficult for mobile users to navigate back to the “Add to Bag” button after scrolling down through the product information, especially on long pages
I created a prototype with a sticky button that follows the user down the page as they scroll and user tested it
The finding was that on some browsers, the sticky button blended into the bottom browser bar, and users didn’t ever notice it
I worked with engineering to come up with a solution: a combination static/sticky button that is in the expected location until the user scrolls past, at which point it becomes sticky and follows them down the page for easy add to bag
After successful user testing, it was implemented into the final design
In addition to redesigning the main PDP, we also wanted to create a way to highlight product features and styling methods without extensive development work for each individual product.
Working with the Merchandising and Creative teams, we developed several reusable "stripes" for the PDPs. Each stripe is modular and contains several options for different image and text layouts. Stakeholders can instantly add stripes to PDPs using a content manager called Contentful.
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 users to see product reviews and more detailed sizing information
Implemented a floating "Add to Bag" button that follows the user as they scroll, making it as easy as possible to purchase the item
Relocated "Ask a Stylist" to be more prominent and near the sizing, which is the most common aspect that customers have questions about
Added additional icons to highlight product features, including bra strap holders, adjustable hems, removable shoulder pads, and more
Made the Fit section more visible, and expanded the automated Fit content to help users to better understand how the clothing will fit
Concatenated the Details section, so now lengthy descriptions aren’t overwhelming or space-consuming
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.