The Visual Framework 2.0: Web developer outreach at EMBL-EBI Day 2019

In the Digital Team we continue to make progress towards a beta release of the Visual Framework 2.0 for more flexible and scalable tools for life science websites.

While we’re developing a tool for those building new websites, those features are also designed in mind with an easy upgrade and backwards-compatible approach for the many users of the EMBL-EBI Visual Framework 1.x. Continue reading “The Visual Framework 2.0: Web developer outreach at EMBL-EBI Day 2019”

On Book Making

Hi, I’m Sarah, a design trainee from Australia who has been on the EMBL design team for 7 months now. For the past few months i’ve been working on the EMBL Teenager activity book. This book is just one example of the variety of projects the design team takes on.

Creating something from scratch, especially when you barely remember anything about the topic for the book, requires quite a bit of research. The first step I had to do to ensure everything would make sense and not turn science into full-blown science-fiction, included a trip into the world of “Molecular Biology for Dummies”. Making notes and watching explainer videos one after the other on repeat (I’m still not convinced I fully understand translation), I was eventually able to figure out a way to merge this factual information with story telling. The world of DNA is complex and choosing what to omit and put in was a process in itself.

After the DNA research phase, I proceeded to explore the visual side of things and compile a mood board for the direction I aimed to go in. Focusing on specific imagery and a minimal colour palette, I wanted to capture the target demographics (teens ages 1-16) attention. Style plays a big role in this, I wanted to create something that was cute and edgy at the same time, something not too complex to draw within time constraints and also not too naïve looking.

I usually create some very quick thumbnail sketches of the layouts to see the flow of the story.

Then I make the first draft of the pages in pencil with very rough sketches of the panels, speech bubbles and characters.

The second draft involves more refined pencil drawings that are ready to go over in pen/ink.

Usually when you go straight from scanner to screen the image will not be as dark or crisp as you would like. Touch ups in Photoshop, playing around with contrast levels and transparencies ensures a cleaner image.

Meshing activities within the story whilst trying to remain relevant became quite a challenge. Especially as I didn’t want the story to become one big long explanation of every single process from DNA > Protein. When I realised that there needed to be more information involved I decided it would be best to keep these as infographic based activities.

Something that separates comics from other mediums is the inclusion of text and image together. This relationship between the two, much like graphic design, opens up a whole new world of how a story can be told. In linguistics it has been shown that readers read comics in a way that is different to that of reading a text based novel. Comics have remained popular among adolescences due to this distinction, especially for those that dislike reading. The order and direction that panels are read are dependant on different factors including layout, size and shape. In creating these layouts I wanted to combine traditional methods of visual storytelling with more experimental ones. I felt that having square panels on every single page can become a tad stagnant.

Visual story telling can be an incredibly helpful learning tool across all disciplines whether that be science, art, literature or whatever really. It evades the verbose and allows for experimentation. I hope to continue creating more stories and narrative driven design in the future!

 

 

 

 

Science and Design

 

Roberto Aarnio/EMBL

Hello! I’m Roberto, a graphic design intern from Finland who is about to complete his six-month internship at EMBL Heidelberg. I started at EMBL in August 2018.

As a graphic design intern at EMBL, I worked in the Strategy and Communications department. I have had the pleasure to work with a very talented and diverse team of individuals who come from all corners of the world.

My work focused on producing designs in a wide range of media for internal communications at EMBL. This included conference materials, stickers and many other things. I have also had the pleasure to work on a couple of more unusual projects like a drawing book for kindergarten-aged children or filming an interview with an artist, Tai Shan Schierenberg.

During my six months at EMBL, I have found it interesting to be able to see and be part of the way science and design can be integrated together. Science is certainly a field which has not yet been fully transformed by design, in my opinion – unlike other fields, like the tech industry for example. As I see it, science seems to be an area that is even more demanding, with its uniqueness and the broad range of topics covered.

A designer’s challenge when combining science and design lies in being able to make designs that are both stylish and understandable. Another challenge that a designer faces is dealing with the sometimes very complicated and specific information involved, and deciding what is relevant for visual storytelling and what is not. And a key consideration for designers: what can we actually discard, so that we do not lose vital information in the bigger picture. If the way we present science is to be truly contemporary, I think science needs to take each leap forward together with design.

Update on our typeface choice: IBM Plex

Earlier last year I documented how we approached selecting a new typeface for EMBL. We’ve come pretty far with testing and would like to thank our digital team as well as the web development team at EMBL-EBI for their feedback.

During the intense testing phase, we realised that Fira had some limits in terms of its sustainable digital applications and font expansions. At the same time IBM Plex had its ‘big bang’, holding all the promise the company had communicated.

IBM Plex was designed by Mike Abbink at IBM in collaboration with Bold Monday. It conveys the story well from a tech-driven, machine look-and-feel to a humanistic touch and user-friendly application.

Following our design principles (user-centric, simple, sustainable) we started testing IBM Plex Sans and IBM Plex Mono. In sum, this typeface meets all our needs:

  • Open source, no licence complications
  • Good legibility
  • Screen optimised
  • Available on Google Docs
  • Large range of handsets
  • Many widths, all have italic styles
  • Monospaced variant
  • Wide variety of glyphs

