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.
Designed over 160 mobile screens and 28 desktop screens, and built a clickable prototype using Sketch + InVision.
Led the project’s in-person usability testing sessions with 20 participants.
Worked with the marketing team at Inspirations Paint to understand their business goals and help them achieve their vision.
- 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.
- 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.
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:
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.
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 can’t be tinted into this size
Colour can’t be tinted into this product
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.
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.
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.
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.
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.