The Colour Matching App Case Study

Keep it Brief

Design a mobile phone application that can identify exact colours from photographs, and link users to a paint product that matches.

My Role

  • UX
  • Project Brief
    User Story
    Competitor Analysis
    User Flow
    Persona Creation
  • Testing
  • Split Testing
    User Testing
  • UI
  • Mood Board
    Style Guide
  • Branding
  • Logo

Competitor Analysis

2.6 stars. That’s the average review score (out of 4200+ reviews) for the most popular apps in this niche. What went wrong? Some apps such as ColorSnap went so far as to require a separate device before being functional, while some were costly for little features. many had outdated UI and lacked recent updates, sometimes stretching back 5 years or more.

What Swot?

Strengths - Color Name Ar Pro is head and shoulders above the rest, it has a clean, modern ui and positive reviews.

Weaknesses - Difficult to navigate, paid service.

Oppourtunities - Could offer similar colours as well as identical match, does not reference in hex, could include a way of linking relevant products.

Threats - Dulux Visualiser only offers a matching service for exact colours in their own paint range, if expanded would pose a threat.

Target Acquired

Three main target demographic archetypes were considered after user interviews.

    A DIY painter looking to change up their home

    A professional graphic designer looking for inspiration in their daily life

    A student exploring colour theory

User Stories


The MVP for this project is an application which has a native camera function, that allows taking of photos and selection from photo galleries, and analyses the photo to find a match for average pixels over a set area, to give users the closest guess to a hexadecimal colour, as well as a best match paint product. It will also allow users to save colours for later reference, and share colours outside of the application.

Go With the Flow

Making a Mockery

At this point in the process it was time to create some low fidelity mockups and prototypes to refine the user journey in real time. Playing around with screen layout, visual themes and iconography were essential here. From wireframes to more fleshed out renders, this stage of the design came to a close with defining the moodboard and style guide for the final mockups, with a bit of logo design and branding thrown in the mix.

It's Alive!

The next step was to breathe some life into the concept and quickly produce some deliverables, to start A/B testing and get that all important user feedback. Starting with scribbled wireframes (excuse the handwriting!) To lo fi mockups and polished, functional prototypes, the app went through several different iterations with the help of affinity mapping, split testing, and good old fashioned surveys.

Testing, Testing


90% of users preferred the layout and navigation method of the wireframe on the left. Confident it was statistically significant this navigation method was selected.

55% of respondants chose the central layout as their favourite.

Lo Fi, Hi Speed

With a round of user testing complete and some actionable data it was time to quickly whip up some low fidelity mockups to refine the user flow and iron out any obvious flaws. From intial testing it was suggested that an upload from gallery button should be added to the navigation bar, and so it was introduced at this step.

Feeling Moody

The aim of this mood board is to capture a sleek, crisp aesthetic - to let the colours captured in app speak for themselves.


Making a Splash

With a fairly strong idea of what direction to take the app in aesthetically it was time to create the brand. Eventually a brand name - “Splash”, and a simple two tone logo were created to give the final mockups some substance. Given best practice and accessability considerations, clean, universally recognised icons were used for the majority of the project, however a few were custom created for navigation, to build some branding and flesh out the app.

The font PoetsenOne did most of the work here, along with DC1F36 red

Two sets of navigation bar icons were created, but ultimately users found the set on the right to be more appealing and so these were selected.

Style Guide

Taking Shape

Now it’s time to start pinning down the design and creating some realistic mocks, and play with some prototypes to iron out any last issues. Pixel grids helped keep spacing in check, with best practice guides from Apple and Google keeping the formatting tight.

Introducing Splash

Instant Colour Match

Quickly match colours around you with the native camera and AI identifier.

Upload photos from your camera roll or take a pic in app.

Save it for later

Save your favourite colours with a double tap and view them in your saved colours tab.

Hue-ge news for artists

See it? Get it.

Wondering how you’re going to find a paint that matches the colour you’ve found? We’ve got that sorted, too.

Simply scroll down through the best match paint list. You’re welcome.

Final Screens

Final Thoughts

Being a short project, the user journey for Splash had to be mercilessly refined. However, looking to the future this leaves numerous oppourtunities for a second phase. A search feature should be explored, some in app settings could be added, and a counter next to the colours illustrating how many times that colour had been found in-app could also be added for novelty. It also wouldn’t be difficult to commercialise this product and include advertising within the list of suggested products.