Inspirations Paint
At the end of 2019, Inspirations Paint launched their new click and collect ecommerce website, enabling efficiencies in order taking and processing at over 130 locations. The online experience needed to be simple enough for retail customers who have never painted and robust enough for trade customers with high-frequency orders and in-store accounts.
Usability Testing
Project highlights
Interaction Design
Designed 160+ mobile screens, 28 desktop screens and clickable prototypes.
Usability Testing
Led the project’s in-person usability testing sessions with 20+ customers.
Objectives
- Enable quick and easy online paint ordering for retail and trade customers, each with their own buying behaviours, knowledge and experience with paint products and relationships with the company.
- 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 early concept wireframes for buying paint online in 2015. This work helped form the starting point for the project, but the client was concerned with the time and complexity of configuring an order.
Using rapid wireframing I explored alternative designs 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:
Iteration 1:
Iteration 2:
Iteration 3:
Iteration 4 (final):
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.
Errors prevention
While the project was in development, we discovered edge cases where certain paint colours couldn’t be tinted into certain paint products, sheens and can sizes. The default behaviour of the CMS offered a poor user experience, showing an error message to the user after attempting to configure the product.
I explored approaches that would prevent users from making the error in the first place and instead keep them moving through the purchasing journey by offering alternative purchasing options based on the type of incompatibility encountered.
Colour can’t be tinted into this sheen
Colour can’t be tinted into this size
Colour can’t be tinted into this product
Quick Order
I proposed we incorporate a Quick Order feature on the website to allow rapid order taking for B2B customers, who are much more familiar with the paint ranges and spend far less time browsing. The design is a simple yet powerful workflow that cuts ordering time down substantially for advanced users.
Project Estimator
The new Project Estimator is an advanced paint cost calculator which takes into consideration windows and doors in the room and provides 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.
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.
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.
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.
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.
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.
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.
Health — University of Newcastle
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.