PDP: Two Column with Sticky Add To Bag (Desktop)
Background
User testing participants found the two column split scroll on desktop difficult to navigate and missed key product information as a result. The Size Options and Add To Bag CTA are only visible as the user scrolls through the product images and disappears once the user reaches the descriptions below. Competitor Adidas has a sticky Add To Bag section in the right column that is always visible.
Hypothesis
Raising the position of key elements in the Add To Bag section and making it sticky as the user scrolls down the whole page will make it more visible to users. Displaying all product description info in one place will prevent it being missed. This will increase Add to Bag rate.Design Changes
- The spacing between the colour and size selectors has been reduced
- The size selectors have been reduced in size
- The product description section has been removed from the right sidebar. The text showing the style and colour has been moved to the Features / Caracteristiques section instead.
- The Lieferung / Livraison section has been replaced with the new copy that is visible by default.
- The width of the product descriptions section below the product images has been narrowed to the same width as the product images.
- The Add To Basket right sidebar is sticky as the user scrolls down the page. If the right sidebar is too high to fit within the screen size then it should stick to the bottom of this section.
Targeting
- Product Detail Pages (PDPs)
Test Goal
- Increase Add to Bag
Devices
- Desktop
Audiences
- All visitors
#1. Which one do you think is the winner?
Results
Congrats! You got it right.
Winner: Control
Start: 07/04/22
End: 04/05/22
Duration: 27 days
DE control sessions: 47,524
DE variation sessions: 47,641
FR control sessions: 40,712
FR variation sessions: 40,065
Highlights
- Redesigning the Add To Bag column and raising the position of key elements lead to a -3.24% drop in Add To Bag across FR with 99% significance.
- There was no significant change in ATB on DE 0.06%, <90% significance.
- Variation also saw a fall in overall site transactions –6.03% on FR, <90% significance. DE transactions also fell -3.28% (not significant).
Conclusions
- Users were more likely to interact with a PDP when key elements were given more prominence.
- Making the Add to Basket column CTA sticky had limited impact on ATB rate.
- The design changes changed the way users were interacting with the cart, leading to a drop in checkout completion.
Next Steps
- Due to the fall in Add To Bag % and Transactions Control should remain in place and we should revisit prominence of Add To Bag in a follow up test.
- Look at sticky add to bag across Mobile, testing different levels of detail within a sticky bottom banner.
- Present the Add to Basket CTA in a different way which doesn’t interfere with the product detail within the PDP, maybe through a sticky header on scroll show persistent ‘Add to basket’ CTA but only when the in page CTA is not present.
Unfortunately, you didn’t get it right. Control was the winner.
Winner: Control
Start: 07/04/22
End: 04/05/22
Duration: 27 days
DE control sessions: 47,524
DE variation sessions: 47,641
FR control sessions: 40,712
FR variation sessions: 40,065
Highlights
- Redesigning the Add To Bag column and raising the position of key elements lead to a -3.24% drop in Add To Bag across FR with 99% significance.
- There was no significant change in ATB on DE 0.06%, <90% significance.
- Variation also saw a fall in overall site transactions –6.03% on FR, <90% significance. DE transactions also fell -3.28% (not significant).
Conclusions
- Users were more likely to interact with a PDP when key elements were given more prominence.
- Making the Add to Basket column CTA sticky had limited impact on ATB rate.
- The design changes changed the way users were interacting with the cart, leading to a drop in checkout completion.
Next Steps
- Due to the fall in Add To Bag % and Transactions Control should remain in place and we should revisit prominence of Add To Bag in a follow up test.
- Look at sticky add to bag across Mobile, testing different levels of detail within a sticky bottom banner.
- Present the Add to Basket CTA in a different way which doesn’t interfere with the product detail within the PDP, maybe through a sticky header on scroll show persistent ‘Add to basket’ CTA but only when the in page CTA is not present.
Get a copy of the full report
You can download the full report in pdf format from the link down below.
