Catalog Revamp

Context

In March 2017, I joined the Catalog and Navigation team at Zalando. At this time, the company was starting work on a massive rebuild of its most visited component: the catalog. After 6+ years of existance, it had accumulated a large amount of tech and design debt and was in dire need of a fresh start.

Goal

A project of this scale naturally made the executive team somewhat nervous. Initially, management wanted the project to be a purely technical rebuild, with zero user-facing changes. Their reasoning was that this would keep variables to a minimum, and any changes in KPIs would be easily attributed to the change in tech performance.

The design team however, saw this differently. After a round of presentations and negotiation, design leadership managed to get buy-in for the catalog to be "softly redesigned" – no functional changes, focusing instead on design polish and "UX performance" to support maintaining or improving the main KPIs.

This was a sound approach for e-commerce, where successful design patterns are already well established, and improved results are mostly down to details and optimization .

Process

The new version followed the minimalistic Zalando design language but improved its implementation of it. A side by side comparison makes it clear that many changes were made, even if these could be easily overlooked by non-designers:

• cleaner, lighter and more polished design in line with the new UI and brand style
• responsive design with optimized layouts for different device sizes
• fluid interaction animations and page transitions
• responsive image quality based on device type, screen size, and connection

For mobile visitors, the old catalog was served as a separate m.zalando.com website, which hadn't been properly updated in several years and had under-perfoming KPIs. Because of this, the mobile version could be used as an experimentation ground.

We used this opportunity to release a new navigation system based on category tags, and more modern filters. These had previously been through several rounds of in-lab qualitative and usability testing, which meant we could release them with a high level of confidence.

Release and impact

As with any major release in a large e-commerce platform, this project relied heavily on partial releases and A/B testing. The actual numbers can't be published the testing showed increased click-through to product detail pages, as well as an overall higher conversion rate for customers on the new version.

On mobile, alongside the improved conversion rate, the new navigation system resulted in longer sessions with more browsing and page views.

Future catalogs

In parallel to the catalog rebuild, I also worked on future concepts that would be made possible by the improved flexibility of the new catalog: examples included a dedicated Premium catalog layout, or interactive real time search.