How we redesigned online fashion browsing

Learn how we made Zalando’s vast product selection easier to explore with an innovative tailored browsing experience.

Zalando Product Design
Zalando Design
6 min readJul 26, 2023

--

A screenshot of a search result on Zalando’s product detail page, with the keyword “Dresses” in the search bar on top and multiple products displayed. The copy in the screenshot reads: “What kind of collar?” and the dress options below display varied types of collars. The image uses Zalando Product Design branding.

When faced with a vast selection, how can we find what we want even if we don’t know what we are looking for? The best experience design solves this riddle by guiding customers through a journey, breaking down choice into intuitive categories, surfacing curated selections, and infusing the experience with joyful moments. This is something Zalando’s personalization experience product design team has been refining for the past few years since user research revealed that a lot of our customers said, “I feel overwhelmed by choice while exploring Zalando.”

With over 1 million products in our assortment at the time (now close to 2 million), it’s easy to understand why. The team needed to make Zalando’s selection easier to explore and more inspirational by tailoring it to the different mindsets and fashion expertise of our more than 50 million active customers. They addressed this problem by creating an innovative fashion browsing experience, which brings more of a personal touch to online shopping.

In this article, we’ll round up the product design team’s journey, highlighting the explorations, findings, and solutions they came up with along the way.

Creating a common language

In the research phase, the team identified two customer mindsets: hunting, when customers know exactly what they want; and exploring, when they are less focused and looking for inspiration. Whichever the mindset, finding that must-have item among the million felt challenging. Two key factors contributed to the sense of overwhelm reported by almost half of Zalando customers. Two thirds of customers used only functional filters when browsing, such as brand, price, and size, as opposed to fashion-specific filters such as style or cut. Additionally, research has shown that customers often struggle to articulate their fashion needs and preferences in words.

The lack of a common language made matching desire with product a bit of a lottery. This “flawed discoverability” was evidenced in catalog page impressions, which revealed that a lot of the time, customers did not browse beyond the first few results pages. Consequently, the vast majority of the assortment was not seen by customers.

Clearly, the problem was not simply that Zalando offered too much choice, but that customers were not adequately equipped to navigate the assortment. Translating all of this data into a browsing experience that addressed these issues was going to be challenging. However, it presented an exciting opportunity to rethink searching and browsing within fashion e-commerce.

The team set out to create the common language that was missing: a way to navigate choice inspired by the personalized and intuitive nature of the offline fashion experience.

A nudge in the right direction

The personal touch we feel when shopping in our favorite physical fashion stores is about more than exemplary service. It’s about following our senses, and intuitively honing in on other pieces that match our discoveries or complement our previous purchases. As Anne Pascual, SVP Product Design, discussed in her presentation for UXDX in 2021, the team set out to replicate this experience at Zalando. One of the objectives of this project was to design a flow that allowed Zalando to act like a “fashion-savvy friend” to customers, providing helpful nudges to guide and empower their searching and browsing.

At Zalando we talk about ‘Assortment Entry Points’ as a way to help users start and refine their searches. To make them more relevant, the team consulted fashion experts on the most useful starting points for specific categories — for example, ‘fit’ for jeans or ‘occasion’ for dresses. Adding visual cues would be key to helping customers navigate these categories, building visual memory, and improving findability. Following the principle that we don’t know what we like until we see it, the assumption was that visual entry points would boost recognition and increase discoverability.

The team came up with many different design variations. To help hone in on a solution that really resonated with users, they conducted a design review at the end of each day for two months, including rapid prototyping and four qualitative user tests. Users appreciated how visual cues enabled them to compare and learn new fashion concepts and make informed decisions. Placing quick filters higher on the page to offer more personalization options was also successful. Crucially, the team learned that helping users narrow down the assortment as soon as possible in the discovery phase helped reduce the clutter of irrelevant products along the way.

Seeing is understanding

Of the three solutions the team landed on, two were highly visual. This addressed the need to create an accessible and universal language that did not rely on customers being familiar with fashion jargon. After all, fashion is intrinsically visual, so the starting point of the customer journey would somewhat reflect the offline shopping experience.

Single Attribute Entry Points

Two screenshots of Zalando’s product detail page, desktop and mobile, showing the search results for dresses, with the specific “v-neck” filter applied. The image uses Zalando Product Design branding.

While customers browse the selection, one specific product attribute, such as ‘V-neck collar,’ is highlighted via a carousel of seven products. There is an option to browse all products that display this attribute. Clicking on ‘browse all’ applies a filter and redirects customers to a catalog page filtered for the corresponding attribute.

Multi Attribute Entry Points

Two screenshots of Zalando’s product detail page, desktop and mobile, showing the search results for dresses, with no specific filter applied, showing different collar options. The image uses Zalando Product Design branding.

A second type of carousel showcases all the versions of a particular fashion attribute. For example, different collar styles such as boat neck, cache-coeur, standing collar, mandarin collar etc.

Suggested Filters

Two screenshots of Zalando’s product detail page, mobile no user logged in, and mobile user logged in, showing the search results for swimwear, and a suggestion of top filters to be applied, customized to the user in the case of the logged in user interface.

Suggested Filters (called ‘Top filters’ in the UI) offers the most relevant filters directly at the top of the catalog based on the current category, which allows customers to narrow down the assortment more easily. This reduces the number of irrelevant products customers have to browse through while boosting the discoverability of relevant products.

From overwhelming to empowering

After an extensive period of user testing, the changes were fully rolled out at the end of September 2022. The new experience has more than halved the number of customers who find shopping at Zalando “overwhelming,” moving Zalando closer to its vision of being the Starting Point for Fashion.

“When we embarked on this project, the catalog only had text-based filters. Now it is not only much more visual, but also way better integrated into the browsing behaviors of our customers. It really is a step change!”

Customers browsing Zalando can now explore the assortment in a more visual way, eliminating the need to scroll through dozens of pages of articles to find a suitable article. What’s more, as customers navigate and set filters, a natural curation of complementary items emerges. It also provides important data to help Zalando better understand their tastes, combinations, and fashion behaviors, so that we can ultimately serve customers better. Combined with the ‘Style Profile’ feature, where a customer’s preferred sizes, price bracket, and brands can be saved, browsing Zalando is even more personalized and targeted.

“When we embarked on this project, the catalog only had text-based filters,” says Timm Kekeritz, VP Product Design. “Now it is not only much more visual, but also way better integrated into the browsing behaviors of our customers. It really is a step change!”

Senior Product Designer Marija Paunovic joined the project in 2022 when it was in its final stages. “Feedback collected through user research since the launch revealed that the use of visuals has been an effective way of reducing fashion jargon,” she says. “For example, one customer wrote, ‘Sometimes I don‘t know the word for what I am looking for and then it is perfect to just see it and be able to click on it.’ In addition, customers said that finding fashion articles is now simpler, faster, and more inspiring, highlighting that product details are now more visible.”

Reflecting on her involvement in the final stages of the project, Marija says, “It’s been amazing to witness the team pulling together and raising the bar with every A/B and user test. I was also happy to be able to contribute with iterations in the final stages where I gained many insights into the ways our customers browse and search. I am excited to continue to refine the browsing experience in the coming years and help bring it to the next level.”

Are you facing a similarly complex project in your product design team? Next, read our tips on how to lead teams through complexity.

--

--