CASE STUDY


COVID-19 Dashboard: reshaping Ontario's data visualization for enhanced public awareness

The COVID-19 Ontario dashboard's purpose is to visually provide KPIs to meet the specific needs of residents, by correlating pandemic-related data with the new social rules imposed by the province.

UX Case Study - COVID-19 Dashboard - Ontario, Canada. Marcos Rezende

Overview


DASHBOARD

CHALLENGE

According to data from CTV News in Ontario, there is a pressing issue regarding the comprehension of the new stay-at-home rules. Many residents in the province are finding it challenging to interpret and act upon the COVID-19 data provided.

There is a lot of information focused nationally, but the question is: How to act locally?


GOALS


  • Provide useful information for decision-making at the local level.
  • Improve the readability of data.
  • Make it easier to find decentralized information.
  • Help Ontarians visually understand lockdown rules.

PURPOSE


The main focus of the analytical dashboard is to present data variances to the user to quickly convey critical information to users, providing one-stop information used for analysis and decision-making clearly.

UX Audit & Insights

UX Case Study - Dashboard - Audit (Marcos Rezende)

While offering relevant data, most Ontario dashboards look confusing and not intuitive. The data insights were more focused on providing a high-level overview of COVID-19 and its main indexes in the province (including data on hospitalization and death) instead of showing useful information a user can act on locally.


Analyzing the word cloud from public Twitter data about COVID-19 in Ontario was a brief method to unearth some useful insights to comprehend what people are buzzing about regarding the pandemic. This dive into the data helped me understand what's troubling people the most, including aspects like public health measures, economic impact and restrictions.

UX Audit using Miro - COVID-19 dashboard

INSIGHT CLUSTERING

Based on the findings, I organized the major issues, turning them into potential opportunities to be explored and grouping the topics by similarity so that the requirements could be analyzed later in the project.

UX Audit using Miro - COVID-19 dashboard

User Profiles

To characterize the exponential behavior of the pandemic was taken as a reference for this project the Susceptible-Infected-Removed (SIR), an epidemiological model based on socio-behavioral factors.

This model allowed me to categorize users into three distinct segments: Susceptible, Infected and Recovered.

  1. Susceptible: Individuals who are at a high risk of contracting the disease.
  2. Infected: Individuals who are currently infected and capable of spreading the disease.
  3. Recovered: Individuals who have previously had the disease, recovered, and now have temporary immunity.

User Goals, Tasks, and Actions

After gaining a thorough understanding of user profiles and applying the Goals, Tasks, and Actions methodology, I effectively identified user intentions, determined the necessary activities, and established user pathways. Articulating these elements for the Susceptible, Infected, and Recovered user profiles was pivotal in guiding the dashboard design to ensure that the platform's features directly aligned with the unique needs and objectives of each user profile.


Using data from actions based on user profiles enabled me to verify whether the dashboard was too complex or if users were experiencing difficulties in navigating it. In this project, we have chosen to leverage key metrics such as Task Completion Rate and Time Spent on Tasks because they provide actionable insights into user engagement and the effectiveness of the dashboard's functionality.

Information Architecture

Through a comprehensive understanding of each user profile I was able to identify pertinent features which impacted how our dashboard for information was structured. The dwellers' frequent questions dealt with the new rules, not just receiving updated information about the pandemic. Thus, it was necessary to create a visual representation to facilitate lay users' understanding of the correlation between the pandemic and lockdown rules based on the main insights.

Data representation

COVID-19 Dashboard - Data representation

Building upon the insights gained in the previous phases, it was workable enable users to effortlessly compare multiple variables within the datasets while also providing a clear understanding of how specific data points related to the broader context. By establishing a connection between the users' requirements and the data visualization, we successfully conveyed both relative and absolute values, empowering users to make informed decisions and grasp the correlation between pandemic data and lockdown rules.

Defining the containers

UX Case Study - COVID-19 Dashboard - Ontario, Canada. Containers

