Product display page redesign
Redesigned Pact Coffee's mobile product display page leading to a 3.91% uplift in new store orders
The project goal was to improve conversion rates, contribute to business objectives (via an increase in sales, subscriptions, and customer satisfaction) and simplify navigation
Timeline
I had a 3 week sprint to conduct any research, contact and speak to users and create the wireframes.
The problem
User recordings and heatmaps on Hotjar had shown that users were engaging with the areas of the product display page (PDP) that provided a lot of information about our speciality coffee, however, they were abandoning the page before reaching crucial CTAs (add to basket or subscribe & save) leaving concern for our store conversion metrics.
The outcome
A 3.91% uplift for new store orders for mobile users
For my process I followed the classic double diamond process
Discover
I used heat maps and user recordings to identify the initial potential issues. I mapped out user journeys to visualise paths from Google/homepage to the PDP and beyond, highlighting areas for improvement. I conducted user testing sessions and collaborated with our Head of CRM on a survey to understand why users weren’t engaging with CTAs or abandoning the page at key points.
Define
The discovery insights informed a new PDP information architecture that balances user needs with business messaging priorities.
Develop
During development, I led a collaborative sketching session with the product manager, UI designer, and communications & content lead to align on direction, which streamlined the wireframing process.
Deliver
Before handing it off to the UI designer for final execution.
The solutions were derived from user testing insights, survey insights and collaborating with stakeholders - with the goal of addressing the problems mentioned above
Improve conversion rates
To improve subscribe & save conversions, the suggestion was to make the purchase options no longer pre-selected, reducing confusion. Also, to add a 'What is subscribe & save?' modal which provides clear, concise information, giving customers the confidence to subscribe by explaining the benefits and how it works.
Simplify navigation
To address the lengthy scroll users complained about and drive users towards CTAs more effectively I placed additional information about the coffee and the farmer under separate accordion drop-down. This would give users the autonomy to engage with this information while keeping the information the business wanted to push.
Here, the outcomes and achievements of the project are highlighted
A/B Testing on VWO
A/B Testing results before releasing the changes to the site indicated a 3.66% uplift in page visits to checkout from the PDP for desktop users and a 3.91% uplift for new store orders for mobile users.
Deployed to site
Following successful testing of the new PDP design, it was deployed to 100% of site traffic.
Here, I highlight the mistakes made, lessons learnt and how they'll shape future decision making
Gathering insight from relevant stakeholders before starting project
I initially missed key business feedback on PDPs, leading to an extra sketching session and a three-week delay. The content lead emphasised the need for coffee process details, which the board valued. To balance content and usability, I researched competitors and opted to use dropdown accordions to show this information; which satisfied all stakeholders.
I learned the importance of gathering stakeholder feedback early, as missing business input led to delays.