Blue Nile Catalog Filters

BLUE NILE


PROJECT GOAL

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.

CHALLENGES

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.

HEURISTIC EVALUATION

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,

RESEARCH

  • 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

CONCEPT & PROCESS

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.

SOLUTION

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

SUCCESS

The new catalog filter system succeeded on multiple levels. Data tracking revealed that users were using multiple filters per page, inlcuding 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, Google Analytics page tracking shows a 25% reduced bounce rate on catalog pages and an increase in click-through conversion rates.

CONTACT ME

Have a job opportunity you want to share? Shoot me a message and let's chat!

Name


Your Email


Subject


Message