Tracking COVID data
Timeline: March 2020 - Nov 2020 | Visit link
Description: Easily the hardest story I’ve had to cover, the coronavirus pandemic took up my 2020. Throughout the pandemic, I created charts, graphs, and a Covid case tracker with collaborators Pablo Gutierriez and Niko Kommenda. The case tracker went through multiple iterations, and ended up with millions of daily viewers. It is still live today.
Technical summary:
Covid case tracker map
Global Covid genome sequencing world map
Covid case tracker map
I hooked up the data from the backend to create a front-end experience that relied mostly on inline SVG and assets pre-formatted on the backend side. I went through numerous iterations before deciding on which interactions made for the most useful front-end experience.
The Covid case tracker was different from my other project in that it turned into a product that was meant to be evergreen, as opposed to a one-off storytelling experience. Throughout the pandemic, as the numbers changed, so did the UI, so the code I wrote had to be quite dynamic through many changes (formatting of state names, weird numbers for date changes, clear documentation for other developers).
I got feedback from people often, so I would work on things like performance, number accuracy, and designs that would sometimes be outdated by the current news situation (eg test numbers)
Global Covid genome sequencing world map
In 2021, I worked with Quanta Magazine for another Covid project, this one about global tracking numbers. World maps are actually a bit hard to design for, especially on mobile considering how long the global map is.
I used the idea of an interactive white area to account for the tooltip interaction on smaller desktops and mobile sizes. I included different buttons at the top to allow for different contexts; something I learned in my experience is to not show too much information.
Aside from the UX considerations, I also worked to make the interaction fit within Quanta Magazine’s visual guidelines, including their font and brand colors, and how to embed the code into their CMS.