How we merged the search page with the content @Stylight // part two

RECAP

If you are reading this means you are interested in how we at STYLIGHT merged the content into our search page. This is the second part about this topic, so if you want to catch up with this you should read the first part here. If you want a short recap, continue this paragraph. In case you already read the first part, just skip this paragraph and start reading.

Last year we decided to merge our content part with our shop page. We thought our user could have a better experience if they could have both in one place. In order to do that, we decided to run several AB tests to decide which design we should adopt. We ran a first iteration with 2 completely different mockups and this helped us to understand, that we didn’t have one suitable design for both the desktop and the mobil version. What we have were positive and negative highlights from both sides.

DESKTOP VIEW

The clear winner in our first iteration was the desktop version, we compared a single column vs an ‘in-page’ version and we noticed both from quantitative and qualitative test, that the single column one was better perceived by the users. Having the content among the products was too difficult to understand for the users. They need a clear separation from shopping and content, even if they are on the same page.

MOBILE VIEW

The mobile version of the content on search page didn’t have a clear reaponse from the user test. Both versions had some positive and negative points. Here is the recap of the positive highlights from the users:

From left to right: search page, first design and second design.
  1. They liked the big picture in the middle of the page
  2. They wanted to have it at the beginning of the article

Here the negatives highlights:

  1. The animation on the interaction was too fast
  2. They didn’t like the scrolling to the bottom of the page
  3. Cutting the image was not always the best solution

Keeping these few points in mind we decided to do another iteration and we tried to merge the two mockups.

We decided to put the content at the beginning of the page along with the products in order to always display it to the users. However, this brought us to another problem: How could we shorten the content in order for the products not to be hidden under it, since the products are our core business and we didn’t want to place them too far underneath the content.

We created two different designs, and in order to test the best solution for the users, we went, as usual, for two completely different paths.

FIRST DESIGN

Collapsed (on first view) and expanded design

The first mockup took the idea of the big picture in the middle of the page and brought it to the next level. We used a big image with a short text as call-to-action (CTA) in order to catch the users’ attention. In the first version a click on the CTA brought the users to the bottom of the page, but then we saw that this wasn’t clear and caused a lot of confusion. In the second version we worked a lot on the interactions to expand the content on click with a smooth animation. This let the users understand the behaviour of the content and prevent them to feel lost in the page. Nevertheless, this first design still had some issues, and above all, at first sight it was hiding the product too much under it.

SECOND DESIGN

Collapsed (first view) and on click (popup)

In the second design we decided to use only one column of the products. This let us show the products at first sight to the users. However, we knew that one column is not enough to show a lot of content on mobile, so we decided to use a “popup approach”. All of the contents displayed is a big clickable area: the image, the text and the CTA itself. On click it opens an overlay with slideshow on top and text below. The overlay has an 80px transparent border to let the users understand that they are still on the same page (you can’t imagine how many people think they’ve opened another tab on iOS when something happen) and to let them close the overlay by tapping on the background page.

This approach gives us a lot of freedom to create the content in the popup and also let us show at least 2 products at first sight. This is really important for us in order to let the users understand what page they are on.

TESTING

In order to conduct a proper user test we created two mockups with Pixate, which simulated the real interactions on the pages. This took us some time but we learned the lesson from the first iteration and we never do the same mistake twice.

We tested both qualitatively and we saw an almost equal split in the user test. We decided to code both version and run an AB test, to see the usage of the two pages from our analytics. We ran a two weeks of AB test and we noticed an higher usage on the second design. Seeing a product at first sight have probably brought the users to scroll more in the page and discover what they were looking for.

FINAL CONSIDERATIONS

We learned a lot about how our users act on the website during this time and we are sure we improved their experience during the shopping. Even if we did a lot of work in order to bring the content on the search page we knew that this was just the first step to connect inspirations and shopping and we are already looking forward to the next step.

In all the phases of user testing i collaborate with my User Researcher colleague Alex and of course i did several design iterations with the wonderful design team here in stylight, thank you guys.

Thanks for reading this, I’d like to hear your feedback on this.

Like what you read? Give Alberto Andreetto a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.