OUR PROJECTS
OUR CHISLEHURST PROJECT
BROMLEY
KINGFISHER
PAINT MIXING TOOL
​PROJECT OVERVIEW​
​
Before I started my contract at Kingfisher, Product Owners had gathered customer feedback on the Valspar paint mixing tool and determined that it required improvements in four key areas. They had wanted to evaluate the digital journey of Valspar mixing tool online and the entry points on diy.com (B&Q), in order to address usability issues and spot areas of improvement. I was then brought on board to delve into these requirements and come up with the best solutions for the customer.
​
MY ROLE ​
​
My role as Senior Product Designer was to use the insight that had already been gained and suggest any further research or testing I deemed necessary in order to come up with the improved designs.
​
THE PROBLEM​
​
The Valspar online paint mixing tool had been rushed through as an MVP and had done its job at allowing customers to choose a very specific paint shade from 1,000s. However, they discovered through moderated testing that customers struggled with certain aspects of the tool. They were unable to find the tool in the first place, they found the level of technical language and tone too confusing, they didn't find it easy to find a specific colour and the search would not work for them.
​
“Why are these colours in such a random order?”
“Why doesn't the colour I search for return in the results below?”
​
The sub filter isn't clear or obvious and blends in with the main colour selector at the top. Users found this confusing and didn't understand they were actually filtering by shade.
Customers didn't find this navigational arrow clear enough and often didn't notice that there were in fact several more colours to be discovered.
Colours are in no logical order so customers find it difficult to compare colours side by side.
GOALS​
​
The goal for the customer was to be able to choose from 1,000s of paints and buy a very specific colour, without the need to visit the store and grab loads of swatches. They sometimes wanted to be able to compare colours and they wanted sizing and finishing options to be presented to them clearly. The business goal was to increase revenue from this tool and to make only the changes as outlined from the initial user research; something I later challenged. ​
​
DESIGN PROCESS​
​
I began by reading through the customer research that had been carried out prior to my arrival and getting to grips with the four key areas the business wanted to be updated: improving the main colour selector so that it was obvious more colours were available, ensuring the 'hue selector" was clear and available to be used as a filter, looking at the colour palette to determine a way of making this less overwhelming and jumbled for the customer and improving the results page so that customers could clearly see sizes and finishes.
​
Using the research that had been done, I worked up various design options to solve each of the 4 problems outlined. I then used these to brainstorm internally with my design and wider team to whittle them down to just a few options to take forward and user test.
​
My view at this point was that the tool needed to be looked at as a whole and that we should take a step back and discover how the entire page could be improved and made simpler for the customer. I suggested, for example, the idea of breaking the page into sections and using a more progressive disclosure layout for this page, rather than lots of overwhelming options on the one page. I challenged and pushed back but due to technical and time constraints I needed to compromise and I proceeded to design the best options I could within the constraints we had.
​
Once the 2 options were decided on, user testing was carried out, and the elements that could be updated were taken forward to development.
PROTOTYPES​
​
Working with the research team we tested two different prototypes - one with a grid colour palette layout and one in a list view, but both showing colour groupings from light to dark. We also tested different positions of the filter by hue.
Prototype 1 - Swatches in a list layout and "filter by shade" positioned alongside the results so that it's clearer and more connected to the results it's filtering.
Prototypes 2 - Swatches in a grid layout, light to dark.
PROTOTYPE 1
PROTOTYPE 2
RESULTS​
​
Ultimately for this particular project it all came down to development costs and times. It was decided to go ahead with the key improvements to the list page, displaying all initial colour options by default and the "filter by shade" improvements. However, the important changes to the swatches and their ordering was paused for future development.
​
I did then lead on further enhancements to the page throughout my contract, in particular the onboarding of several new brands and the movement away from this being a Valspar-specific tool. Customers are now able to filter by shade, as well as by brand, and it has seen an uplift in conversion and sales since the improvements have gone live.
​
