Product Details Page Revamp
Like many large retailers, Myer is dedicated to enhancing its online shopping experience with a strong user-centered approach. To ensure our initiatives align with customer feedback and data, we hold prioritization workshops every 4 to 6 months.
In our latest workshop, we pinpointed key user pain points and identified priorities for the upcoming months. One major focus was the Product Details Page (PDP). We prioritized this area due to feedback highlighting several issues, including:
-
Insufficient product imagery
-
Absence of a quantity selector
-
Inadequate visibility of click-and-collect/delivery options (only available after adding to the bag)
-
Lack of comprehensive size guides for certain products
-
Insufficient product descriptions
-
Overload of unnecessary information
To address these challenges, I led a discovery workshop with Project Managers, BAs, developers, designers, and Trade & Merch teams. As the sole designer on this project, I managed the entire process from research and concept development to visualization and testing.
I used AI throughout the process to speed up research synthesis and design exploration, while keeping every decision grounded in data and customer feedback.
Overview
One of the major challenges in this project was emphasizing to the Trade & Merch teams the critical importance of high-quality imagery. Additionally, I needed to collaborate closely with other developer teams to integrate Click & Collect information into the product details page, ensuring this crucial information was available before users reached the bag or checkout stages.
Challenges
Summary
- Data Analysis
- Customer Feedback Analysis
- Card Sorting Test
- Current PDP State Analysis
- Competitive Analysis
- Workshop facilitation
- Wireframing
- High-Fidelity Designs
- User Testing
- Developer hand-off & collaboration
Services
- Fully-detailed research report
- Problem defining workshop
- Defined Success Metrics
- Wireframes
- High-Fidelity Designs
Deliverables
Throughout the project we were able to identify and explore with the research all the pain points brought up by users and work out the best approach to be able to deliver the initiatives.
After working through the workshop feedback and wireframes, we were able to tackle the high-fidelity designs and have defined success metrics pre-defined for when we have it AB tested.
Outcomes
Initial Research
To effectively conduct the discovery workshop and establish a solid research foundation for our initial exploration, I began by gathering and synthesizing all existing data and customer feedback related to the Product Details Page (PDP). This thorough preparation ensured we had a comprehensive understanding of current issues and user needs, setting the stage for informed discussions and targeted improvements.
I used Claude cowork to group hundreds of written customer comments into themes such as sizing, imagery and delivery. I then checked each theme against the original comments before presenting it, which cut synthesis time from days to hours.
Collecting numbers related to the PDPs in order to get an idea of existing numbers around the percentage of clicks to PDPs and percentage of Add to Bag clicks within PDPs (for all different devices).
Google Analytics
Heatmaps of PDPs illustrating sections of the PDP where customers tend to interact (for all different devices) and analysis of the results.
Hotjar
Written feedback around the topics:
- Product Information
- Product Imagery
- Product Description
- Quantity Buttons
- Size Guides
- Click & Collect/Delivery
- Stock Availability
Voice of Customer
I organised and reviewed all the various Product Details Pages (PDPs), focusing on visual pain points related to structure, UI distribution, and information hierarchy. Additionally, I consulted with previous designers who had worked on PDP-related projects to gather their valuable insights and experiences. This comprehensive approach helped identify key issues and informed our strategy for improvements.
I used Claude cowork to compare our PDP templates and summarise inconsistencies in structure and information hierarchy, giving me a starting checklist that I then reviewed and refined by hand.
Current PDP State Analysis
Card Sorting Test
To understand a bit better how users rate the information they are given about a product, I organised an unmoderated Card Sorting Test through Optimal Workshop. Recruiting through Askable 20 participants, 10 male, 10 females. Ten of those being MYER One members and the other ten not MYER One members.
They were given 20 pieces of information that would appear within PDPs and then were asked to rate those between Very Important, Important, Somewhat Important and Not Important.
This was important for us to define which information should be displayed above or below the CTA (hierarchy of information).
AI helped me draft and refine the list of 20 information items so the wording was clear and neutral for participants, and helped summarise the ratings into a first-pass hierarchy that I validated against the raw results.
For this workshop I invited 11 people including Project Managers, BA’s, devs, designers and Trade & Merch. Which was important cause some of the customer feedback would also involve the trade team since we would have to incorporate new imagery and product description.
Before the workshop, I used AI to turn the research into a short, digestible data overview for the group. Afterwards, I used it to cluster the How Might We ideas and draft the workshop summary, which I checked with the Product Manager before sharing.
Discovery Workshop
Data Overview
To start of the workshop, I’ve started presenting all the data and research collected (GA, Hotjar, VOC, Card Sorting Results and Current PDP analysis). Providing all the insights available, helping us understand what’s the current situation and our current user sentiment towards our existing PDPs.
Competitor Analysis
The competitive analysis gave us an insight into how other retail companies and ecommerce websites approach the display of product information and available functionalities. We began to identify our differentiators, where others were failing/thriving as well as where we needed improving.
I used Claude cowork to gather and organise competitor PDP features into a comparison, then reviewed each competitor site myself to confirm what was actually there.
After that, we took time to compile all the ideas and what we think should be done in order to improve the experience and the visual structure of the pages.
Once we had all the ideas together, we started linking them together and defining which of them we are not looking to focus on for this piece of work.
How Might We
To define which of the ideas were feasible and could be delivered within the next few months, we took all of the the ideas, one by one and decided in which position of the matrix it would fit.
The discovery workshop accelerated progress on the project. Getting everyone in the room at the same time meant we didn’t need endless meetings or calls. Gathering all of us together meant we were all on the same page from the off. It kept the decision loop short, and more importantly quick. Not only this, but it gave us a chance to all get energised and start to get excited about solving the problems.
How? Now? Wow?
Throughout the workshop, we were able to narrow down the main points that we should look into. Focusing on the easy of delivery and customer value of each:
- Interface re-structure
- New hierarchy of information
- Implementation of accurate Click & Collect/Delivery information
- Better product imagery and gallery re-structure
- Implementation of quantity button
- Implementation of Brand Size Guides and Universal Size Guides
- Improving product description
- Implementation of Zoom feature
Workshop Outcomes
Wireframes
Outlining all of the information required at each step allowed me to be UI design agnostic. We didn’t have to make strongly opinionated design decisions and could move quickly to build up the page templates. Working in this way also allowed us to be lean. I could create a wireframe and share the layout idea with the stakeholders quite rapidly; thus avoiding timely work associated with well-finessed UI design.
I used Claude design to take my quick dirty mockups an explore alternative layouts and information orders based on the card-sort ranking. AI widened the range of options; I chose the direction based on the research.
To mitigate cognitive load to maximize usability, I designed a minimalist interface that prioritised the focus on information using only existing library components that allowed for quick decision-making by highlighting priority information and action content.
I used AI to generate and test copy variations for size guides, delivery and Click & Collect messages, aiming for the clearest wording with the least cognitive load.
High-Fidelity
I conducted usability testing sessions with our primary users to validate whether the new designs would solve their problems. I wrote a script including a scenario asking the user to identify and talk through the areas that were improved ( around transparent returns, offers, MYER One pricing, size guides, Click & Collect, delivery and product description).
During the sessions, I observed how they interacted with the prototype and would analyse the information provided. The usability session revealed that it was less arduous to understand the size guides and measurements, also visualize a clear preview if the product was going to be available for Click & Collect as well as the product description. It was easier for the users to identify which were the action point areas and which were only related to information.
I used AI to transcribe the usability sessions and draft first-pass observations, then reviewed the recordings to confirm each finding before acting on it.
Design Validation
Dev-handoff & Success Metrics
After the validations of the designs were finished and the project was approved by all relevant stakeholders, I’ve organised together with the Product Manager responsible for this project, the kick off meeting for developers involved.
As usual, we went through all user flows and designs, taking questions and discussing several points relevant to the feature.
For the success metrics of the initial AB testing we will focus on:
- Increase of clicks in Add to Bag
- Decrease of number of abandoned checkout sessions
- Decrease of number of clicks within the bonus/promo section
- Decrease of returns due to wrong sizing
Also decrease of negative feedback around:
- Size Guides
- Click & Collect availability
- Product Description/Imagery
- Ability to choose Quantity prior to checkout
I used AI to draft acceptance criteria and edge cases (out of stock, no Click & Collect at the selected store, missing size guide), which I reviewed with the PM and developers during the kickoff.
Status: This project is currently in development. Results from the A/B test will be added once it's live.