The Problem

The old Blue Nile filter hasn't been re-investigated for a few years and had some serious issues:

1 - Drawer styled filters expands all with only 1 click:

  • When opens, it pushes down the products down the page that barely any product is visible in the viewport.
  • Mobile experience is even worse, expanded drawers takes 90% of the viewport and no product is visible.

2 - The horizontal layout of the filter items makes the scan-ability very low.

3 - Lack of icons to help educate users with unfamiliar product types.

4 - When customers interact with filters:

  • Even though products are refreshing and updating, they are not visible.
  • The product results count number was located on the bottom right corner, which is not noticeable.
  • The product results count number was not dynamic.


My Process

We started with researching the old filter system. I did an evaluation of the usability and an open card sort study. Our UX researcher interviwed customer service agents and did competitive analysis. We get together and brainstormed potential concpets for the redesign.

We then met with the engineering team to present our findings and proposed solutions. In the meeting, we defined scope and timeline for the project.

Once we have scope defined and got blessing from our engineering team. I went back and started brainstorming, wireframing, prototyping, running usability tests and iterating on my design.


My Solution

Through all the research and feedback gathering, I made a few decisions:

  • Moved away from the drawer style, I designed a horizontal layout that will allow users to see real-time refreshing filter results.
  • Results numbers are now on the top, this serves 2 purposes:
    1. To show the customers we have lots of products to choose from, showing the scale of our business.
    2. To provide customsers with realtime confirmation of their interaction wit the filters.
  • Keeping mobile users in mind, a modernized, industry standard lightbox filter was designed.
  • With the help from our Merchandising department and cardsorting, we were able to re-label the products so we are speaking users' language.
  • Several sets of educational icons were also created to help guiding users when they are filtering through thousands of products.


The Results

This redesign project is very successful in many ways:

  • Bounce rate on catalog pages decreased by 25%, and there is an increase click-through rate .
  • According to data tracking, users are now more frequently using filters and error cases are a lot less than before.
  • User testing shows a 169% increase in filter discoverability times than our old filters.
  • Customer service agents agents indicate that they got less questions regarding product type clarification after the icons were introduced.