UX-UI DESIGN

Paint Colour
Finder

There was a need in helping customers find their perfect paint for their homes which is why we decided to create a tool that will do just that.

homebase-paint colour finder

intro

In my capacity as the Head Designer, I’ve had a very active role n the creation of this innovative tool.

The implementation of the Paint Tool has proven equally impactful, generating an impressive $27,000 in revenue within the initial four weeks of its launch. These results underscore my commitment to designing not only aesthetically pleasing but also commercially effective solutions.

about

Introducing a groundbreaking addition to our website: a cutting-edge tool meticulously crafted to assist customers in selecting the perfect paint colors for their homes. This innovation is the result of extensive research and thoughtful design, ensuring not only unparalleled user-friendliness but also an aesthetic that radiates style and sophistication.

 

the impact

The impact of this groundbreaking tool is reflected in the data-driven success it has achieved.

Remarkably, 20% of users who engaged with the Homebase email, featuring the paint tool, clicked through to explore the tool further. Impressively, 16% arrived at the paint tool page through Cost Per Click (CPC), with an additional 12% originating from organic search. Notably, a significant 24% were directed to the paint tool page by clicking on the strategically placed banner on the lister page for ceiling and wall paint.

first month

In the inaugural month, spanning from October 26th to 4th of December, an outstanding 21% of users who interacted with the paint tool went on to make paint purchases. The initial cohort utilizing the paint color finder has resulted in a substantial revenue of 5.5k specifically in interior paint sales. Significantly, this cohort’s conversion rate surpasses that of equivalent listings page shoppers, affirming the tool’s heightened value and efficacy in driving sales. This data underscores the resounding success of our innovative paint tool, setting a new standard for user engagement and commercial impact.

How to use the tool

We have inserted a Guide button  that opens these pop ups for those who need help using the tool. This Guide explains in simple steps how to use the tool.

Results: Focus on the first cohort

Main Points

In the inaugural month, spanning from October 26th to 1st of December, an outstanding 21% of users who interacted with the paint tool went on to make paint purchases. The initial cohort utilizing the paint color finder has resulted in a substantial revenue of 5.5k specifically in interior paint sales. Significantly, this cohort’s conversion rate surpasses that of equivalent listings page shoppers, affirming the tool’s heightened value and efficacy in driving sales. Paint colour finder users have a slightly higher percentage of Click-and-collect purchases. Users continue to show a higher propensity to purchase tester pots, and are overall more engaged.

Paint Colour Finder users have generated £14k of interior paint per month (excluding email) or £18k per month (including email) with a total of 27k.

This data underscores the resounding success of our innovative paint tool, setting a new standard for user engagement and commercial impact.

More details about the tool

First section

Here you can pick your colours, brand, paint type based on room and even change the background image by clicking on Choose Room.

You can easily compare colours between them by selecting them and viewing them on the wall of the room chosen.

Benchmarking done on competitors such as Amazon colour picker, Dulux Visualiser App, PPG Paints and other similar companies.

Ways to clear the colour selections and why

1. Erase one colour at a time

2. Erase all Colours from the room image

3. erase all colours from the Selected Paints section

By clicking on the X icon you can erase only one colour at a time from the wall.

This is the most clear CTA  for erasing all the colours selected so far.  It can be easily seen when you are on this screen in case you are missed from the section bellow.

The smaller Clear all button in the your selected paints is here  in case people want to erase everything from this section and missed the button from from  the section above.

Forgiveness design rule

Designing for forgiveness means creating products that are forgiving of human error. It involves anticipating mistakes users may make and incorporating features that minimize their negative impact. By designing for forgiveness, products can be more user-friendly and ultimately lead to greater user satisfaction.

Challenge

1. How to see the difference between wall paint & trim paint 

Solution: Visually differentiate the two and name the one that is a woodwork paint.
Why just one? Because it is more common to buy multiple wall paints and one woodwork paint.

2.How to make it clear for customers what to click on to go to the next stage?

Solution: Make the main CTA more proemininent ex. Colour green to stand out and place it first.
Weather you click on the individual view products or the bigger view chosen products you are still being lead to the next page, the only difference being that if you click specifically on one of the paints that is the one that will show as first on the next page.

Fitt's design rule

It is faster to reach bigger targets that are close to you than it is to hit smaller ones that are further from to you
– view your chosen products CTA
– trying to help you go to the next step

About Colour themes

Sweet embrace continues to be the most selected theme – significantly ahead of the others.

2. Colour selection page

1.

Selected colours section

These are the selected colours tiles. The idea came from a folder but implemented in a digital way to easily swipe through the colours.

2.

Add extra colour section

Here you can add extra colours by clicking on the + icon. The user will be send to the previous page to add extra colours.

3.

Product img, reviews & tags

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

4.

Product details

.Product detailLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

5.

Paint Finish

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

6.

Paint Filter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Paint Finish & Size Filter

Here we can see the difference in the finishes and sizes between products.
Whichever one you choose to click on will send you to the Product page.
By putting the type of finish in a grey rectangle helps divide the paints between them and makes it stand out to the customer.
You can also narrow your scope by filtering using our size & finish filter which I think it’s very helpful.

Banners for various brands on the Homebase website

Feedback Form

The feedback form is to give continuous & constant feedback from the customers as a design job is never truly done and it can always be improved. Results to come.

User testing results to come after the tool launch...