We did it again! Zalando has dressed up its header

by Christian Leschke - 29 Sep 2014

‘I love it!’ - that was the reaction of colleagues from other departments when we did the internal testing for the new design.
I was pleased with that and the fact that the design sessions and user tests ended well. But let’s start from the beginning…

Things change over time

In the past, every one and a half years, Zalando refreshed its header. There were different reasons for this; in the early days we such focused on promoting our customer benefits such as free delivery and free returns.
Over the past six years Zalando has grown dramatically. New categories were added, the range of goods on offer increased. We decided it was time to take a look at our customers’ needs again and create a new, clean look.

A blast from the past

Alongside many small improvements, Zalando has carried out some major redesigns in the past.

2008: It was all about shoes for women and men

2010: Presenting the benefits was very important and we added clothes to the selection

2011: Introduction of gendering and more categories

2013: We got rid of the blue to appear more fashionable, focus on search

2014: Create a clean and modern look, focus on core navigation elements

Design, testing & implementation

A few months ago, our Creative Centre came up with the first drafts for a new header. The idea was to create a shop look and feel that communicates a corporate design - Zalando is fashion!
We want to link fashion with a clean and elegant interface. That means using reduced colors and focusing on call to action elements and our products. All of the factors are part of our UX concept.

After evaluating the design drafts, our UX team took over, cleaning up the content and making improvements.
Our analysis of the anonymous analytics data we collected told us what kind of links are important and which links could be moved to a less visible area.

As a result we created several interactive prototypes. These prototypes were Chrome Extensions, which we were able to run on our live shop.
In this way it was possible to offer a realistic test environment for those who took part in our User Lab.

Last but not least, we ran an onsite A/B test in Austria and Italy to prove our hypothesis. Austria is representative for Germany, Switzerland and some parts of Benelux countries.
Italy is representative of France and Spain. The primary goal was to improve the look and feel in order to strengthen our brand language and our design guidelines.
We also had to make sure that our KPIs were not influenced in a negative way. In fact we were able to measure a small uplift in the conversion rate.

We focused a lot on the search field usage because of the new position and design. The outcome confirmed our expectations - the customers accept the new position.
Although the search usage per visitor shrank by 2.5%, the usage per visit grew by 7%. This means that over 20% of our customers use the search function and are now using it more often during a visit.

Furthermore we checked the usage of the remaining features that are placed in the header, such as the wish list. Here we were able to measure a small uplift in people using the wish list.
What is interesting is the number of clicks on the Zalando logo. Due to the new position and the smaller size, the amount of clicks decreased by over 50%.
We will need to investigate whether or not the fall in clicks is compensated by the increase in use of the top navigation.

A new header concept

One part of the new header was the idea of a fixed/truncated header. This means, when the user scrolls down, the header (or a truncated version of the header) will be stuck to the top of the page in order to allow the user performing actions, without the need of scrolling up to the top of the page.
Fixed/truncated headers are a trend, that most web shops follow. But our first user tests emphasized that most users didn’t recognize this feature and that there was no need to use most of the promoted features (e.g. navigation) in our prototypes.
Most people are used to scrolling and perform this basic task very intuitively. Nevertheless, there might be use cases, where a ‘sticky header’ can be useful. Furthermore it’s only a question of time, until most users are aware of using this kind of navigation. This is a topic for further research, where we will bring in more efforts in the future.

Conclusion

To conclude, the implementation and work on the new header design went well. There is always room for improvement, but we are proud to have launched such a major improvement in terms of customer experience and overall design language.
Not putting the logo in the left position is a daring step in web design, but it is important to test new things, prove your hypothesis with figures and you should always be open to adjusting and optimising things depending on the current circumstances. No design is set in stone forever.