Why

During the first summer of the COVID-19 pandemic, case counts in Hawaii were starting to rise while people were struggling to decide how to react.

There were many instances of people flouting social distancing guidelines, incorrectly wearing masks or not knowing how best to behave. Reports indicated that many of these people were in a younger (20s and 30s) age range.

Much of the statistics people would use understand the seriousness of current situation where available on news broadcasts and web sites. The problem is most young people do not sit and watch news broadcasts, and the available web sites were slow and difficult to parse.

I wanted to help people learn how COVID-19 was affecting our community today so they could better decide how to act today and into the near future. I decided to summarize daily case data in small, easy-to-read infographics, and publish them where people spent a lot of their time: Instagram.

Data

I focused on the following COVID-19 case count data:

• Total number of COVID-19 cases in Hawaii today * Cases by county / island
• Percentage of positive tests * Total test count
• New deaths today * Total number of deaths in Hawaii
• Active cases * Total case count
• Hospitalization * ICU beds in use

The data is published daily on the Hawaii Department of Health’s COVID dashboard.

For the initial prototype, I manually added data from the DOH dashboard into a Google Sheet.

Design

After manually adding 2 weeks of data, I started sketching the layout for each data card I wanted to post to Instagram. I decided to group the data into Case Counts. Positivity Rate, Deaths, and Hospitalizations. Each card highlighted a single metric (daily case counts) and provided supporting data. The Case Count and Positivity Rate cards also displayed a sparkline (tiny historical chart) a rolling 14-day trend.

After finishing the sketches, I used Figma to design the layout for the slices. I wanted each card to be as concise as possible—allowing viewers to easily grasp today’s relevant information. A sans-serif font was used with large type to clearly convey the data. The card backgrounds are color-coded based on the positivity rate (which was the best indicator of COVID prevalence in the community).

Days with a 1-4.9% positivty rate have a green background. 5-9.9% positivity shows a yellow background, and 10% or more shows a red background.

Over time, the color-coded cards on the @hawaiicovidinfo profile page became a way to scroll back on a glanceable history of COVID-19 cases in Hawaii.

Working with the data

Figma text elements are populated with data from the Google Sheet using the Google Sheets Sync plugin. The Chart pluginwas used to generate the sparklines from the data in the Google Sheet.

The initial plan was to cobble together the images using Figma and the plugins, them move towards building a web app that pulled the date automatically, build and populate the layouts in canvas or SVG, then render out the images to post on Instagram. Unfortunately there is no publicly available api for Hawaii’s COVID data.

I also experimented with using Figma and After Effects to animate vaccination rate data.