Ladenzeile, Re-thinking Search Filters

Improving search filter usability and engagement for a top e-commerce platform in Germany with over 10 million monthly users.

Year:
Role:
  • UX
  • UI
  • Front-end Dev
Stack:
  • Sketch
  • SCSS
  • JSP
  • Javascript
Ladenzeile, Re-thinking Search Filters

Introduction

Ladenzeile's product results page contributes for around 80% of the platform's revenue, being the single most important page type on the platform.

With over 100 million products in its catalogue, the ability to narrow down the results to the user's needs becomes imperative.

Challenge

The platform was suffering from a very low user engagement with the filters, and the way these were being presented was being reported by our users to be overwhelming, and hard to find the filters they wanted, with some pages having up to 26 filter types.

These issues were dissuading the platform users from using the filters at all.

old mobile and desktop filters.

Goals

Increase filter engagement

Make the filter user experience clearer and smoother.

Help the user find their products faster

Prioritize the most relevant filter types in the context of the current category.

Result

The old filters were redesigned for a more streamlined experience that does away with the filter jungle, generating a significant usage uplift on both mobile and desktop.

Redesigned mobile and desktop filters.
Different mobile filter types.
Different desktop filter types.

Focus and Clarity

By Displaying the four most relevant filter options for a given category, our users can now find what they need faster. In the case of the Fashion vertical, those are Price, Size, Brand and Color.

animation showing filter's responsiveness.

Responsive

The redesign is now fully responsive, with the same codebase adapting to any screen size.

Coincidently, by the time the new filters finished validating, a project to redesign the whole platform came up, so we had the opportunity to implement them directly with the new design aesthetics.

animation showing filter multi-selection.

Multi-selection

The new filter solution finally supports multi-selection, allowing users more flexibility in their results.

Research

User Research

We did on-site interviews with users about their filtering behavior and preferences on their favorite e-commerce websites, as well as moderated usability testing of our platform in order to gain insights.

These are the pain points we discovered:

  • It's confusing, there are too many filters and I can't find the one I'm looking for.
  • I have to scroll a lot each time I want to apply a filter because the page reloads.
  • I would expect to be able to select more than one option of the same filter type.
  • On desktop, users could not distinguish categories from filters.

Insights from the interviews and collected user data:

  • Users don't usually apply more than 2 filters per search.
  • Most filter types are not relevant for most users.
  • There is a common pattern of most used filter types per vertical, e.g.: for Fashion - Price, Size, Brand, Color, Gender.
  • Users expect multi-selection for some filter types.
Filters and category benchmark analysis of 14 competitors.

Benchmarking

We ran a filter benchmarking against 14 direct and indirect competitors on different verticals like Fashion, Sport and Furniture in order to evaluate different solutions in terms of frequency, complexity and number of steps to complete an action (apply/remove a filter).

On desktop, a common pattern that performed very good for our metrics was the horizontal filters at the top the page, with the category tree on the left panel.

Design Process

First concept for the desktop filters

Ideation

After reviewing the insights collected, the ideation process resulted in several improvements for the mobile filters and two concepts for the filters on desktop:

  • Low effort: Left panel, collapse all filters and make the categories clearly identifiable.

  • High effort: Left panel category tree; Horizontal filters prioritizing most used types.

AB test of the low-effort desktop solution, with the category tree on the top left panel and collapsed filters.

Testing & Iteration

We decided to validate the low-effort solution first and directly as an AB test because we could do it fast and immediately get quantitative data from real users.

The test results showed that the category usage had increased by a few percentage points, however, the filter engagement remained low.

We then decided to proceed with the higher effort solution, as it was a more common pattern and had benchmarked well in our evaluations.

fragments of usability tests with users on the mobile prototype.

Usability Testing

Once again we decided for on-site moderated usability tests on both desktop and mobile prototypes.

We tasked our testers with a set of scenarios that we found to be common in our first interviews Searching for high-heel Pumps in a specific size and price range, with follow up questions about their experience.

With the new insights, we re-iterated the design to address the pain-points and repeated the tests until the test results met our goals and expectations.

Launch & Validation

We first launched the mobile version as a 2-weeks AB test to 50% of the traffic in one country, while the desktop counterpart was going through its last design iteration.
The AB test was successful with the results showing a significant uplift in filter usage and slightly lower Bounce Rate. The mobile filters were then rolled-out to all 12 countries.

Right at the time the desktop version was being developed, a new project came in to fully redesign the platform and the new desktop filters were then launched with the new platform version, also performing quite well, with a significant uplift in filter and category usage.