With the strong belief that the main goal of our corporate design is to make our templates functional, easy to use, quick to understand and at the same time serving the EMBL brand, the decision was quickly made. All our current prototypes have IBM Plex implemented, alongside the new colour scheme and graphical elements.

As IBM Plex is not yet incorporated in Microsoft Office Suite, we’re now testing a fall-back font for PowerPoint presentations, Excel sheets and Word documents. You can be sure we’ll keep you posted!

Introducing the Digital Projects Dashboard

This is not the Digital Projects Dashboard. This is just a dashboard (Image: Pixnio)

After a relaxing end-of-year break, the digital team is back in Heidelberg and raring to get started on our many projects. This week we built a dashboard to help us to keep track of the scope, status and dependencies of our nearly two-dozen projects.

All of the things

Mark kicked off the year with an “All of the things” meeting in which we tried to call to mind, write down and categorize all of the various projects – no matter how small – that we have been working on.

Our list, on post-its on the office wall, ranged from straightforward items such as “newsletter redesign” or “write documentation” to massive, multi-year projects such as the “Enterprise Data Repository” or “fix the intranet”. We categorized the projects by status, too: Alpha, Beta, or Live (more about these categories here) – and added each project’s dependencies. And then, because we’re the digital team, we built a digital version of it.

The dashboard

Check it out here. Our projects are listed by the stages they are at (Not started, Consultation, In progress, On hold, Delivered, To be Retired), and tagged by status (Alpha, Beta, Live). We also listed Dependencies – projects that fall under the remit of other teams such as Heidelberg IT, or that need EMBL-wide buy-in, such as retiring the Fiona CMS which runs our public sites and intranet.

(Screenshot of the new Digital Projects Dashboard – a work in progress)

You’ll notice the dashboard is clad in a handsome design provided through the EMBL Visual framework. It even boasts a (non-working, prototype) EMBL toolbar!

We’d like to encourage anyone interested in our work to peruse the dashboard, and keep checking in for changes and progress. There will be plenty of changes to track: to make new digital tools and sites we have to work fast, build and break prototypes, and iterate quickly. Hopefully this dashboard will help make some sense of this process, which can admittedly feel a little messy sometimes. We’re happy to show off our new dashboard and how to make one; Tabea from Stratcomm’s Digital team has already expressed interest in something similar for her workflows. Watch this space!

Dependencies

Finally, a note on dependencies. Digital projects are complex, and have many moving parts. Apart from the design and content, there is a codebase as well as underlying back-end technologies to think about, including diverse Content Management Systems and databases interacting through APIs.

There have been many points in our projects where we realise that to fix one thing, we first have to fix another underlying issue, which itself may have dependencies and underlying fixes needed. But instead of embarking on an Inception-like quest for the underlying fix, we have to start somewhere.

So we’ve started building tools and services on existing technologies, and for some, we may need to swap the less efficient parts later. It’s the price of working quickly – but worth the benefits of rapid iteration and prototyping, as we dash towards better websites.

To affinity, and beyond!

Here’s a pretentious piece of jargon for you: “Affinity sorting.” It means “Writing stuff on post-it notes, sticking them on the wall and then grouping similar ones together.” And it’s a hugely useful exercise for prioritising content on websites.

Last week, Mark and I ran affinity sorting exercises with teams from Human Resources and Courses and Conferences to try to understand their needs for the new embl.org. Embl.org needs to serve all departments and groups at EMBL. The aim is to empower teams to look after their own sections of the website and to keep their content fresh and updated. And it’s a chance not only to improve content, but also the systems and processes behind the website. So we’re meeting people early in the project, and trying hard to understand their priorities.

But first, a tangent about shipping containers.

Stacking containers

The digital team is working on a Visual Framework for EMBL. This is a codebase that allows websites to present different types of content using a set of re-usable patterns, for a consistent look and feel across EMBL properties.

Imagine you are scrolling down on a website on the small screen of a mobile phone. There is no sidebar – the most important information must be presented at the top, the least important at the bottom of the list. It’s like a set of shipping containers stacked on top of each other: Each container could have a host of different things within it, but the modular design allows them to be easily ordered and re-arranged depending on priority. A simple, focussed way of understanding what the most important parts are. Read more about the container model of information architecture on this 2014 blog post from digital agency iA.

Affinity sorting with HR

We met with members of EMBL’s Human Resources department (Elke Jagomast, Jean-Paul Chidiac, Veronika Peclova, and intern Vera) to think about how to build a new “jobs” landing page for EMBL. We ran the following affinity sorting exercise:

Hello HR people!

Please write down the top three things that you think the user will need to do on the EMBL jobs page. One thing per post-it.

Suggestions included “Current vacancies”, “EMBL FAQs”, and “Save a job”. The 12 or so post-its go up on the wall, and are grouped by similarity.

We then repeated the task, with a new question:

What do you as the HR department for EMBL want the user to see on the page?

Suggestions now included “Terms and conditions”, “Life at EMBL”, “Exciting jobs that will make them want to apply”.

