2020 in Review: Editorial Graphics

By Kendall Davis and Nami Sumida • Jan 11, 2021

Each year brings its own challenges, and 2020 was definitely full of them. However, through all of that, we were able to publish more data vizualizations, news apps and custom header images than ever before. We also found ways to make our news imagery more diverse and inclusive. Here’s a look at a few projects that demonstrate how much we grew in 2020:

News apps and data viz

Project goal: Create a page that tracks progress of the most promising coronavirus vaccine candidates

The process: In late spring, as biotech and pharma companies began COVID-19 vaccine development, BioPharma Dive asked us to help create a tracker for the dozen most promising vaccine candidates.

For each candidate, we created a mini-dashboard with several sections. One section has a candidate-specific timeline marking important milestones or roadblocks to development. Another section includes an illustration of the vaccine type that helps readers understand the different types of vaccines being produced.

We also created an animated summary timeline that tracks key milestones — the start of clinical trials, release of study results, the start of late-stage trials and the projected date for available vaccines — across all candidates. This timeline provides readers with a high-level overview of coronavirus vaccine development and helps them easily see which candidates have progressed the most.

Team: Nami Sumida (News Graphics Developer), Kendall Davis (Art Director), Ned Pagliarulo (Senior Editor)

Read the story: The coronavirus vaccine frontrunners are advancing quickly. Here’s where they stand.

Restaurant Dive’s ghost kitchen calculator

Project goal: Convert an Excel spreadsheet into a web-friendly tool that restaurant owners can use to determine if operating a ghost kitchen would be profitable

The process: Restaurant Dive had obtained an Excel spreadsheet that could calculate profits and losses for a ghost kitchen operation. Kitchen Fund, a growth investor specializing in emerging restaurants, created this spreadsheet for restaurant operators to understand the financials involved in launching and maintaining a ghost kitchen. Using this calculator, they had already advised several restaurants. Restaurant Dive believed this would be an invaluable tool for many of their readers, so they asked us to convert the spreadsheet into a user-friendly online calculator.

To do this, we decided to reduce the complexity of the spreadsheet’s formulas. We reduced the 25+ input variables down to the most essential 20. The spreadsheet also included four different sections of output metrics, but we concluded that having so many sections would be more confusing than helpful — and therefore only included two.

Team: Nami Sumida (News Graphics Developer), Julie Littman (Reporter), Emma Liem (Editor), Kitchen Fund

Read the story: Ghost kitchen calculator

BioPharma Dive’s CEO pay story

Project goal: Create data visualizations for CEO compensation and median employee pay for 231 biotech and pharmaceutical companies

The process: BioPharma Dive obtained 2020 data on CEO compensations and median employee salaries for 231 major biotech and pharmaceutical companies.

Using this data, we created three charts. The overall design goal for each was to communicate an insight while also allowing for self-directed exploration of individual data points and subgroups. To achieve this, we produced highly interactive visualizations with filters, search bars, tooltips, etc.

Two of the charts incorporated the “scrollytelling” format — a visual storytelling technique in which content changes as the reader scrolls up or down the page. There were two reasons for using this format: 1) The charts were complex enough that they would benefit from a walkthrough of the interactive elements. 2) We wanted to call out important trends shown in the chart. With scrollytelling, we could overlay the text onto the chart so people could read about a trend and see it in the chart simultaneously.

Team: Nami Sumida (News Graphics Developer), Ned Pagliarulo (Senior Editor)

Read the story: How biotech and pharma companies pay their CEOs, and their workers

Learn more about the process: The thinking behind BioPharma Dive’s CEO compensation charts

Healthcare Dive’s hospital capacity story

Project goal: Identify metro areas across the U.S. that may be at risk of bed shortages as COVID-19 cases rise

The process: During the first wave of COVID-19, we worked with Healthcare Dive to analyze data on population and hospital bed counts for several major metro areas. We obtained a public dataset of U.S. hospitals, which included basic information (e.g. hospital location) and the number of beds, broken down by bed type. We analyzed this dataset and used the results to produce a data-driven story.

To accompany the text, we created three graphics: 1) an opposing bar chart showing the non-linear relationship between population and bed counts in the most populated metro areas, 2) a map and bar chart showing hospital capacity in metro areas most at risk of shortages, and 3) a table with data on all metro areas so readers can learn about capacity in their own area.

Team: Nami Sumida (News Graphics Developer), Samantha Liss (Reporter)

Read the story: How hospital capacity varies dramatically across the country

Learn more about the process: Analyzing hospital capacity data for major U.S. metro areas

