Product Details Page

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.

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

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.

Initial Research

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 organized 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.

Current PDP State Analysis

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).

Card Sorting Test

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.

Discovery Workshop

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.

Data Overview

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.

Competitor Analysis

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

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.

Wireframes

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.

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.

Design Validation

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