Brendon Rush

Product Display Page (PDP) Redesign

Challenge

The product display pages on The Cotswold Company’s e-commerce site were underperforming, with lower-than-expected conversion rates and customer engagement. Analytics, session recordings, and journey mapping exercises revealed several key issues:

  • Inconsistent product descriptions: Poorly structured information made it harder for users to make confident purchase decisions.
  • Low engagement with secondary content, such as reviews, product specifications, and delivery options.
  • Redundant product listings: Variations were displayed as separate products, which cluttered the pages and made browsing overwhelming.
  • Ineffective product recommender widgets: Recommendations were too generic and lacked personalisation. Enhancing them with browsing history and dynamic “Related Products” widgets was identified as an opportunity to drive additional engagement and revenue.

The goal was to enhance the user experience by addressing these pain points and driving improvements in both conversion rates and revenue per session.

Process

1. Research and Analysis

  • Tools Used:
    • Google Analytics to identify interaction levels with page elements.
    • Hotjar session recordings to observe user navigation patterns and frustrations.
    • User surveys to understand user pain points and collect qualitative data.
    • Unmoderated live website testing to identify pain points and common pitfalls.
  • Key Insights:
    • Some users were unaware that selected items are available in various colours or size options.
    • The lack of a consolidated view for variable products resulted in unnecessary navigation between pages.
    • Delivery information was not easily discoverable.
    • Image galleries were underutilised due to unintuitive navigation.
    • Low engagement rates with all supplementary content, users were scrolling the page but not finding what they were looking for. Users missed horizontal tabbed sections.

2. Design Iteration

  • Prototyping:
    • Designed new layouts in Figma that grouped product variations (e.g., colours and sizes) under a single PDP, with clear interface for selecting product variations.
    • Redesigned the PDP template, moving away from a ‘single long page’ design pattern with horizontal tabs to an vertical accordion based collapsed sections pattern.
  • Testing:
    • Used the Maze platform to conduct unmoderated interactive prototype and live website testing with real users.
    • Conducted both group and one-on-one moderated usability testing sessions.

Solution

  • Introduced a redesigned PDP template with a clear visual hierarchy, using vertically collapsed sections:
    • Easier to navigate
      Users can scan the section headers to get an overview of the page. 
    • Less intimidating
      The page appears less intimidating when most of the content is collapsed. 
    • Helps avoid overlooking content
      In testing, 15% of users overlooked content in vertically collapsed sections, compared to 65% in horizontal tabs. 
    • Better control of page length
      Users can easily access the footer or cross-sells placed below the collapsed sections. 
    • More informative section titles
      More descriptive section titles can provide more information scent. 
  • Enhanced the image gallery with an intuitive carousel, including thumbnails rather than indicator dots, which encouraged more interaction.
  • Highlighted delivery options and product dimensions in a more accessible and engaging way.
  • Introduced a new product summary section, displaying three bullet points highlighting key product attributes. Leveraged the use of generative AI to generate these bullet points from exports of product attributes and descriptions.
  • Introduced new product recommender widgets, splitting a single generic widget into multiple personalised widgets:
    • ‘Customers also viewed…‘ provides alternative products to the current product, for users in the consideration phase, driving conversion rate.
    • ‘You may also like…‘ provides suitable supplementary products to the current product, driving average order value.
    • ‘Your recently viewed items…‘ provides the user with a history based list of products to aid navigation.
  • Collaborated with Buying and Marketing teams to audit and create new guidelines for optimal product description and attributes.
  • Designs created for variable product PDPs, technical scoping revealed extra complexities requiring this functionality to be split out into a separate project. User insight gathered helped prioritise this feature, which is now grouped together with a wider reaching searchandising and PIM onboarding project.

Results

  • 11% increase in Conversion Rate
  • 23% uplift in Revenue Per Session
  • 12% increase in interaction rate with product recommender widgets
  • Increased engagement with all secondary content sections

Key takeaways

  • Data-Driven Design: Combining analytics with user research was key to identifying and prioritising areas for improvement.
  • Iterative Process: Regular testing and feedback allowed us to refine the designs and ensure they met user needs.
  • Collaboration: Close collaboration across teams ensured a seamless execution that balanced business objectives with user-centric design.

More posts