Image of lots of complex refinements without any explaination.

Why do we need this?

Finding the right product for your needs can be a challenge at bol.com. Bol.com prides itself on having the most extensive assortment in the Netherlands and Belgium. This assortment has grown to a total amount of 23 million unique products. When you select a category, let's say, television, you still have to sift through more than 800 products. In our exploratory UX research, users see this as a big challenge. They often don't really know why they select a size or a type of screen technology. This is usually based on knowledge of experience or heard it from a nephew who is really it-savvy. And because that sometimes isn't the best information, some customers make an expensive mistake that could be easily avoided.

Challenge

We saw this as a challenge that can be solved for our users. This problem can't be solved only with a UX designer. So, I invited a visual designer, a business analyst, a product owner, a front-end developer, and a back-end developer to think about what kind of challenge we need to solve. So, we came with the challenge:

How can we enable users to make informed choices when they select a refinement value?

Image of lots of different idea's to help users to use refinements.

Creating solutions

So based on the insights from the UX research and the goal, we started creating solutions for this problem. We were thinking about visually arranging refinements to guide users to the most essential refinements to choose, or explain the category or one refinement better another idea was to create a separate page to describe a refinement and their value's. The choice helper was born.

Image of the first version of the Choice Assistant.

Version 0.1

So, a visual designer and I made the first version of the choice helper. And it's really a basic flow. Under each filter that we can further explain, we added a link with the name Keuzehulp, the Dutch name of the choice assistant. When the user interacted with the Keuzehulp. A modal window opens with an explanation of the refinement and also the refinement values.
To highlight the explanation, we created our own icon. Based on the diverge and converge idea of the design process.
We tested this idea with a prototype, and the reception wasn't that great. Users couldn't find the choice helper. Users were very enthusiastic when they opened one. After that, they also found the other choice helpers. But it wasn't that great.

Version 0.2

So, users couldn't find the choice help. With this insight, we created a new prototype. We added an explainer label above the filters to highlight and explain the idea and added some visual recognition with a unique choice help icon. Also, the modal window got a new design to better guide the users through the information.
We also tested this version, and we had the same problem. Users simply didn't find the functionality. This was something that worried me. Stakeholders began to ask questions about why the feature wasn't performing. And I started doubting my skills.

Image of the second version of the Choice Assistant.
Image of the third version of the Choice Assistant.

Version 0.3

So, all in to make it more visible. The challenge is to make it more visually attractive without overshadowing other functionalities on that page. So general explanation of the functionality got more attention, and the label beneath the filter got a new copy: Do you need some help with this choice.
Fortunately, we tested this one also. The same problem occurred. I started to freak out because the users still didn't saw it. Didn't know anymore what kind of next steps we should take. I needed a break. So, I did. People at bol.com have more idea's then time, so I started o another project. After a successful test, I had new energy to tackle this problem.

Image of the final version of the Choice Assistant.

Final version

With a fresh mind, I started to look again at the disclosure of this functionality. I really looked at what worked and what didn't. We knew that the icon didn't really help, so we changed it to an icon we use more to visualize links. Another no brainer was to change the color of the link from black to blue. The most common internet pattern. The last change we did was the copy. Users really didn't like the name of the feature, do you need some help? Users said that they weren't lost, so they didn't need any help. We changed the name to hint the content behind the interaction. To give a sneak peek, what users can expect.

Image of icons that explain the A/B testing concept.

A/B testing

We decided to test this functionality one more time. And this was the best we could deliver. So, we created an A/B test. One with the choice help and the other without. As a team, we decided to measure two KPI's; usage of refinements and conversion. If one or both increased, we see it as a successful test. So, after four weeks, we look at the results and… IT WAS POSITIVE!!! An increase in usage of refinements and an increase of conversion. I was over the moon with these results. It finally paid off. We can assume that the choice helper helps users with their decisions.

What I learned from this project

As you could read, it was a project that had some challenges. This project showed me that I can crack every problem. But you can't force it. To pause a project and come back after a while is maybe better than look to long for a solution.
This project made me also humble. To tell my stakeholders that I couldn't solve this problem was really hard. But I really earned their respect with that. And gave me a chance to try to solve this problem one more time. With, fortunately, a happy ending.

Curious for more content?

All my work

Project: Buyblock vision