I have omitted and obfuscated confidential information in this design case study. All information in this example is my own and does not necessarily reflect the views of Blue Nile.

Just tablet

Advanced Filtering (Responsive)

Users on responsive diamond search have started using the advanced criteria by 20% less.

Project Details

Turning moments into memories for 15 years.

"Having been a part of over 150,000 proposals and named Forbes Favorite Online Jeweler every year since 2000, Blue Nile has helped turn moments into memories. For 13 years and counting, Blue Nile has been the largest online retailer of certified diamonds, engagement rings and fine jewelry. Blue Nile offers thousands of GIA and AGSL certified diamonds and provides the guidance and education to help you choose the perfect one."

My role

As a Product designer my role consisted of conceptualizing and designing the user interface experience for web and mobile products. I created wireframes and hi-fidelity prototypes, UI requirement documentation, user-flows and hi-fidelity Axure prototypes. I have also created brand guidelines to support the tech team.


  • UX Designer (me)
  • 1 Visual Designer (Contract)
  • Content Strategist
  • 1 Product Managers
  • 3 Developers

The problem

Users on responsive diamond search have started using the advanced criteria by 20% less. Findings: “Users wanted either more filtering or sorting options when viewing ring settings so that they could better narrow down their options"

As a customer I want to narrow my search for a diamond using all the possible filtering criteria so that I can find the diamond that best fits my budget.

The location of the Advanced FIlters feature it is hard to discover. As a result, customer find hard to narrow down options when selecting diamonds.

Image shows current advanced filtering
Advanced search location.

Research + discovery

I gathered quantitative data through accessing the analytics metrics from 2011-2013. The resulsts show that mobile traffic had increased dramatically during that period. We also did a competitive audit with a main competitor regarding searching and filtering products.


  • With the increase in mobile/tablet traffic to the website, we need to create an optimal filtering experience for our users across all platforms.
  • Improve results organization and make it easier for the mobile/tablet audience to view the results.
  • Increase site conversion across all platforms.

Success metrics

  1. Conversion Rate (CR).
  2. Monitoring Customer Satisfaction.
  3. Increase site conversion across all platforms.
  4. Lowered bounce rate.
  5. Shopping Cart Abandonment.

Evaluating the current filtering experience

Our starting point for the design was to evaluate our current existing filtering feature and to use it as a base for our responsive design. We started by speaking to some of our trusted customers about what they liked about the filtering feature, what they didn’t like, and what was important to them when searching for the perfect diamond. In order to understand our users, we listen-in with customer service calls. As a result, we could start prioritizing our contant strategy based on how the customers interact with the filtering tool.

Image shows current filterin experience
Evaluating the current filtering experience


With the site analytics, we discovered that users were using iPhone and iPads as mobile devices for filtering. This information aid us to undertand the display sizes we need to focus when designing the new Advanced Filtering Improvement.

Tablet wireframes
Wireframe layouts for the different platforms (Tablet).
Tablet wireframes
Wireframe layouts for the different platforms (Mobile).


My approach for the solution consisted of removing the "extra" step of adding the Advanced Filtering. I was proposing to add the Advanced Filtering feature to the whole experience. All the filters are visible to the users as a whole experience.


The Using checkboxes as an approach worked very well especially when thinking about designing for different views. When putting in practice responsiveness the affordance of the checkbox control on the different environments sets accordingly.

Version using checkboxes as control.
Wireframe shows Checkboxes as option to Advanced Filtering.


Another option that I thought would benefit the user and the environment we were designing for consisted of using icons to show the different types of filter. A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for these new icons, text labels were necessary to communicate the meaning and reduce ambiguity.

Icons version
Wireframe shows Icons as option to filter.


What about using a sliding panel that contains all the filters? Keep the UI clear until the user makes a "move".

It was the time were the famous "Hamburguer Icon" was in vogue.

Hamburguer menu
Wireframe shows Icons as option to filter.

Lo-fi wireframing

Wireframing helped me to gather enough information to understand the issues with the proposal. Taking the provided feedback, I was able to iterate and refine other design experiences.

  • Made the diamond count results visible while the user was refining their search filters.
  • Added contextual guidance tooltips next to labels. Extensive documentation around diamond education was available, but outside the builder tools, so making sure they could get context while staying in the builder was key.
  • Changed the label from “Criteria” to “Filter” due to user confusion around the original term.
  • Checkboxes were hard to use.
  • Icons were appealing but hard to identify.
Tablet wireframes
Lo-fi concepts.


For this project I decided to use Axure RP to show the design and interaction of the idea. One of the main reasons why I decided to use Axure to develop the prototype was the limit of time that I had to transform the idea into a playable artifact.

One problem that I had to face during the design was the large number of filters (14 total) that we present to users.

Is displaying all the filters the right approach?

Based on previous feedback, I decided to use buttons instead of checkboxes as a selecting control. The following prototype shows the interaction tested.

Button approach
Axure prototype (buttons)

Next, the prototype tested using the slider + hamburguer option.

Button approach
Axure prototype (Hamburguer)

Mobile prototyping using Axure RP.

Button approach
Axure prototype (Mobile)


Using the hi-fidelity prototypes, I conducted tests using It was relatively fast for multiple tests and provided enough qualitative data.

The concept did not completely satisfy user needs.

  • Too many choices for filtering
  • Hamburguer menu, big No-No. "What is this icon for?"
  • Changing the label from “Criteria” to “Filter” was a success.
  • Hard to interact with the buttons option on mobile (Tap).
  • Icons were appealing but hard to identify. report report example


We were running out of time. Barely making the deadline for launch (holiday season), I decided to take a new approach and separate the two types of filtering, as it was originally, but in this case, making the two options more noticeable to the user as it was originally.

Ideally, I would’ve liked to have created lo-fi wireframes concepts, but due to stakeholder request, the wireframes were transformed into hi-fidelity prototypes which I created in Axure Rp.



Separate the two options using tabs. One that shows the Basic filtering types. The most popular ones. The second tab shows the "advanced" type of filtering. The UI shows more visibility that the original design where the Advanced Filtering was hidden from customers.

one word: tabs
Prototype One word: "tabs".

"More filters"

The following version was the one that finally was shipped. Test results were positive regarding the discoverability and interaction with the overall filtering system. Users felt very attracted to the panel sliding down and up to make extra filters visible. Also, the responsiveness of the design implemented for the different views made the building phase more effective.

Final vesion
Final experience @

Communicating design

I created design artifacts to share with the devs to accelerate the building phase and reduce the coding time.

redlines example


Barely making the deadline for launch, the filtering feature was finally up and running by the beginning of November, just in time for the holiday season. The filtering experienced a 36% increase in site conversions.

Carlos Marin Burgos
Website Designed and Hand-Coded by Carlos Marin Burgos