New Design 008
![]()
![001]()
![001]()
![002]()
![003]()
![004]()
![004]()
![005 - before]()
![005 - after]()
The Approach
001 Product Detail Pages (PDPs) are the primary method for customers to learn about products and add them to their bag. MMLaFleur’s legacy PDPs were designed for desktop, but now traffic is 80% mobile.
002 For competitor research, I explored PDPs for other clothing companies to analyse their features and layouts.
003 Design, feedback, repeat. I designed and redesigned the layout according to user testing, stakeholder, and feasibility feedback
004 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 Merch 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.
005 Before sending all traffic to the new PDPs, we A/B tested the original PDPs against the new design with real customers, allowing them to understand more about the product. Add to bag rate increased 65%.
Heat maps also showed that customers scrolled much more with the new design - allowing them to learn more about the product.
My Role
UX, UI, lead testing, competitor research, liaise with stakeholders
001 Product Detail Pages (PDPs) are the primary method for customers to learn about products and add them to their bag. MMLaFleur’s legacy PDPs were designed for desktop, but now traffic is 80% mobile.
002 For competitor research, I explored PDPs for other clothing companies to analyse their features and layouts.
003 Design, feedback, repeat. I designed and redesigned the layout according to user testing, stakeholder, and feasibility feedback
004 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 Merch 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.
005 Before sending all traffic to the new PDPs, we A/B tested the original PDPs against the new design with real customers, allowing them to understand more about the product. Add to bag rate increased 65%.
Heat maps also showed that customers scrolled much more with the new design - allowing them to learn more about the product.
My Role
UX, UI, lead testing, competitor research, liaise with stakeholders
Project (9)
* eComm PDPs
A Product Detail Page (PDP) is a customers final decision making point where they will decide whether to add a product to cart or not. They need to have every piece of information to hand to qualify their purchase. Reviews, order of information, style advice and more, all help in making the final choice to purchase.
Real-world Challenge
We needed to optimise the PDP experience to support 80% of users shopping on mobile devices. This involved finding ways to highlight product features and styling methods without the use of lengthy descriptions. MM.LaFleur 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.
We also wanted to integrate reviews and more comprehensive information about the product fit as we know that this helps to reduce order return rates. Things like knowing the models height, for example, can help you visualise the length of a skirt.
Increasing the add-to-bag rate was the primary metric, with secondary goals of increasing scroll depth and product exploration. We ultimately wanted to create a design that complements legacy imagery and new dynamic product and mood images.
Why It Exists
To provide a customer with all the information needed to make a purchase on that product of interest. This includes information like size, colour, material, styling options, care information, shipping etc.
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
Was it a success?
The new design increased add to bag rate, improved mobile usability, and gave the Merch team the ability to instantly add product highlights with new “stripes”. These stripes created a way to highlight product features and styling methods without extensive development work for each individual product. Since we know this helps reduce order return rates, we can correlate this to customers scrolling further down the PDP to find more qualification information.
The change to the mobile image aspect ratio to 1:1 allowed the product title and price to be shown next to the rest of the product data, giving quick, easy validation, and the integration with Yotpo allows users to see product reviews and more detailed sizing information.
By implementing a floating "Add to Bag" button that follows the user as they scroll, it’s now much easier to purchase an item on mobile.
With regards to design performance, we A/B tested the original PDPs against the new design with real customers understanding more about the product. Add to bag rate increased to 65%. And heat maps also showed that customers scrolled much more with the new design - allowing them to learn more about the product.
