Mark Boulton

European Molecular Biology Laboratory

Leading digital communications at the world's premier life sciences laboratory.

The European Molecular Biology Laboratory (EMBL) is one of the world's leading life sciences organisations. Located at six sites across Europe, EMBL is home to several thousand researchers working in fields such as Genomics and Bioinformatics. I led Digital Communications at EMBL for a couple of years with the remit of building a new design system, publishing platform, and delivery network across the organisation.

Role

  • Design Director

Services

  • Design Leadership
  • Strategy
  • Design system and tooling
  • Information architecture
  • Web design
  • Product management

Digital Strategy

The strategy on which we operated was centred on supporting the EMBL communications strategy, which focussed on three core goals: Raise EMBL's profile, Build Cohesion, Enable Engagement.

Raise EMBL's profile

"We are working to build recognition of and support for EMBL. We want people to know our name; to understand, at a basic level, what we do; and to support and interact with EMBL."

The digital products we made, and the channels we supported, were the ways in which EMBL's varied users have a relationship with the EMBL brand.

Delivery goals

  • EMBL.org: Build a new web destination for EMBL that delivers to user need and supports the EMBL Communications Strategy.
  • Media Engagement: Support the needs of our Media Engagement team by providing digital tools, services and platforms.

Build cohesion

"EMBL is engaged in a wide variety of activities and missions across six different sites, and we collaborate across a diversity of research communities. Each EMBL site has its own specialisms, character, context and aims and contributes to EMBL's vision in enabling scientists worldwide to discover the secrets of life. We are working to foster a sense of shared endeavour and purpose across our activities, as well as developing a sense of pride within the organisation."

We delivered to this by ensuring consistent, appropriate user experiences built with the EMBL brand. Users of digital products, services, and content interact with many EMBL touchpoints. Our aim was to focus on these through a holistic, systematic approach to our work.

Delivery goals

  • Branding: Work with Design and Strategy to reflect the EMBL brand in all digital channels.
  • Design system: To expand the scope of the EBI visual framework to encompass all of EMBL.

Enabling engagement

"We support the EMBL community in engaging with stakeholders through developing tools, channels, content and resources. Whether you are recruiting at a career fair, presenting EMBL at a scientific conference or giving an interview to a radio station, we can support you in a variety of ways."

A systematic approach to building cohesion was expressed through the production and distribution of templates, tools and systems. We supported conversations between EMBL and its various stakeholders by providing a self-service platform of communications tools.

Delivery goals

  • Empowering internal teams: Provide self-service templates, tools, systems, processes.
  • Supporting conversations: be a platform rather than a content repository

How did we do this?

By building a cross-organisation, multi-disciplinary digital-native team, we delivered the strategy in the following way:

  • Iteratively, collaboratively, and openly. We did not work waterfall, but continuously delivered the highest priority digital products, services and channels.
  • User insight. Our decisions will be guided and informed by user insight and data, with internal and external users.
  • Measurable & accountable. We will define metrics upon which to measure our success and report on them regularly.

Dialing up and down the EMBL brand

With such a diverse portfolio of products and services, users and stakeholders, it was important that any design system we developed was not a one-size-fits-all solution; it needed to adapt to its environment. We started by understanding and modelling the landscape. This comes from two places: research and content. By thoroughly auditing all content and servcies across EMBL, it gave us a clear of idea of the map. By speaking with users, we could understand the pain points, or even those places where users had gone through the pain and – whilst we might see a personal need to redesign a service – it was not in user's best interests at all.

Modelling these outputs, we created a brand canvas – a tool we developed to help us make decisions. A quadrant diagram showing the audience types and their proximity to EMBL, against the level of brand 'volume'. In the initial scrappy sketches above, you can see where we've pressure tested these as a tool by mapping not just single entities such as brands, or services, but user journeys. We could see that as a user starts a relationship with EMBL, it changes over the course of a single user journey, but also over time – sometimes years.

This work, whilst time-consuming and ardious, gave us a solid brief with which to design the system. We were not about to embark on a system of this scale and ambition without our guiding principles. One of which was now:

The system has to adapt to the user, product, or service. The EMBL brand volume – be it tone of voice, design, illustration, layout, sound, or all of those – has to be able to be dialed up or down accordingly.

Design concepts showing the dialing up of the brand volume through different component variants. Top is low volume, bottom is high volume.

Design System

A key component of our tactical response to the strategy was to expand the scope of the existing design system used at the European Bioinformatics Institute (EBI), part of EMBL, to encompas the whole organisation. One of the guiding strategic principles was we were one EMBL, and the design system would provide a way to unite the user experience across EMBL's many devolved and siloed products, services, and user touchpoints.

EMBL's user needs are broad. There are life science researchers and teams – internally and externally – using web-based tools, or complex visualisations. There was website for each research group or team. Event websites for the conferences and training events EMBL hosts. There were many applications used by the organisation. There are social clubs, restaurant menus, or meeting room booking systems. As a research scientist, you can book time on a microscope, or order a special kind of mouse. There are many, many touchpoints. The design system we built had to accommodate lots of design patterns, and support lots of user behaviours, but one key aspect was it had to be flexible to adapt to products and their audiences.

We developed a comprehensive pattern library and toolkit derived from the existing embryonic system, auditing user needs, and establishing new patterns.

New design system

  • New design system delivers to many needs across three major 'brands': EMBL, EMBL-EBI, and 'Vanilla' for use with many third party consumers of the system.
  • Developed holistically, and in tandem, with offline brand and marketing applications. All medias and channels informed each other.
  • System incorporates a dialing up or down of the EMBL brand through use of component variants, design tokens, tooling and templates.
Components were abstracted from the holistic designs into Sketch libraries controlled and updated through Abstract

Working closely with colleagues in Design – who were responsible for the branding design system, and produced all of EMBL's offline collateral – we co-developed the new branding system. Starting with design principles, and working our way out to the foundational elements such as typography, colour, iconography, and usage of photography and illustration. Developing the system in this collaborative way ensured a mutual understanding of the elements and how they can be adapted from one application to another. This 'dialing up, or dialing down' of the brand was a critical concept to realise in a codified way in the design system.

The team created a large set of components with variants

Publishing platform

The old EMBL websites were run from a proprietary content management system which was due to be decommissioned. In my experience, almost all commercial, large scale redesigns end up being a CMS platform upgrade as well. Either that, or another piece of software is added to an ever-complex stack of technical debt. In EMBL's case, it was decided to build upon existing architecture present in other parts of the organisation and use the following:

  • Headless Drupal installations for the managing of content, data, and relationships.
  • Organisational data, such as Jobs and People, would come from enterprise data sources and largely from other enterprise systems such as SAP.
  • We'd use Wordpress for our microsite solution because of its superior editor experience and large, open source community.
  • A static site generator was used for small one-off page builds, or for those instances where content would not change much. For this, we chose Eleventy because it's based on Node, fast and lightweight, and very scalable.

Core to our design system principles, we then ensured the design system was in the hands of our users – and not just developers, either. For editors, and site builders, we wanted to ensure they had the best tools available to build on-brand digital products.

The design system components were built using React and available to Wordpress users within the Gutenberg editor experience. This included live previews of data fed from our content API's to retain the what-you-see-is-really-what-you're-getting experience within Gutenberg.

Outcomes

  • Delivered automated deploying of Wordpress sites for building flexible, on-brand microsites with integrated enterprise data integration – such as people, and jobs.
  • Delivered React-based component library usable through Wordpress' Gutenberg interface.
  • Delivered an Eleventy-flavoured starter kit for static site building incorporating the design system.

Elsewhere