Introducing our secondary colour palette

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:

Grid of secondary colour palette showing blocks of colours and the hex numbers.

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

3 thoughts on “Introducing our secondary colour palette

  1. Ryan Stringer January 23, 2018 / 9:03 am

    I feel this is great step forward for the Co-op brand. The problem I have noticed with using just the Co-op Blue, white and grey, it makes everything looking the same digital and print. I think the secondary palette will bring more character and drama to our digital products and our community will appreciate this. My only concern would that different business areas adopting a certain colour to identify with… like the old brand. Although I’m sure digital and brand would squish this attempt.

    Like

  2. Dave January 23, 2018 / 4:26 pm

    I am wondering when we we will hear more about what’s happening with data. I came into Federation House last year where we talked about Co-op and Data, and I believe we have a large data science team now who are doing a lot with data. Can we hear more about this please in the next update and the progress you have made?

    Like

  3. Tommy Millar January 26, 2018 / 10:33 pm

    Can I ask if you have taken colour blindness issues into account?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s