Hunter’s product detail page (PDP) is a pivotal step in a customer’s journey and one that is also crucial to the business. The PDP is the page a customer uses to inspect a product in detail and they will invariably decide on whether or not to buy a product based on what they see here. On the face of it, our product detail page is quite simple but it hides a huge amount of complexity. We provide multiple product images, the brand and product name, product video, pricing information, sizing tables and guidance, delivery options, and material details.
The more information a customer has about an item, the less likely they are to return it.
And because Hunter's active customers are pet owners, it's always difficult to take measures of your pet in the right way without the right knowledge. The HUNTER complete assortment currently comprises around 5,500 articles and ranges from collars, harnesses, and leashes for dogs and cats made of different materials, functional and fashionable dog clothing, and beds to care and hygiene articles, innovative toys, and healthy snacks.
Optimizing the PDP
As a product designer, I recently undertook the challenge to optimize Hunter's PDP to make it fully accessible and ready for more substantial user experience upgrades. Aside from functional changes, I planned to upgrade certain aspects of the user experience based on insights gathered by me via user research. Beginning the project, I took a step back to survey the state of the PDP to see where we could improve the experience based on the recommendations we were working with. I did interviews with customers, and carried out traditional user testing to identify two key customer problems that needed addressing:
-
I can’t (visually) see the details of the product.
-
There’s not enough information for me to evaluate the quality of the product.
-
I don’t know how to take my pet’s measures
Combining these needs with our technical requirements around accessibility, migration, and adopting our central design system meant our team was looking at substantial changes to the overall structure of the page. However, we still needed to strike a balance between maintaining our customer’s trust and not changing anything too quickly or radically, while at the same time updating our UI to alleviate the customer problems.
Desktop PDP 2022
The PDP template of 2022 had begun to resemble a patchwork of competing influences, creating a chequered UI that added imperceptible stress for customers when looking for key information. This meant we needed to set a foundation for a new template that we could then expand on and tailor further with iterations to components over time.
This project seems fairly innocuous on the surface, but had a whole host of dependencies that needed to be considered before getting to the delivery phase, without looking like much had happened. On the other hand, some aspects were incredibly simple to change in the design and have had a huge impact, helping us address the customer problems that had been identified.
I broke down the PDP into four sections that could then be broken down further into more specific components and variants depending on the content.
-
Image Gallery
This is the biggest driver for conversion as customers are heavily influenced by the images we use for products. We wanted to act on user feedback and add better gesture control on mobile devices with higher-resolution images.
-
Brand, product info & pricing
This area had become cluttered with extra pricing, brand information and incentives. It became increasingly difficult to skim the page and find the core information about the product, so clearing up the UI and creating a hierarchy became a priority here.
-
Sizing & main CTAs
Another area that’s heavily influenced by data, and the place where customers add items to their bag. We needed to update the view of our CTAs to make in more clear. It's simpler because in general, users find clean, neat, and organized interfaces more desirable.
-
Product details & reviews tabs
The tab style used here was difficult to maintain and didn’t allow us to add content easily; when resizing the browser, content would frequently crop or overlap sections making it hard to find details. I also wanted to create something that would add context and was easier to read in line with product images. We don’t have a review section.
I took time to define the experience we wanted to create for our customers holistically, using the previously mentioned research to guide decisions. This meant we had a vision within our technical constraints to work towards. Those constraints meant we couldn’t deliver everything at once, we had to work out how to release one feature at a time without disrupting the user experience or affecting our teams’ KPIs.
After breaking down each section of the PDP with our product and development team, I saw that certain parts were dependent on each other. Stepping back in this way allowed us to break down the page into sections we could deliver incrementally, measuring the impact of each change against the old variant.
Desktop PDP 2023
The resulting page designs happened in sequence, rationalizing the core product information in line with our design system left customers with a less cluttered product page at first glance. We were able to update the image gallery, brand, product, pricing and CTA section with simple A/B tests to measure the impact and replace old with new. More noticeable changes came with the removal of the product details section (the grey block under the image gallery in the 2019 designs) and migrating these details to an accordion.
This move allowed us to expose more sections to our customers whilst reducing overall content on the page.
For example, we've added the standalone reviews section, now it gives customers a better overview of the reviews available whereas before it was not possible to provide information.
Review Display
Today, nearly all consumers seek out reviews at least sometimes. And, 86% don’t purchase products online without reading reviews.
What’s more, a recent analysis found that visitors who interact with ratings and reviews convert at a rate that’s 108.3% higher than average. Certain features of review displays can boost conversion even more.
The review snippet we explored in the previous section is a great starting point. But, it’s not enough. That’s because our research found that nearly all shoppers (99% to be exact) look beyond this basic information and read the actual review content at least sometimes.
It’s important to develop a review display that makes it easy for shoppers to surface that content that’s most relevant to them.
picture will be added soon
-
Brand, product title & pricing
Rationalization of these elements into a more consistent template means our users can read and comprehend functional information more easily across all breakpoints.
-
CTA lockup
Making this section accessible and more noticeable is a clear upgrade from the previous design. Changing the wish list visual solution here increased its overall engagement and usage too.
-
Details accordions
Written details are clearer, easier to scan, and can be read next to the product image on a scroll. This pattern allows Hunter to add and enrich sections with more appropriate content in future releases with no limits to content length and translation issues from before.
-
Stand-alone reviews module
Reviews are a key confirmation factor for customers when deciding if they should buy a product, often commenting, “if something doesn’t have reviews, I’m less likely to buy it.”
Mobile PDP Winter 2023
picture will be added soon
Increased usability, decreasing clutter
I improved the tappable areas of the interface, this was previously a problem with the size of the size picker in particular. Although these templates show different products when compared to the 2020 version, the added whitespace and strategic removal of content helps alleviate the visual noise and cognitive load of the old design.
Improved readability
Reducing the amount of content the user has to read at first glance when they see our product page was a goal of our team, we wanted to make it easier for people to find the content they wanted without having to filter out extraneous information. The extra space and larger font sizes made interaction easier and content scanning faster, all of the content is still there but we have chosen to disclose that content progressively when the customer wants to see it.
Measuring Success
We had already identified the phases we could design and release components in, this also gave us an easy path to measuring success. Our team always had core metrics to measure against (conversion and return rate), but the staged delivery method we employed meant we could see how a new tile compared to an old one very quickly due to the high amount of traffic going through the PDP.
Learning
Simple interfaces often hide a huge degree of complexity and the more I work on the PDP with my product team and with the wider design and product community at Hunter, I can see a huge amount of potential for what we are doing!