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.
I wrote a post on medium about it full of GIF and sketches, if you want to know more look here.
Quickview, how we manage to reduce the pages in the customer journey.
In every commerce website one of the pain that every designer try to fix is the customer journey. There is a simple rule here, the shorter the journey is the better it is. In stylight we had a quite short process, two pages, a search page with all the results and a detail page. We tried to shorter this flow to one single page. The desktop solution is a popup that we open between the two lines of products with all the info that the user has in the detail page. This let us to show to the user a faster “page” without loading a new one.
In the mobile view we couldn’t use the same approach and we adopted a slide-up page. The idea is similar to the desktop, we slide up to the page a layer with all the info that we have in the detail page.
At top right there is a close button, and on scrolling we enrich the top with the name of the product. With this green layer on top the user always know where she is and ho to get rid of this layer.
With this feature we increased the conversion rate of some percentage point compared to the normal search page.
Stylight.deIntroducing product in the homepage.
The stylight homepage shows an overview on the latest articles our editor wrote. We decided to improve the ux for the user adding also products on the page, showing better the merging of the two sides of stylight, content and commerce.
The difficult part is to show products with a context. Recently i attended a conference and one quote that sticked to my head is that if content is the king, context is the queen.
With this new homepage we tried to use the context as the main character of the page. First of all we designed a funnel column at right of the hero post. This let the user funnel down the research to more detailed categories. A list of products follow the header part, these are the first items that the user sees and for us was important to show cool products. We decided to use the handpicked products that our editors choose for the article. This means that all the products showed are fitting together and we’re 100% sure of what we show at first sight to the user.
We also added a line of products just under the posts teaser. These products are the ones that the writer choose to fit the outfit of the post. The user can directly click on the in the homepage without having to lead another page.
On mobile we designed a similar list of products under the hero post that the user can swipe. The big challenge was to include in the teaser the products of the single post. We could not put them under the teaser and even not above it. We decided to put the items beside the post showing just a little part of it fading away. The user can swipe it and reveal the whole list. We user tested this feature a lot trying different solutions, with icons, with text. When we were sure that the design and the interaction with it was intuitive and clear we rolled it out.
Stylight.de homepageNew experience for the magazine home page.
We rolled out the new homepage few months ago and was a great success. The goal of this design was to give a more fashion/editorial look to the website, create some spaces for the advertising team and give to the editors the possibility to have a visual hierarchy for the different posts. The only restriction we had was to use the same content we had in the previous design, this is a common restriction for a designer and is also the most difficult one to face because means we cannot this about any different format of the post.
We designed an hero post with a wide image, this is the only exception we took from the same-content rule. We managed this using the same format we already produce for the Facebook post picture. This ask a really low effort to the picture editors and even if is a new format for the post itself is not a new format for the team.
Overlapping the post there is a second slider, giving the chance to the team to have an highlight section.
For the feed we decided to have a single post column to give more visual white space and to explain better the content of every teaser. In order to visually brake the feed we designed some cross website row that display products categories of premium shops.
The old homepage was a grid based page with no hierarchy and no space for advertising at all. Every post had the same appeal of every other one, there was only a slider at the top that anyway was visually the same as the grid under it.