Case Study

Blue Nile Website

Modernizing Blue Nile's product filters resulted in significant reductions in user-error rates and an increases in discoverability & conversions.

Project hero image

Understanding the

User's Pain Point

Blue Nile was an early innovator in the e-commerce game, introducing a customer-centric online buying model for diamonds, engagement rings, and jewelry.

For any company selling a product online, discoverability is key and years of user input — backed by data analysis — revealed that our users were struggling with discoverability and increased cognitive load when using our product sorting and filtering system.

Image demonstrating the user's pain point.
Image demonstrating the business opportunity.

The Business

Opportunity

Updating our product filters was an opportunity for Blue Nile to again demonstrate our dedication to our customers by making it faster and easier for our users to find what they were looking for. This would also benefit our brand by creating significant improvements in click-through rates, conversions, and brand loyalty.

My Role

As UX Designer and Manager of User Testing, under CX Manager Michelle Meyer, I lead the effort to research, perform user testing, and design the new filtering system with the input of our in-house design team.

DEVELOPING TERMINOLOGY

We quickly realized as we began this project that we needed a common language for this project to promote accurate communication between departments and stakeholders. So we started by defining each element of the filter/sort functionality and distributing a visual aid for quick reference.

AUDITING THE CATALOG PAGES

As we began gathering data from different departments, we realized that we needed to address filters on more than 350 catalog pages to create a master list of every filter set and, name, and icon. During this process we discovered redundant catalog pages, missing filters sets, and errors in the filter count — all of which would have to be addressed as we moved through this project.

RESEARCHING BEST PRACTICES

Fortunately for me, experts in the field of human–computer interaction have already done a great deal of testing and research surrounding the process of digital filtering and sorting functionalities. I was able to do a deep dive into the recommendations provided by the Nielsen Norman Group, The Baymard Institute, and others. I took copious notes and provided a summary of my findings to stakeholders.

UNDERSTANDING THE COMPETITION

With a firmer idea of what I needed to look for, both in terms of functionality — and in terms of aesthetics, I performed a competitive analysis to understand how our competitors were filtering their products. Additionally, I looked outside of the jewelry industry to find inspiration from other online e-commerce companies that I felt were meeting their user's needs in a particularly effective and attractive way.

SUBDIVIDING OUR USER AUDIENCE

As part of our company styleguide, we already had two user persona "couples" for whome we'd defined demographics and psychographics. However, as filters get interacted with by both of our key personas, we needed to find a different way to segment our target audiences. So instead of biographical breakdown, we segmented our audience into the 5 types of shoppers to better predict their behavior.

design

applying what we learned

While researching filter styles, I kept sketches and thoughts regarding the best approaches to the new filter design. So when it came time to focus on design, we spent a lot of time on digital wireframe concepting, already having a few strong sketches to work from.

Ideation and

Design Concepts

After a brief whiteboard brainstorming session for initial filter design concepts — inspired by our research — we began wireframing for all three device types (desktop, tablet, & mobile) and exploring the application of brand style colors and patterns to the base wireframe models.

We completed a deep dive on menu placement, dropdown models, filter menus, sort functionality, applied filter notification, product count, filter count, and even type-area length to accommodate localization (language translation.)

Image demonstrating the design concepts.
Image demonstrating hi-fi concepts and/or prototypes.

Hi-fi's and

Interactive Prototypes

Given the simplicity of the design, availability of pre-existing assets, and the speed with which a high fidelity prototype could be assembled, we opted for a hi-fi prototype for testing purposes. I used a combination of Adobe and Axure software to model user interaction with the two most commonly used filters — metals and gemstones.

development

handing-off the final designs

While the underlying physical structure of what we were asking the development team to build, was relatively simple in design, the sheer number of moving parts multiplied by the complexities of the algorithms involved, provided quite the challenge.

Development and

Rollout

Our overhaul of the product filter functionality required significant changes to the algorithms used to populate the filter & sort menus and product results. I felt it was important to make sure the developers and quality assurance team had a point of reference. To this end, I created a cheat sheet with use cases and visual examples for every if/else pathway the user may take. I also provided a list of icon use-cases, to help developers identify filters requiring additional imagery.

Image demonstrating development process.

The final

Product

The final product was a sleek, refined experience that allowed users to quickly discover products, change thier sort order, and add their bling to their shopping bag with efficiency.

Slideshow of images showing final product.

It was important to us that our users could not only intuit how the filters functioned, but that the filter sets they used most frequently were readily available to them. However, we also wanted to make our less used filters available. To achieve this effect, we hid any filters that did not fit in a single streamlined row (dependant on device size) and placed them in a list of additional filter sets. This allows the user to customize thier filtering experience to meet their needs.

Slideshow image 2 showing final product.

On mobile, one of our greatest concerns was making sure the user always felt confident that their filters had been applied — as the filter UI takes up the full mobile screen area. To achieve this we added a placebo button to allow users to "Apply" thier settings, even though the developers had coded the filters to apply on selection. The addition of this single non-functional button resulted in a drastic reduction of user errors and the resulting frustration and page abandonment that we had seen in the past.

Slideshow image 3 showing final product.

Business Impact and

Key Learnings

The new catalog filter system succeeded on multiple levels. Google Analytics page tracking showed 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 accidentally 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. Overall, these changes resulted in an increase in conversion rates and improvements in user feedback scores.