Co-op Digital Blog

Since Co-op Digital began, we’ve mostly used 4 colours in our products and services. The majority have white backgrounds, blue Co-op logos, black text (sometimes blue) and our boxes and borders are grey. User interface elements such as buttons and error messages use additional colours but we’ve been quite cautious about using colour more broadly.

We wanted to keep things simple to focus on the design of our products but we’re now beginning to develop our visual language and colour will be a big part of this.

This week we’ve added a colour section to the design manual as well as 22 secondary colours to our palette. Here they are:

Choosing the colours for the secondary palette

The colours we’re trying out have their origins in the illustration and Food colour palettes from the Co-op brand guidelines. The first iteration was 8 dark and 8 light colours but designers didn’t feel those 16 were enough. They also said they looked kind of ‘muddy’ on screen.

We iterated and now we’ve got a range of dark, mid and bright hues. We’ve adapted them by brightening them slightly to make them appear more pure on screen.

Positive feedback on the primary palette

The feedback we’ve had on coop.co.uk and co-operative.coop has been positive. Users think the sites are easy to read, even on tablets and mobile devices. And making sure the colours we use are accessible, ie, that they’re high contrast enough to be clear and legible, is the most important thing.

However, there’s also an argument that the sites could be more exciting and the secondary colour palette gives us the opportunity to expand ways in which Co-op brand spirit is represented. Yes, we were cautious at first and we made sure we got the basics right before doing too much, but we are a commercial brand and we’re allowed to be a bit more interesting with how we use colour.

Giving designers alternatives

Co-op blue is a dominant colour, one that pops out and grabs the brain’s attention. This makes it great for our logo and for overall brand recognition. But, if a dominant colour is used in numerous elements on a page it can be difficult for a user to prioritise information or find what they’re looking for.

In the past, when our 3 brand colours (plus black for text) were the only ones available, some of our businesses have used Co-op blue behind white text. We use the WebAim colour contrast checker to check our colours meet the minimum colour contrast standards and the white text on Co-op blue isn’t as good as it could be accessibility-wise. Adding the secondary colours to our palette gives designers across the organisation alternatives. Co-op sites are now moving away from using the Co-op blue and are using the secondary palette instead.

Developing an approach to using colour

Along with the secondary colour palette, we’ve added a section on our approach to colour to the design manual. We aim to use colour with purpose (and also with restraint) so as not to make things complex for users.

We’re using colour to:

• help structure content, eg, grouping things and helping users read content in a certain order
• indicate what’s important on a page when there are no images
• attract attention (our Twitter cards are a good example of this)
• help highlight where action is needed, often by indicating a user’s progression through a service

Some colours already have meaning attached

There are some colour conventions in digital that users are familiar with. For example, a green button is widely used to indicate a primary call to action as a user progresses through a service. This is something we use but we also need other types like sign in buttons. We’re trying out other colours for these but wherever colour conventions already exist in the digital world, we’ll usually adhere to them. There no point making users’ lives harder.

A chance to be consistent

Co-op is a huge organisation and adding a secondary palette gives us the opportunity to create a consistent brand language on screens that’s appropriate to each context. Using just the blue, white and grey is arguably more memorable but it’s just not flexible enough for the wide variety of digital products, services, applications, forms, communications, dashboards and the rest.

Nothing’s final. We’ll need to adjust, add to or take away colours but a defined colour palette should help tie all of these things together under the Co-op brand.

Gail Mellows
Designer