New Navi design for a 12M users/Month website
How and why we designed the new website navigation in Stylight.
Why we needed a new navi?
Few days ago we rolled out the new mobile navigation for Stylight’s website. Probably this is he biggest ticket I’ve worked on in the last 2 years in Stylight and since I’ll leave the company at the end of 2016 for new challenges I’m quite happy to leave that UX legacy to the website.
The previous navigation was 2 years old and even if we knew was a pain for the user to use it we always had bigger ticket to tackle. A couple of months ago we realised that we couldn’t wait anymore for it and I started working on it. Mobile traffic is growing more and more and today reached almost the 70% of the whole Stylight traffic. We have 12 million user per month, so you can understand how much important is for us the mobile experience.
Pain points of the old version
The old version had no major mistakes in it, was just the result of the moment we designed it, 3 years ago the mobile was already a trend but was not so big. Our navigation was the easiest thing we could make at that time, was designed with desktop in mind and was not thinking at data usage.
The category navigation was applying the desktop pattern to the mobile, this I think was the worst thing in it. In the desktop website every time the user click on a category we load that page and with that we load the subcategories, this goes on till the last category in the tree. We’ve 6 sub level in certain categories:
This means that if the user is very unlucky and enter in the website in the wohnen page she has to load 6 different pages to reach the fotohalter page. This is probably the worst user experience you could have to accomplish the goal. First of all the user will use a lot of data, and in Germany this is a huge problem. Even if she is plenty of data this operation will take a lot of time and probably she will be gone before reach the category she’s looking for.
The second main pain point was the way the filters were applied. Same as the categories this section was designed as the desktop version. Every time the user tap on a filter, a color or a brand for example, that filter was applied and the website was loading the related page.
As for the categories the experience was abut one reload for one filter, for a red dress from Zalando the user had to load two different pages. We already talked about the data usage and the time but here the problem was also about the user getting lost within the website. Try just to think about it for a second, you’re in the filter section, you open the color section and you find the red you want, you tap on it and suddenly the whole page reload itself showing only red product, the filter view now is closed so if you want to select the Zalando product you have to open it again and redo the whole experience.
To design a new experience my research took some days and I focused mainly on apps and not on websites, I wanted to give the same feeling that you have when you use an app. Something crafted just for your device and something really fast and beautiful.
From a word driven menu we switched to an icon one, this let us to place 3 different view instead of the 2 we had. In fact we took the sorting options outside, from being hided inside the filters now are outside. This was a main pain point every user was mentioning in almost every user test we did.
The icon topic is still ongoing since we want to test how fast the user can get the meaning of every icon in the menu.
Every time i need to design a new flow i always start from the paper, in this task i sketched a lot of different ideas. It’s easier and faster and you can save a lot of time instead of using Sketch/Photoshop from the first draft.
I tried to minimise the filter view when expanded, we replaced the color name list with a swipe area with the real color without names and in a hue ordered list.
This lets us to use only about 40px in height for the color section and to have a more intuitive color range.
We did the same with the price, we designed a new slider with the possibility to type in the right number to have a quick and precise experience.
The bottom bar is used now as the command bar, everything the user can do is there. Apply a filter, clear the whole filter view or close the popup.
This behaviour is cross-view and behave the same in category, filter and sorting view. Every button there is designed with different states in mind in order to give the user a clear message about when that would be active or not.
An empty status is also telling the user that no filter is selected in the first view, as soon as a filter will be tapped that will appear on the top, every selected filter will be always the first in the line in order to let the user always keeping an eye on it.
Dead end filter
We load everything in the first page and then we use it for the filter view, this means we have the complete list of all filter already loaded in background. With this approach the navigation for the user will be much faster but could happen that a selected combination of filter has no results in it.
If there are no red products from Zalando for example we will show the message you can see in this screen. The other option is to load the filters every time i select something, for example after selecting the red color we could loading every shop in the filter that have red products in the assortment. This will bring the user always to a result with products in it but will slow down the experience a lot since at every selection we should reload the entire filter section.
The new category section was designed with usability in mind, we knew that loading 6 pages to get to the desired category was a behaviour we could not afford anymore.
The user now is free to surf through the whole category tree we have, there is even the possibility to reach the roots categories (fashion, home and living and beauty) and change completely to another vertical.
The bottom bar as i said before still is the place where the user can interact with everything, there we show the X icon to close the view, on the other side there is a back (<) icon and in the middle we find a CTA letting the user to show the main category were she is now. If i click shoes for example i will have the whole subcategory loaded with ballerinas, chelsey boots and so on, in the middle of the bottom bar i will see SEE ALL SHOES in case i don’t care about the subcategories at all. A > icon on the right part of the screen, inline with the category label will tell the user if that category have children or not.
The sorting was the easier task to accomplish in this new design, before was hidden inside a filter and was really difficult to find for the user. Now it has a private space in the icon bar, without misunderstanding, as soon as it’s opened it will show the current status in bold green, selecting another option the current one will keep the bold, giving the green color to the new selection.
As we are an agile company and an agile team we never stop improving. WE’re already thinking about the next step. We will host an AB test in order to see if the user gets immediately the meaning of the icon bar. We will replace the icons with a text label and we will measure our main kpis.
we actually let the abtest run last week and even if we didn’t have any major KPI improvement we saw a +15% in the usage of the navigation bar. We’ll roll out the word version to all countries since we think people are getting easier the meaning of the nav bar.
Thank you for reading all this and let me know if you would have done something differently.