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.
Users on responsive diamond search have started using the advanced criteria by 20% less.
"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."
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.
Team
Users on responsive diamond search have started using the advanced criteria by 20% less.
userTesting.com 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.
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.
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.
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.
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.
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.
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.
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.
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.
Using the hi-fidelity prototypes, I conducted tests using Usertesting.com. It was relatively fast for multiple tests and provided enough qualitative data.
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.
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.
I created design artifacts to share with the devs to accelerate the building phase and reduce the coding time.
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.
