Product Detail Page Migration, Part 1: Optimisation
Zalando’s product detail page (PDP) is a pivotal step in a customer’s journey, and one that is also crucial to the business. In a nutshell, the PDP is the page a customer uses to inspect a product in detail and they will invariably make a decision 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, pricing information, sizing tables and guidance, delivery options, material details and care instructions as well as reviews for 600,000 products. The more information a customer has about an item, the less likely they are to return it. And because Zalando’s 34 million active customers spent 6.5 billion euros in 2019 alone, lowering sizing-related returns by just 1–5% would be worth hundreds of millions of euros.
Optimising the PDP
As a product designer embedded in the multi-disciplinary Product and Category Experience team (PACE), I recently undertook the challenge to optimise our PDP to make it fully accessible and ready for more substantial user experience upgrades. Aside from functional changes, we planned to upgrade certain aspects of the user experience based on insights gathered by our product management team in collaboration with Zalando’s user research team, Voice of Customers. Beginning the project, we 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. The Voice of Customers team had conducted in-home interviews with customers, set homework tasks and carried out more 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.
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 2019
The PDP template of 2019 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.
We 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 colour of our CTAs to make them compliant with our new central library. We also wanted to make more of a concentrated ‘chunk’ of components that corresponded to a certain task. - 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. We also wanted to create something that would add context and was easier to read in line with product images.
We 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, we 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 2020
The resulting page designs happened in sequence, rationalising 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, the stand-alone reviews section now gives customers a better overview of the reviews available whereas before it was hidden beneath a tab, sometimes providing no information until after customers interacted with it.
- Brand, product title & pricing
Rationalisation 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. Adding the wish list functionality 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 scroll. This pattern allows Zalando 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 Summer 2020
Increased usability, decreasing clutter
Using our central design library allowed us to improve 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 2019 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.
Our second goal (discussed more in part two) of this project was to enable other teams to use our components in their work and contribute their own to our newly migrated page.
Learnings
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 Zalando, I can see a huge amount of potential for what we are doing!
Look out for part two of this article to find out about how the PDP migration allowed us to streamline our collaboration in order to simplify future updates.
