UI CASE STUDY


COVID-19 dashboard

for Ontario, Canada

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

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

Overview


DASHBOARD

CHALLENGE

According to data from CTV News Canada, Ontario addresses misunderstandings over new stay-at-home rules. Residents of the province are unsure how to proceed with the data released by COVID-19.

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 quickly and clearly.

Dashboard Audit

While offering relevant data, most Ontario dashboards look confusing and not intuitive. The data insights was 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. Based on the findings, I organized the major issues and turned them into new sections, clustering the relevant topics into new information architecture.

User Profiles

To characterize the exponential behavior of the pandemic, the Susceptible-Infected-Removed (SIR), an epidemiological model based on socio-behavioral factors, was taken as a reference. In so doing, it was possible to use the model for the definition of user profiles in three segments:

  • Susceptible: people likely to get the disease.
  • Infected: people who have the disease and are spreading it.
  • Recovered: people who have already had the disease, have recovered, and are now temporary immune.

Information Architecture

Based on the tag cloud identified on Twitter public data and the user profiles, I created the Information Architecture. 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

UX Case Study - COVID-19 Dashboard - Ontario, Canada. Data representation

The interface was developed from UX studies, definition and analysis of visual means for data representation based on the current dashboards available in Ontario, allowing compares multiple variables in datasets and identifying how a part of data corresponds to the whole, showing relative and absolute values.

Defining the containers

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

The layout of the containers was designed so that there is a continuous flow, in order to facilitate scanning on the dashboard, prioritizing the readable info from left to right on the desktop version.

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.

Reviewing the needs of Ontario residents, I identified that it would not make sense to create a single-page dashboard with all the information on a scrolling page. While it would make the project more accessible in terms of overall content, it could potentially detract from the user experience considering the context they already have and the decisions the end-user will make based on the data. For this reason, I defined the menus considering the data covered, allowing the separation of information based on different interests.


After that, I created the sketches on the Remarkable 2 tablet 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.

The components created are minimalist and guide the user's attention in card-based navigation. I also define bright colors for the User Interface to increase readability and to be easy to scan.

User Interface

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

To 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 and increasing readability. 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.

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.

Improvement opportunities

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.

As a refinement of the project, I came up with some improvement opportunities:

  • Optimize the desktop version header, reducing the size and updating the images for each context.
  • Implement the extended menu as the initial default in the desktop version.
  • Evaluate the province requirements of fully vaccinated to understand how to grant access to vaccine proof system.

Regarding rising COVID-19 variants, it's crucial to focus on user research methods. In-depth interviews can bring more relevance to the project by avoiding cognitive biases and allowing testing of the new implementations.

Interested to read more about other projects?

Feel free to reach out.

I'm looking forward

to hearing from you.

Medium
Medium
Linkedin
Twitter

2022 © Marcos Rezende's UX Design Portfolio - Ottawa, Ontario. Canada. 🇨🇦