Blue Nile Catalog Filters



Improve click-through rates from catalog pages to product detail pages through a new filtering system designed to be more effective, efficient, and error tolerant.


During initial research to determine the scope of the project, two related issues revealed themselves as dependancies to the original project request. Scope was revised and both issues were addressed as sub-tasks.

1.  Information architecture needed refining to reduce the number of siloed user flows.2.  URL & Breadcrumbs required updating to meet SEO best practices.


More than 350 individual catalog pages had to be reviewed, and the page content and filters documented, in order to understand the existing user experience. In addition to multiple inconsistencies, several usability issues were discovered.

Design Element Usability Issue Best Practice Solution
Horizontal layout Eye-tracking impact,Heavy ocular work load Improved scanability,Recognition over recall,Fitts’ law of proximity Vertical layout
Open/Close allbuckets at once Overwhelming options,Product set pushed below the fold Improved discoverability,Hick’s Law of decision paralysis,Visibility of system status Open/Close bucketsindividually
Static product count No response to user input User control & freedom,Visibility of system status,Error prevention Dynamic productcount
Dated aesthetic Not visually pleasing,Inaccurate representation Match between system & real world,Aesthetic & minimalist design New visual design& icons
Content & layout Inconsistency,Too many filter options,Lack of filter buckets Match between system & real world,Miller’s Law of working memory,Jargon-free experience Card Sort testing,Updated filters,New filter buckets,


  • User personas
  • Market Segmentation
  • Google Analytics data
  • Competitive Analysis
  • Industry Analysis
  • Customer Service interviews
  • Journey Mapping
  • Logic Flow
  • UX/UI best practices
  • User Feedback Form
  • Interaction Design & Specs
  • User Testing


Over several months, a variety of concepts were sketched, wireframed, tested, prototyped, and tested again, until a final solution was settled upon. In addition to known usability issues, testing also revealed an unexpected user-error case arising from the "reset filters" functionality which needed to be addressed. Both the UX team and stakeholders provided feedback and guidance throughout the process.

Catalog Filters User Flow
Catalog Filters Interaction Specs


The final solution utilized:

  • 1.  A vertical layout
  • 2.  Single-bucket open/close functionality
  • 3.  More filter bucket options
  • 4.  New & updated SVG icons/visuals
  • 5.  Applied filter functionality
  • 6.  Industry standard mobile lightbox
  • 7.  Dynamic product count
  • 8.  Dynamic Filter buckets

Click to view live web-page

Blue Nile Catalog Filters on Mobile


The new catalog filter system succeeded on multiple levels. Google Analytics page tracking shows a 25% reduced bounce rate on catalog pages and an increase in click-through rates. Data tracking revealed that users were using multiple filters per page, including those hidden in the "More Filter" dropdown menu. Error case logging showed a reduction in the frequency in which users accidently reset their filters and/or filtered their results down to zero products. Finally, compared to benchmark studies, user testing revealed a 169% increase in filter discoverability times.


Have a job opportunity or feedback on my portfolio? Shoot me a message and let's chat!


Your Email