The final step is to take all those post-its and sort them into a single vertical line, with the most important at the top, least important at the bottom. This forces the HR team to seek a balance between what the user might want (a list of jobs) and what they might want to talk about (How great it is to work at EMBL). Here’s what they came up with, in descending order of importance:

Post it notes on glass
Results of the affinity-sorting exercise with the Human Resources team (Image: Cian O’Luanaigh)
  • Current vacancies
  • Search filter
  • Attractiveness of working at EMBL
  • Salary and benefits
  • Information about the recruitment procedure – how long does it take, how to apply etc
  • Apply button
  • Save the job for later

Alongside this, it was important for HR to distinguish between passive users – those who looked at a job listing but did not apply, for whatever reason, but may be interested in EMBL jobs in future – and active users, who applied for a job. They also stressed the importance of transparency – that the information should be honest and not over-state anything.

To our delight the HR team had a similar idea of the important parts of the process to us. And though these containers and their order may change as we iterate on the design of the page, we agreed that HR will now embark on a content audit of their pages, to decide on what needs to be kept, what needs to be deleted and what can be updated for the new “jobs” landing pages.

Affinity sorting with CCO

Geoff Barnett and Julie Heineke of the Courses and Conferences office joined us for a chat about the new CCO pages.

Their department has different challenges to the HR department, and we spent some time trying to work out how best to allow their conference registration system to directly display information on a website, without a duplication of effort on the part of the conference organisers.

Wouldn’t it be nice to just post a conference programme once, and have it display in all the relevant places around embl.org? It’s an ongoing discussion at this stage, and we are looking for technical solutions.

The conversation also flagged the danger of multiplying systems during a content migration. We don’t want conference organisers to have to update their current system, build a website in Fiona, and also have to do the same in Drupal, while under time pressure to register people and organise an event.

As for the content of a new site, we ran an affinity sorting exercise as described above, and Geoff and Julie came up with the following tasks, in decreasing order of importance, that users should be able to on their new site:

Post-it notes on glass
Results of the affinity-sorting exercise with members of the EMBL Courses and Conferences team (Image: Cian O’Luanaigh)
  • Find an event relevant to them
  • Register for the event
  • Find FAQs about their event
  • Sign up to newsletter
  • Read blog posts or articles with information about courses and conferences
  • See similar events to the one they have registered for (cross-promotion of other conferences)

Each item represents a container in our visual framework, and though most are list or text-based, we could imagine more work on making a beautiful “Sign up to the newsletter” container, for example, which could be re-used across EMBL websites.

We’ll be working on designs and technical infrastructure for a new embl.org/courses-conferences early next year. In the meantime, now you know why a website is like a stack of shipping containers.

Landing pages: Sprinting towards embl.org

Recently we did a two-week sprint with Jon, Peter, Maged and Liang of the EBI web team. They helped us set up the technical infrastructure to prepare the first landing pages for the new embl.org.

What are the landing pages again?

Landing pages are the beginnings of the new EMBL website, embl.org. They will serve as a single place for users to find a mix of aggregated and editorially curated content on a particular topic.

For example, the top search terms on Google analytics for EMBL over the past year include the words “jobs”, “press”, “pepcore” and “cancer”. Some of these have pages on the current website, others do not. The aim of the landing pages is to provide: a place for these searches to land, a better experience for the user searching for a particular topic, and a starting point for a deeper journey through embl.org.

Aggregated content will be pulled into the page with the help of the Enterprise Data system that the Heidelberg IT team is working on. Enterprise Data means data relating to people (name, job title, photo, email address, phone number, etc), Jobs (title, location, application deadline etc) and Publications (list of scientific publications from the Converis system, related to a named person). Such information is stored in various systems around EMBL, but currently the ability to share and re-use this data in different places is limited technically. (Don’t worry – we have a comprehensive privacy policy to ensure that no private data is shared without consent.)

The Content team in Stratcomm in Heidelberg will be responsible for curated content – news and other articles, written on various sites and pulled automatically into a central “Content Hub”, where tags and other metadata can be added to ensure the content is then displayed in relevant locations across sites and feeds.

So what did we achieve on this sprint?

This.
http://dev.beta.embl.org/cancer/

It’s a demo version – a beta release – of what the landing page might look like for the future embl.org/cancer. You’ll notice it looks and feels like an unfinished product: the final design is not implemented, the font is large, etc. This is deliberate – we would like people to recognise this as a “work in progress”. Mark will be blogging his ideas about what constitutes an “alpha”, “beta” or “live” release over the coming weeks. Here’s a quick primer.

On this sprint the joint teams in Heidelberg and at the EBI ensured that real data and real content was made available for the Content Hub to suck in and display on this page. The text and articles at the top are real content from the Content Hub. Articles in the EMBL and Cancer section are written and published on news.embl.de (well, a test version for now) and automatically appear on the landing page when they are properly tagged “cancer.” The jobs feed is live data from the jobs API, for jobs relevant to the “cancer” topic.

Take a look at our demo of the sprint
And the slides from the presentation

We’re preparing another sprint on landing pages for next week, to dig deeper into various technical issues, and to create more content for the beginnings of the new embl.org.