View all Projects

Inspirations Paint

Inspirations Paint are currently implementing their click and collect strategy, which will enable efficiencies in order taking and processing at over 130 locations. It’s a complex business challenge, given the scale of the organisation, the integration between website and ERP system, and the user experience required. The online experience needs to be simple enough for retail customers who have never painted before and powerful enough for trade customers with high-frequency orders and in-store accounts.

Roles:
Interaction Design
Usability Testing
Agency:
The Village of Useful (TVoU)
Paint detail index
Paint detail colours
Your order
Order pickup times

Project highlights

Interaction Design

Designed over 160 mobile screens and 28 desktop screens, and built a clickable prototype using Sketch + InVision.

Usability Testing

Led the project’s in-person usability testing sessions with 20 participants.

Project Strategy

Worked with the marketing team at Inspirations Paint to understand their business goals and help them achieve their vision.

Objectives

  1. Enable quick and easy online paint ordering for retail and trade customers, each with their own buying behaviours, experience and knowledge with paint products and relationships with the company.
  2. Become the go-to source of paint project advice by providing comprehensive long-form guides, as well as short and clear instructional advice to follow when on the job.

Objective 1

A quick and easy ordering experience

Designing a fast, intuitive purchase flow

TVoU designed some early concept wireframes for buying paint in 2015. While this work helped form the starting point for the project, the client was concerned with how much time was required to configure a paint product.

Using rapid wireframing I explored simpler conceptual models and was able to simplify the interface, reduce cognitive load and slash the time required to configure a paint product for purchase.

TVoU’s 2015 concept:

Old concepts

Iteration 1:

Buy flow iteration 1

Iteration 2:

Buy flow iteration 2

Iteration 3:

Buy flow iteration 3

Iteration 4 (final):

Buy flow iteration 4

Design exploration insights 

Through wireframing different approaches, I was able to identify the slow spots in the design. It became evident that the effort and thinking required in the flow were symptoms of two specific issues: how the proposed original information architecture grouped paint products in a range into a single product, and how the interface forced users to make too many decisions.

By splitting a paint range into individual products with less configuration, the interface is more familiar (more like a typical e‑commerce experience), and represents a better reference for users forming their mental model.

By introducing constraints I was able to reduce the complexity and increase the effectiveness of the interface. In allowing only a single product in a paint range to be configured at a time (e.g. Dulux Wash&Wear Low Sheen), the user’s cognitive effort is reduced as they have less to think about and fewer tasks to complete. 

Preventing errors

While the project was in development, we discovered that a few paint colours couldn’t be tinted into all paint products, sheens and can sizes. The behaviour of the CMS was to show an error message after the user had attempted to apply a colour to an incompatible product or variant.

Rather than communicate errors to the user after they had unknowingly made an incompatible configuration, my approach was to prevent them from making the error in the first place and instead show them alternative purchasing options based on the type of incompatibility.

Colour can’t be tinted into this sheen

Colour sheen error

Colour can’t be tinted into this size

Colour size error

Colour can’t be tinted into this product

Colour product error

Quick Order

Considering how familiar trade painters are with the products they purchase regularly, how can they be accommodated so they don’t need to browse the website for products like a typical customer?

I proposed we incorporate a Quick Order feature on the website to allow rapid order taking for B2B customers. The design is a simple but powerful workflow that cuts ordering time down substantially for advanced users.

Quick order 1
Quick order 5
Quick order 3
Quick order 4

Project Estimator

The Paint Cost Calculator on the old Inspirations Paint website used a simple area calculation (wall length X wall height) to calculate the litres of paint required with an estimated cost.

The new Project Estimator takes into consideration windows and doors in the room and gives separate estimates for the undercoat, topcoat, doors and trim and ceiling paint. Based on the brand chosen, it provides product recommendations, which can be adjusted and added to cart directly from the calculation results.

Calculator 1
Calculator 2
Calculator 3
Calculator 4

Objective 2

Delivering clear, simple advice for painters on the job

What’s Your Next Project?

Inspirations Paint asked us to explore the use of a chatbot-like feature on the website to provide personalised advice to customers based on their input. 

The What’s Your Next Project?’ widget was designed to integrate directly with the website search, allowing users to ask a question or search for advice from the global search feature. From the results panel, users can enter a question/​answer workflow that renders accurate advice tailored to the customer’s project.

Search 2
Search 4
Search 5
Search 6

Usability testing

The information architecture and user journeys were largely validated during testing. There were, however, a number of insights where participants misinterpreted/​misunderstood features of the interface and the learnings from such led to direct changes in the design. A few examples of some uncovered usability issues are outlined below.

Early Product Detail sheen
Early Product Detail sheen usability

Originally the sheen switcher’ on the product page was a stylised link under the title of the product range. The link was missed by a number of participants which led to the use of a standard select element.

Early Product Detail colour
Early Product Detail colour usability

When a colour was selected on a paint product, a red cross was overlaid on the paint chip which acted as a remove button. A number of participants interpreted the red cross as indicating the colour was unavailable. 

Early Product Detail rrp
Early Product Detail rrp usability

Trade customers benefit from special pricing which is privately negotiated with sales reps. Originally we showed the crossed-out RRP as a reference. The consensus among participants in testing was that this was unnecessary and irrelevant.

Early Product Detail orders
Early Product Detail orders usability

We originally designed a global order strip that was both a mini cart and order changer (trade customers can manage multiple unsubmitted orders concurrently), and used two add to cart CTAs on a product page: add to current order’ and add to new order’. This was largely missed or misinterpreted, and so we simplified the approach.

Nutrition tools for UON

Professor Clare Collins and The University of Newcastle engaged us to redevelop their two nutrition survey tools to improve their usability, effectiveness and uptake. I helped plan, design, test and build 2 web apps and 3 websites.

Interaction Design, Technical Strategy, Web Development
View Case Study
10 min read