Case study
A new visual language for Marie Curie

Early in 2014 Marie Curie began a project to relaunch their website; this project was one of a number of activities supporting a strategic repositioning of the entire organisation. The repositioning work also included a refresh of the organisation's brand identity. Both projects were planned to launch simultaneously at the end of the year.

The website was being rebuilt from the ground up by an internal team. The organisation’s brand identity was undergoing a complete refresh by an external agency Arthur; a new logo, tone of voice, photographic style and other assets were all in the early stages of development. I worked across both projects; advising Arthur on the digital aspects of the developing brand identity, while also working in the scrum team responsible for building the new website; leading the interface design and brand implementation.

Marie Curie old logo and new logo unknown
The new brand identity was in development

The problem

Although both workstreams were independent projects running on their own timelines, there were a number of key milestones in the rebrand work that would impact the website build. These included finalisation of brand assets; fonts, colours, photographic guidelines etc. and for rewriting the website content – the new tone of voice.

I knew the earlier I could bring the new brand assets into the website build, the better. Firstly, it would give me more time to work with the assets and develop the visual language for the website. And the sooner I could apply the new visual language to a modular interface design system, the less likely the scrum team would need to go back and do additional work on features to keep them up to date with the evolving brand identity.

A chart showing where the workstream timelines intersect
Illustrating how I could better use the time to develop the new visual language

The idea

I’d been inspired by Jon Aizlewood’s article on Pattern Portfolios as a key deliverable in the digital design process. I’d also been reading Anna Debenham’s guide to creating front-end style guides. I proposed creating an online platform that both teams could access. Here I could experiment with brand assets as they became available and get feedback, as well as documenting the user interface patterns and prototypes I was starting to create for the new website.

Cover of front-end style guides by Anna Debenham
Inside page of front-end style guides by Anna Debenham
Inside page of front-end style guides by Anna Debenham
Front-end style guides by Anna Debenham

The process

I started to prototype basic patterns and page layouts, informed by user research completed ahead of the website build. Besides not having any brand assets to work with in the beginning, I had very little data about what devices and screen resolutions were being used on the existing (non-responsive) website. This made it hard to judge how best to approach the design of the global layout.

I chose to use Twitter Bootstrap to help me get a basic modular design system set up quickly. Bootstrap’s mobile first framework, with four configurable viewport options, came with a set of established UI components I could use to create responsive prototypes to cover the majority of user scenarios. Initially as the number of prototypes increased I began to document commonly recurring patterns in an online pattern library. Having a publicly accessible library made it easy to share work with stakeholders both internal and external.

Examples of new brand identity assets including logo fonts and colours
New brand identity assets

As the new brand assets and guidelines became available I created element collages to discuss design exploration with stakeholders. Using the feedback from the element collages I was able to incrementally update the styles in the pattern library and deploy across the entire website. The pattern library enabled the website team to see at a glance how the updated patterns impacted features we had already built, making it easier to identify bugs and avoid repetition of work.

Marie Curie visual language developement style tile 1
Marie Curie visual language developement style tile 2
Marie Curie visual language developement style tile 3
Marie Curie visual language developement style tile 4
Element collages used to get feedback on design exploration

Developing the visual language

Working with the brand assets from the earliest possible point in the process meant I was able to feedback on aspects of the new brand identity I thought might be problematic online. For example, none of the original primary colour palette met W3C’s minimum contrast guidelines for text on screen.

Another challenge was adapting the hand rendered graphic elements, like the wobbly frame and keyline, to the fluid layout of a responsive website, while ensuring they rendered consistently across screens of varying size and quality and keeping them relatively simple to maintain.

Accessibile text contrast demo
Hand rendered graphic assets
Development of brand assets

As the library of patterns grew, it became the go to resource, not just for the website team, but external suppliers too — it became known as the Brand Lab.

Tech and tools

The Brand Lab was built using Jekyll and is hosted on Github Pages. Using Git to manage version control made it easy for both internal team members and external developers to access the code. The Sass developed in the Brand Lab is often taken and used directly in production.

The Brand Lab uses the following libraries and tools:

  • Jekyll
  • Twitter Bootstrap
  • FontAwesome
  • Typekit
  • Sass (Compass)
  • Bootstrap Sass
  • Modernizr
  • jQuery
  • jQuery UI

In the beginning the Brand Lab relied heavily on Bootstrap for the majority of it’s patterns and components. As the brand identity evolved I was able to extend Boostrap’s existing patterns and create new custom patterns where appropriate. Although it still uses Bootstrap as the foundation for some of it’s core components, the Brand Lab is now a mature front-end development framework in it’s own right.

Outcomes

As the Brand Lab evolved over the course of the website build it became an integral tool in the team’s Agile development process. This continued into the post launch phase, with the Brand Lab providing an up to date reference tool and experimentation area for the ongoing delivery of new website features and improvements.

A flowchart showing the new fluid design process
Using a pattern library allowed more fluidity in the design process

For simple features designers and developers are able to take patterns from the library and put them together on the fly; this speeds the design and development process. For more complex features the library makes it possible for designers to quickly create high fidelity responsive prototypes; this helps to inform the technical brief.

Awards

Marie Curie was awarded bronze in the best digital rebrand category at the Digital Impact Awards 2015.