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.
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.
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.
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.
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.
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.
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:
- Twitter Bootstrap
- Sass (Compass)
- Bootstrap Sass
- 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.
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.
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.
Marie Curie was awarded bronze in the best digital rebrand category at the Digital Impact Awards 2015.