The Project
The company & service
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 bags.
The problem
The original PDPs were designed for desktop, but traffic was 80% mobile. M.M. also created 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 role & team
I was the sole designer for this project. I worked closely with a Product Manager and Engineering team and consulted with many stakeholders including Creative, Marketing, Merchandising, and Customer Experience.
The results
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
Competitive Research
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
I 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
xxx2_edited_edited_edited.jpg)
Stripe Development
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.
New Design
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
Redesign Performance
Before sending all traffic to the new PDP, 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.
Original PDP
New PDP
