Colour System Redesign

Project date: June 2022.

Role: Lead Product Designer.

As Product Design lead, I was responsible for researching and coordinating the design process.

Overview

This project was completed for a supply teacher recruitment platform. It aimed to conduct a complete audit of colours used across the platform, in order to develop better semantic connections between colours, and to improve consistency.

Responsibilities

Researched other successful design systems to understand the impact of colour.
Coordinated meetings with developers to discuss their perspectives on the use of colour.
Devised and assessed all core user flows to understand where colour was applied and where colour was needed to guide the user.
Audited web and app platforms, and all marketing materials, to understand where colour was used.
Devised and implemented a new colour system.
Oversaw and guided the development process and conducted fidelity checkpoint meetings.

Stakeholders

CEO
CTO
App Developers

Tools used

FigJam
Figma

Problem Statement

With a fast-growing product, we started to realise the limitations of the existing Design System. Many of the truths were established at a time when the company was focused on delivering a usable, working product. With a new mobile app release and a growing user base, the problems with our colour system were exposed. Colour was not consistently applied across our platform, and often was associated with conflicting meanings. We did not have a clear set of semantic colours that could be used to denote system status. Moreover, the lack of clear guidance was creating uncertainty in the design and development process, which resulted in slower, less efficient workflows for many of our employees. Finally, many of our existing colours had poor contrast and failed the 4.5:1 colour contrast test - a test essential for accessibility to visually impaired users.

Users & Audience

Our primary users were our schools and teachers. Since our platform dealt with often time-sensitive and competitive job roles, it was of primary importance that we had clear visibility of system status at all times. It was important that these users trusted us, and relied on us with their recruitment needs, so we needed to devise a brand that was consistent and trustworthy. We would also need a strong set of colours to use in our marketing materials, with clear definitions of which colours would be used for this, and which would be used for the product only

Our users ranged in age and ability, and so we would need to consider good legibility and visibility as a core quality of our new colour system.

Our secondary users were our internal employees - more specifically, our designer and developers. We believed that streamlining our colour styles would have strong benefits for the workflow of the whole product team; with more clarity, the design process would inevitably speed up. It would also reduce unnecessary back and forth during the handover and implementation process, which would speed up development and ensure features could be shipped faster.

User Empathy

Constraints

Developers

Time

Time cost was an important factor as our developers had a lot of important projects to deliver within the time frame. We could not afford to spend too long iterating on this project before it was released.

Traffic

As a startup, we had a relatively small amount of traffic to our website, and less to our app. This restricted us in terms of user testing, as we would not be able to rely on quantitative data to outline a clear solution in terms of usability. To combat this, we would opt for more qualitative forms of testing.

Being a startup company, we were somewhat constrained by the development resources we had, and had to consider how long the project would take as the time cost was more of a concern to us.

Scope

A core objective of this project was to implement a new set of semantic colours, with variations that could be applied to a range of components, such as buttons, alerts, and labels. These would provide indication of error messages, success messages, and system status. We would need to apply this platform-wide.

Some of these changes would affect our Marketing materials, so it was important to include this in the scope of the project. A brand guide, for example, would need to feature these new rules.

We did not intend to introduce many new colours to our core palette as we were conscious of overloading the user, knowing too many colours could create excessive visual noise. Instead, we would remove any colours that were no longer used, and create more clearcut, succinct rules for the remaining colours, so they could be applied consistently across all areas of the brand's image.

Design Process

Understanding

Assessment of current system. I tested many of our colour pairings for colour contrast and found that many of them failed essential contrast tests. I also researched the best text colours for low sight impairments, astigmatism, and dyslexia, and found that our black-on-white text provided poor legibility. I also assessed our colours for their harmony based on basic colour theory (mixing cool tones with other cool tones, for example).
Project briefing. I conducted meetings with core stakeholders such as the CEO and CTO to outline my reasons for the redesign and to align the project with business goals and understand feasibility constraints. I also wanted to understand their perception of the brand's image and how colour related to it.
Research. I researched other successful design systems to understand: how colour fulfilled their product needs, how colour was used to add affordance to actions, how colours were used for marketing and internal site functions, and how this information could be applied to our own project.
Alignment with developers. As our colour system had historically only been maintained in our code, I felt it was best that our developers give insights. I wanted to understand the issues they encountered during implementation, such as questions that were not answered.

Notes on Shopify's Colour System

Ideating and Defining

From the research into other colour systems, I was confident that we could ideate an effective set of semantic colours that would provide a good solution for our users and for our business. The most effective colour systems followed a specific pattern, where they included colours for the following states:

Positive, for success
Negative, for error / critical actions
Alert, for important actions demanding the users attention

These states were commonly red, amber, and green; research revealed that users had built psychological associations between these colours and their states. So, this seemed like a practical solution.

We would also want to establish a couple of other colours, for use when the state didn't fit into either of these categories:

Highlight, for items that required attention but were not necessarily actionable for the user
A dull colour, for items that could be ignored.

I also ideated a series of text black tones, which were generated based on popular text colours used by our competitors.

Testing

We chose to test the colours internally, between employees, to understand if we were successful in building the semantic associations. I was primarily interested in creating colour combinations that would meet colour contrast requirements, and that would have good visibility against our surface and on-surface colours. I conducted a series of these tests with each of the colours to ensure good accessibility.

Our text black colour was tested team-wide, with each employee noting whether they found it easier or harder to read.

Deciding and Developing

The final decision was informed by which colours proved to have the best visibility in our internal testing as well as the colour contrast tests that were conducted. We settled on 5 semantic colours: highlight, dull, positive, negative, and alert, which each had 3 shades which could be used for fill, text, and border styles. This also gave us freedom when creating new components as we had a range of shades to work with, and could select whichever had the best visibility within its environment. Alongside this we had also removed the old set of semantic colours that were now obsolete, and had created stricter rules about the use of colours from our core palette.

These changes were all made in the Design System file, which was housed in Figma. Once this was complete, I conducted a handover meeting where all styles were clarified one final time. The project was then handed over to our development team who made the changes in code.

Changes to Colour

Changes to Semantic Colour

Changes to Text Colour

Project Outcomes

A more organised and succinctly worded Design System

A precise, purposeful colour system that aligns business and user needs

A more consistent, reliable brand image

Better text and status visibility for our users, creating an accessible platform

Reduced workload for designers and developers post-handover

Both the designer and developers spent less time clarifying styles after the design handover. This created a more efficient workflow for all parties.

Reflections & Next Steps

To continuously audit and update components and styles featured in the Design System; a key focus of ours was to look at button styles, and ensure these were applied consistently and met the needs of the user / business.
To create a brand style guide that could be used across different teams
To establish a set of values that would become the core of future design decisions.