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. Therefore, I could infer that the data insights are 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.

Information Architecture

UX Case Study - COVID-19 Dashboard - Ontario, Canada. Information Architecture.

I created the Information Architecture based on the recurring tag cloud identified in Twitter public data. The dwellers' frequent questions dealt with the new rules and not just with receiving updated information about the pandemic. Thus, it was necessary to create a visual representation to facilitate the understanding of lay users regarding the correlation between the pandemic and new lockdown rules based on the presentation of 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.

UI Components

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 define bright colors for the User Interface to increase readability and to be easy to scan.

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 different topics covered, allowing the separation of information based on 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 structure of the indicator panel.

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

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.
  • Investigate the behavior of fully-vaccinated users to understand how best to provide access to the vaccination passport based on Ontario's requirements.

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

In order to broaden the discussion about the relevance of the issues covered and the emerging user needs, it's required to focus even more on user research methods as depth interviews to bring more relevance to the project avoiding cognitive biases and allowing testing of the implementations and design components.

Interested to read more about other projects?

Feel free to reach out.

I'm looking forward

to hearing from you.

Medium
Medium
Linkedin
Twitter

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