Overview
One of my favourite projects I have contributed to at Macmillan has been to lead the project of applying a new Macmillan brand to the whole design system. The primary Macmillan colour remained the same, but new secondary colours and a new font were provided by the brand team and my role was to decide how to use these new colours and fonts on our website, while keeping in mind the brand goal of presenting ourselves as ‘compassionate warriors’.
Once I had decided how to apply the new brand to our websites, I supported our internal development team with the planning and implementation of the new brand across our main website and also liaised with third parties to get 40+ external websites updated while ensuring our digital estate was consistent and the brand was recognisable across the board.
The goal
Translating new brand secondary colours and font into a cohesive digital brand presence.
The challenge
When figuring out how to apply the new Macmillan brand to the website, the adherence to AA WCAG accessibility standards was one of the biggest limitations we had when it came to applying the colours and figuring out what colour combinations and text sizes had a high enough contrast to be readable. In order to test this, I created a chart to check the accessible colour combinations available to me.
During this project, I created tests to help make decisions on the visual appearance of components such as buttons and also full page designs to test the overall effect of the application of the colours and fonts. I used this project as a chance to update elements of the site that required updating, such as inaccessible link colours and button hover states that were not user friendly.
One of the concerns I had was around the swapping of the title font, however I stress tested it in multiple scenarios and the length and height of the text remained almost exactly the same without needing to adjust the font size or padding.
The solution
Colours
To explore suitable colour combinations, I set up a colour contrast checker as a starting point to see which colour combinations I would be able to work with. Once I had a clearer idea on the colour combinations I could use, I worked on defining roles for each of the colours.
Primary colour
Hero green
This colour is the only one carried over from the previous palette. It is the colour that Macmillan is recognised by and therefore the most important colour for enforcing the brand throughout a Macmillan digital experience. This is used for the navigation background, the majority of headings, card titles. It is the colour that should be the most frequently used across all pages.
Secondary colours
Zingy green
The colour that everyone wants to use for everything, but must only be used sparingly as an accent or background colour and never as text. It is used to make the primary button stand out on any page and to highlight a selected tab.
Pale green
My first thought for this colour was to use it as a background colour for page sections, but when I tested it, it was too overpowering to be used frequently in large spaces (and also reminded me of a paper prescription). It is used as a background for smaller areas, such as the donation bar above the footer and tags.
Mid green
Not quite as bright as zingy green, but still to be used sparingly as a highlight colour. It is used for event status tags, which need to be seen clearly but have less prominence than a primary button and also as a hover background for body copy links to add a flash of colour.
Deep green
This one was tricky, as it is very similar to hero green. The only role for this colour is as a body copy link, to stand out in a paragraph of black text, as hero green does not have a high enough contrast against the light grey page background to be used as a body copy text colour.
Typography
For typography styles, I started off with a selection of templates - a homepage, a landing page and a cancer information page, and tested out different colour combinations and weights of the brand font, Cera Pro Macmillan, until I got to the right balance of styles that worked in each template and maintained the desired information hierarchy. H1 and H2 on both desktop and mobile use the black weight, to emphasise the ‘compassionate warrior’ brand. The font sizes below this looked too heavy in the black weight, so all other headers use bold.
In the print brand guidelines, the Cera Pro Macmillan font is used for all text. I pushed back on this and we were able to keep Helvetica as the body copy across our digital estate, in order to ensure readability of large pieces of text and to be able to maintain a better hierarchy on each page.
After the colour and typography styles were confirmed I methodically worked through each component and updated any typography or colours, while sense checking how they looked within a whole page design.
I took the opportunity during the brand refresh to make some accessibility improvements, such as increasing the contrast on body copy links and adding an underline so that they were easier to notice within a paragraph of text.
Results
Overall, the feedback from testing the designs resulted in greater brand recognition and the application of the new brand solved accessibility and usability issues that were present on the website. As with any project, with more time I would have loved to have come up with more creative solutions and extended further than colours and fonts but the scope of the project meant that 60+ page templates needed to be rebranded in a 3 month period, so there was already a very tight deadline and only direct replacement of old brand colours and fonts were in scope.
