Edit
Enabling a more dynamic EMBL online – EMBL Communications

EMBL Communications

Informing, inspiring, and engaging society with EMBL’s research, services and training

Ken Hawkins

Category: General

Enabling a more dynamic EMBL online

The EMBL Corporate Content Platform + a Visual Framework

For websites and web services across EMBL, a set of foundational improvements is enabling more rapid, flexible and effective user journeys. For many, those changes are most evident in the new EMBL.org, but that’s only a partial showcase of what’s now possible. 

While many have seen some of these new tools, very few know about all of them, what they can facilitate or, perhaps most importantly, why we made them.

For those who don’t know me, I’m Ken Hawkins and Web Front End Lead for EMBL — which means I’ve been involved in a broad range of web activities across the organisation, from corporate content to training to internal services to collaborations.

With that background, I’d like to talk a bit about our four-year journey of why we made these new tools — and what you can now do on EMBL.org and all EMBL websites and services.

Chapter 1: Why

To make nearly any website, you need four basic types of things:

  • Content: what you want to communicate
  • Design: how it should look
  • Function: what users should be able to do 
  • Technology: how you actually get these things online

Back in 2017, a group of us from across EMBL (EMBL-EBI Web Development, EMBL-EBI External Relations, EMBL Communication and EMBL IT) knew a change in technology was coming:

  • EMBL.de used the already out-of-support Fiona CMS version 6. 
  • EBI.ac.uk’s solution of Drupal 7 would soon approach its end-of-life and was also having issues easily supporting EMBL-EBI’s broad needs.

But more importantly, we knew the technical and content tooling wasn’t up to the job of what  EMBL Communications and EMBL-EBI’s External Relations wanted — nor were they up to the job of facilitating the range of activities that EMBL does online.

Importantly, the new technical tooling would also need to allow EMBL-EBI to more closely integrate with technical tooling at EMBL Heidelberg, as well as encourage greater “One EMBL” alignment.

Between content, design and functional abilities, we would not succeed by simply updating to a new website CMS. 

The “we” involved is a broad range of technical, design, user experience and content professionals from across EMBL that had an understanding of corporate and online resource needs from across the organisation. Likewise, these groups also had the remit of ensuring the organisation’s web tooling would be able to provide the needed functionality.

We knew what EMBL was asking for, next we needed to find out to facilitate it.

Chapter 2: What

After a series of collaborations and prototypes, we settled on an answer that split responsibilities across four areas (not teams):

  1. Data: a new “Enterprise Data Resource” that was the single source of truth for all enterprise data … staff, publications, phone numbers, teams and so on.
  2. Hosting: all EMBL and EMBL-EBI “corporate” web hosting would be provided by EMBL-EBI’s specialised web hosting data centres.
  3. Content: a new “contentHub” that would distribute all reusable content (website taxonomy, news articles, publications, jobs, and so on) and would support mapping of item relationships to the Enterprise Data Resource (“This article is about this team”)
  4. Web display: the Visual Framework as client and display patterns for the EMBL look and feel, as well as integrating with contetHub APIs to display relevant content (“Show me 4 news articles about this team”)

With this approach, we are able to separate concerns and allow each part of the organisation to specialise (or override) as required — making it a solution flexible enough for EMBL.org, EBI.ac.uk and the many services and collaborations.

Chapter 3: How

In 2018, these groups started regular meetings to understand the scope of the challenge and how we could best provide a platform that would survive any singular change in technology.

Here’s how that was done from the server up to the screen.

Organisational information

  • Organisational “truth” about staff, publications, groups, jobs and the similar to be provided by Heidelberg IT as an “Enterprise Data Resource” (EDR). This information has no formatted look to it, only structured data that could be consumed by web services.

Web hosting

  • Web hosting to be provided by EMBL-EBI who already had tooling in place to programmatically provision web servers with automatic failover support across two data centres. 
  • A microsite platform of modular and configuration-managed WordPress microsites would be maintained by EMBL-EBI Web Development, this would empower individual group and team leaders with a high amount of freedom to present the content they believe is most important. 
  • Highly flexible static HTML sites generated by Eleventy would also be created by EMBL Communication’s Digital Team and deployed by EMBL-EBI Web Development. This would ensure that any area of the website that required a high degree of flexibility could achieve it (the homepage, search, jobs, events and so on).

Web content 

  • Structured taxonomies about EMBL’s activities (where are EMBL’s sites, what are the research clusters, important themes and so on) would be curated by EMBL Communications.
  • Web tooling is provided by EMBL-EBI Web Development in a malleable content worker tool called the “contentHub” that pulls information from the Enterprise Data Resource and is able to mix it with other web content like news, notifications, team blogs and the structured taxonomies. This tool would consume, arrange and distribute content by a set of publicly available endpoints. That is: “show three research articles about COVID-19” or “show a list of all staff working on epigenetics” 

Web visuals and behaviour

  • The new look and feel would be done by the then EMBL Communications’ Digital Team lead, Mark Boulton in collaboration with EMBL Communications’ Design Team and the wider organisation. 
  • User Experience guidance would be provided by collaborating with EMBL-EBI Web Development’s group of UX professionals.
  • The Visual Framework version 2.0 would be a highly flexible technical tool to provide flexibility to provide a modular delivery of the EMBL look and feel as well as an interface to consume the contentHub, and in turn data from the Enterprise Data Resource.

Chapter 4: Now

Over the following two years, these new systems and tools were built out. A new EMBL.org launched in early 2020, and during the following 18 months, the systems continued to mature. 

While there is still a long list of features to build and bugs to solve, the new tooling provides a broad range of new features:

  • a contentHub that interfaces with the Enterprise Data Resource to provide a singular truth and dynamic content.
  • WordPress microsites that integrate with the Visual Framework and contentHub to both consume and publish content.
  • A WordPress-based “Editor Hub” to easily build rich page layouts that integrate with the Visual Framework and contentHub data.
  • The Visual Framework 2 to rapidly build websites that look like EMBL and function consistently and well for users. You might also see this series of slides and talks about the role and importance of the VF.
  • A taxonomy of the organization online that defines what activities EMBL does and at what URLs they exist, in addition to supplying related information (tip: it’s an ontology)

Chapter 5: Passing the torch

On a personal note, my EMBL contract ends this December. While I’ll no longer be part of driving these projects forward, I’ll still take pride in having been part of the process and watching it continue. 

What’s best about these solutions is what’s between them: flexibility for all EMBL sites, services and collaborations — without having to give up cohesiveness with One EMBL.