I designed the layout of the containers in a continuous flow to facilitate scanning on the dashboard, prioritizing the information in a natural reading pattern, and adhering to the Western left-to-right, top-to-bottom progression on the desktop version. The continuous flow can also improve the user experience by promoting retention, allowing the user to absorb and remember the information presented more effectively. As a result, I sketched a compelling visual approach to represent complex data sets.

Sketches

UX Case Study - COVID-19 Dashboard - Ontario, Canada. Sketches.
UX Case Study - COVID-19 Dashboard - Ontario, Canada. Sketches.
UX Case Study - COVID-19 Dashboard - Ontario, Canada. Sketches.
UX Case Study - COVID-19 Dashboard - Ontario, Canada. Sketches.

After analyzing and identifying various interests, I started designing, considering the hypothesis that minimalist design can easily adapt to the amount of new information. I have decided to create separate menus as this solution enables logical separation of information and facilitates the user journey, allowing users to focus on specific data clusters without feeling overwhelmed. The main focus was on ensuring intuitive navigation across these information segments, ensuring visibility of essential KPIs.

After that, I created the sketches on the Remarkable 2, considering the data visualization principles for data storytelling. In addition, I defined the visual hierarchy to highlight the most relevant information based on the requirements. Finally, the time was ripe to focus on the interface after defining the style guide and the dashboard structure.

Style Guide

UX Case Study - COVID-19 Dashboard - Ontario, Canada. UI Components.

Incorporating the principles of Gestalt, this project's style guide presents a streamlined and user-centric aesthetic. Using a minimalist approach and card-based navigation enhances focus on key information while facilitating an intuitive understanding of content relationships. The design further includes modified icons from the Streamline library, ensuring a visually cohesive and intuitive user experience. The chosen monochromatic color scheme, punctuated with bright accents, increases contrast and improving readability.

User Interface

To potentially mitigate cognitive load in order to maximize usability, I designed an interface that prioritized information using monochromatic components, which allowed us to reduce decision-making timing, thus highlighting priority content. In addition, I considered one of the Principles of Calm Technology for the layout design, which revolves around requiring a minimal amount of attention from the user, preventing the user from feeling overwhelmed with information. With this in mind, I have reduced the number of elements per session, highlighting only the essentials.

DESKTOP VERSION (OVERVIEW)

UX Case Study - COVID-19 Dashboard - Ontario, Canada. User Interface
UX Case Study - COVID-19 Dashboard - Ontario, Canada. User Interface
UX Case Study - COVID-19 Dashboard - Ontario, Canada. User Interface

DESKTOP VERSION (EXPANDED MENU)

Expand and collapse menu - Dashboard Covid-19

MOBILE VERSION (OVERVIEW)

The concept project was fully responsive and customized for viewing on desktops, tablets, and mobile devices, prioritizing access to the essential elements of the dashboard through a visual hierarchy.

MOBILE VERSION (MENU)

Refinement and next steps

Upon a comprehensive review of Ontario residents' needs, my initial hypotesis was that the minimalist design in a multiple-page dashboard could easily adapt to the new amount of information coming in as proven partially right. Adopting a more organized and segmented approach became crucial to deal with such complex and deep data effectively. However, I also came up with some improvement opportunities as a refinement to achieve better results:


  • Ensuring the integration of data from reputable sources to counteract the spread of misinformation.
  • Testing a potential desktop version that allows each chart to be enlarged to full screen, helping the user read the data thoroughly and immersively.
  • Users may be constantly adapting to new information and dashboard features, which can affect the way they perform tasks and therefore the measurement of goals. For this reason, implementing in-depth interviews can be beneficial in mitigating potential cognitive biases and facilitating the testing of future implementations.

COVID-19 dashboard is a sample design project focused on the user-interface redesign for the available dashboards in Ontario, Canada. It's iterative work, as the topic is still incipient, and is being constantly updated.

NEXT

Minha Vitória platform: gauging residents’ expectations for the future of the city

Feel free to hit me up. I'm looking forward to hearing from you.

Behance (Portfolio) - Marcos Rezende
Medium - Marcos Rezende
Gumroad - Marcos Rezende
Linkedin - Marcos Rezende

2024 - Marcos Rezende's UX Design Portfolio. Canada © All rights reserved. Privacy policy.