WHO
Covid-19 timeline

Dashboard
Role: Design lead
Studio: Beyond Words Studio
Visit site
The challenge
The World Health Organization wanted Beyond Words Studio to create an interactive COVID-19 timeline tracking significant events, scientific discoveries, and global response efforts against the backdrop of cases over time.

They wanted to highlight how quickly they responded and coordinated scientific responses to meet this global health threat and to provide accurate and reliable information for users to explore via a responsive timeline dashboard.
Part of the research: Existing COVID-19 visualisations. Left to right: Tableau COVID-19 Data Hub, John Hopkins COVID-19 Dashboard, John Burn-Murdoch’s charts in the Financial Times
User research and requirements
Before starting the design process, the design team conducted extensive research to understand the needs of the target audience:
  1. Journalists writing about the COVID-19 pandemic
  2. Government bodies looking to understand more about WHO’s response to the pandemic
  3. General public who might be swamped with disinformation

We then performed user interviews with target users and the client to determine high priority requirements for the interactive dashboard:

  1. Provide reliable and up-to-date information
  2. Create an easy-to-understand chronological view of cases over time split by regions
  3. Display all actions coordinated by WHO against the timeline of cases to see how, even before cases were taking off, many actions were taken
  4. Enable access to detailed information that allows users to explore each event and milestone in depth, such as news articles, scientific papers, and reports
  5. Highlight key action items as determined by WHO
  6. Allow filtering of actions by category to providing a more customised view
  7. Ensure accessibility and mobile-friendliness so that the timeline is accessible to all users, and be designed to work on different devices and screen sizes, such as desktop computers, tablets, and smartphones

We performed additional UX/UI research by looking into existing COVID-19 trackers and timelines to determine what was and wasn’t working for each. We also didn't want to recreate something that already existed; there were already numerous COVID-19 case trackers and dashboards.

Sketches and user requirements
Sketching and concepting
Using the user requirements as a starting point there were also several design considerations we needed to account for:
  1. Hierarchy of information: We wanted the timeline to act as a backdrop that provides context for all the actions coordinated by WHO, but the actions needed to be the focal point of the piece as they were vital in conveying the message that WHO acted quickly
  2. Mobile first: Although it was important for this timeline to be viewable on all devices, we wanted to nail mobile wireframes and designs first as it would be one of the primary ways users such as journalists would be accessing this information
  3. Scalable: We also needed to account for the fact that this dashboard would need to scale over time and allow for more case data and actions to be added. There needed to be a quick and easy way for users to navigate through time even without knowing the end date.

With these considerations and user requirements in mind, we started sketching screens moving from low-fidelity sketches to higher-fidelity wireframes in black and white while incorporating feedback internally and externally at various review points.

WHO brand guidelines
Design and implementation
Once the high-fidelity wireframes were signed off we started tackling design. We referred to the WHO brand guidelines to skin and style the dashboard. Since there was a lot of coded information on the dashboard we did a lot of experimentation with colours to determine which palette worked best for the action items and which worked best for the regional cases (while still passing WCAG 2 guidelines). Since the action items were most important we went with bright, punchy colours that are easily distinguishable (with further filtering enabled for users with colour vision deficiencies).

An important part of the design and implementation was making sure the timeline navigation was easy to use and worked smoothly on both mobile and desktop. The ‘Current timespan’ feature does a great job of showing a simple visual overview of the timeline and actions allowing users to quickly see where they are in time and smoothly navigate to another period of time.
Final designs and implementation
In conclusion
‍The COVID-19 timeline is an essential resource for understanding the COVID-19 pandemic. We used a user-centred design approach to create an engaging and informative user experience that meets the needs of the target audience. We created a simple, clear, interactive, and accessible timeline that is mobile-friendly and easy to use. The timeline is an excellent example of how good product design can make complex data accessible to a wide range of users in a flexible and responsive format.
Visit site