COVID-19 daily trackers

Project goal: Create a daily tracker of how the coronavirus is impacting the industry

The process: At the onset of the pandemic in early March, Smart Cities Dive asked us to help them find a way to aggregate coronavirus-related headlines for their readers. Several newsworthy updates were emerging every day, and the team didn’t have the bandwidth to write individual stories for each.

To solve this problem, we created a new type of tracker that highlights each day’s top news items in bulleted form. An archive section stores previous entries. Journalists are able to update the tracker via a Google Sheet — a linked spreadsheet that holds all of the information displayed. To add a new day’s entry, journalists simply add a new row to the spreadsheet, which is automatically pushed to the page. We decided to use this updating method because the tracker is coded in HTML; most of our journalists would not be comfortable editing code when they needed to add or edit entries. Without the Google Sheet, we would have to assist in every update, but linking the page to the spreadsheet avoided all of this.

When Smart Cities Dive’s tracker launched, it quickly caught the attention of other publications. We replicated it for Construction Dive, Higher Ed Dive, K-12 Dive, Utility Dive, and Waste Dive. And because each tracker was linked to a Google Sheet, we were only involved in the initial setup and not needed in daily updates.

Team: Nami Sumida (News Graphics Developer)

Graphics

Diversity in Illustrations

The goal: To ensure that our illustrations are inclusive by expanding our understanding of key topics. While these topics are by no means comprehensive, they gave us starting points for our research.

The process: Each designer was assigned a topic to investigate. After the research was gathered, each designer presented their findings to the group, which led to thoughtful discussions and solutions we could work towards. In order to guide the conversations, we came up with these topics to research individually and discuss as a group:

• Social Dynamics
• Ability
• Body Type
• Environment
• Gender
• Age
• Ethnicity

We diagnosed our own strengths and weaknesses depicting each of these in our designs and strategized ways our team could improve.

These solutions varied, depending on the subject, but the talks we had allowed us to see that most of us are naturally biased. A great example of this was when we noticed that designers are usually conditioned to reflect what we see in our everyday lives in our illustrations. Realizing this, we set out with a goal of stepping outside of our individual comfort zones to consider more of the world around us.

And we are still learning. There is so much we have to gain from more discussion and experience. With time and more understanding, we hope to actively apply our findings to our illustrations.

Collages

The goal: Going into a new year, we knew that we needed to expand our visual library with a new header style. While the hand-drawn illustrations are still a major asset in our designer toolkit, we felt that they were too time-intensive for our relatively small team. The new direction needed to require less production time, while also giving editorial a fresh, recognizable look. The style also needed to be something that every designer could replicate in order to build brand consistency.

The process: Michelle and I began our research by examining how others across the web were approaching headers. While there are no shortage of options, in time, we focused on photographic solutions. We believed that photos would allow our team to quickly experiment with layouts and ideas, and cut out some of the time required to illustrate.

Then we focused on coming up with a solution that would take simple photography and turn it into something unique. We played around with overlays, masking, expressive backgrounds, and even some typography.

In the end, we decided to explore collages. We viewed it as a style that requires nothing more than imagery and imagination. The design could be as simple or complex as the designer wanted it to be. With photography and our editorial color scheme as the consistent anchors of the collages, we were able to come up with a consistent style that helps our content stand out in the markets we cover.

State of the Electric Utility Survey 2020

The goal: To create a visually impactful survey designed around the data collected from industry experts by our editorial team. This year, we wanted to be even more ambitious and use isometric illustrations to help tell the story.

The process: First, we needed to establish the illustration style. Would we do flat vector illustrations? Maybe a watercolor style? When choosing the style we needed to consider our audience. This report needed to catch the eye of a utility executive.

With that in mind, we decided to take a shot at isometric illustrations this year. This style requires the use of a grid that acts as the foundation of each illustration. Luckily, our team has some experience with creating and using these grids; we took the same approach with our 2019 Dive Award Illustrations.

After creating our grid, we worked closely with the writers of the report to make sure each illustration was designed to reflect the ideas from each chapter. We created the report, one chapter at a time, using data gathered from a survey we published earlier in the year to inform the data visualizations.

This was also an incredible opportunity for us to create our first product with our new editorial typography and color scheme that we created at the end of 2019.

There was a lot of back-and-forth between stakeholders, making sure the data was correct and the copy clean. In the end, we were able to create our first State of the Electric Utility Survey that used our own illustrations and branding, and we are excited to expand on that in the future.

Originally published at https://industrydive.design.