COVID 19 Tracking Website — UX Case Study

Rizal Azhare
7 min readApr 21, 2021

Help People Track COVID19 Virus Cases, test for symptoms, and provide advice on how to prevent exposure.

While many people are predicting that 2020 will be a year of Coronavirus, people struggling with lockdown measures and social distancing have started relying on Online for every single need.
And, the global impact of the Covid-19 pandemic wave has led to the sudden rise in healthcare app or website development and utilization
However, the matter of fact is, the purpose of using healthcare and fitness apps has been changed now. While tech has a history of helping the medical industry track and treats viruses all across the globe, therefore, startups are planning to develop an array of applications or websites to help people track virus cases, test for symptoms, and provide advice on how to prevent exposure.

First things first: Research

Observe

Starting off the project, I researched direct and indirect competitors to identify opportunities for COVID19TRACK. The authentic values and product range can set the web apart from their competition, this quadrant analysis shows where they sit in the user need areas.

based on the matrix that I created. There are still many covid19 tracker websites that are difficult to understand and lack the services that users really need. So I tried to make the lacks to unique in this project.

But hold on,
why did I start from competitive research?
Starting as a beginner. I don’t understand the Covid tracking website in general. So comparing several websites gives me insights and hypotheses about what users actually need.

User Interviews

I interviewed 5 of the people in my community to understand the wants and needs of users and their problems. My main findings are regulated by the user’s curiosity about Covid 19.

Based on the data gathered from user research, I have created a user persona identity in which I gain insights into the user’s goals, frustrations, motivation, and personality that should be of key importance to creating my project solutions.

Based on Sam’s goals and frustrations, I narrated this by:

Problem statement

Sam is a goods courier who needs to know which areas are affected by Covid 19. one day he also needs to register for a PCR test so that his family is safe.

Scenario

Sam roams online to see the latest Covid 19 Virus case data because the patient keeps going up and he doesn’t feel well. sam tries to find a web portal that can register himself for the PCR test.

My hypothesis

Sam opened the Covid19Track website and looked at patient case data. he found a feature to register for the PCR test. Sam was helped by that feature.

Crucial Time: Define

The next step is to gather feedback from user research to form the basis of the redesign phase. At this step, referring to the survey answers, annoying points are identified and the user’s needs can be identified.

Pain Points

  • Current information is too complex, so it is necessary to make an effort to understand the data.
  • Sometimes, User confused to find a fast and good PCR test place.
  • Overwhelmed with news about Covid everywhere.

Needs

  • People need COVID 19 case data in a simple and easy-to-understand manner.
  • Make news and information about Covid 19 collected into one.
  • Need a quick and simple PCR test registration.
  • Do things to fight together against the Covid 19 Virus.

The main focus

before going to the design stage. I define my main goals in the redesign of this app. as a limitation for case studies to ensure that the results are feasible and consistent main

The focus of this UX Case Study

  • Simplify the user interface and prioritize what is needed in displaying case data.
  • Give access to the user for donations.
  • Give access to the user for PCR test registration.
  • Provide news about Covid 19 without being overwhelmed.

Design

Landing Page

The homepage is a pretty basic landing page with a standard hero area where I try to post photos of people wearing masks. The heroes area contains 2 main CTAs followed by donations, and see the most important articles.

When the user clicks one of the buttons in the heroes area, the form will open in their own wizard rather than taking it to the next page.
I suggest adding a section where we can display statistics on how many cases are happening in the world today.
This homepage contains mock content that I have created so far. Although I strongly urge that the content must be finalized before the design but unfortunately that is not possible.

Data

This page is quite a debate in my mind. Initially, I will display data with tables and statistics. But, it would overwhelm the user with information.
Inspired by the implementation of the WHO website, we display data on a map and that area makes it easier for users to understand easily
Though this type of design has shortcomings in development because the lookup input will sort the two tables in the backend simultaneously.
Every time the user hovers the mouse cursor over an area or a country on the map. A pop-up will appear containing case data in that country. When clicking on the area the total data will be shown below.

News Page

Added a proper visual hierarchy similar to most of the news apps. This creates a predictable reading path that users already know and are familiar with.

I make the text area slimmer so that it is easy for users to read the article. If the wide layout User feels bored and doesn’t want to read the article more because that will impress a lot of texts.

Registration Form PCR Test

Creating a simple user flow is my goal. This will connect users with hospitals that provide various health service packages that people can choose according to their respective needs and health conditions, such as lab check services, making appointments with doctors to rapid tests and PCR tests to detect Covid-19.

Make A Donation!

at this stage, users will be given access to make donations to fight covid 19. funds will be collected by application developers and will be given to organizations responsible for COVID 19.

Prototype Clickable

if that doesn’t work properly. You can play the prototype at this link

Link Prototype

What is the scope for the future?

During my research, I found that it would be helpful for people to have services connected to the hospital, so in the future, we can expand our service to these products and could even introduce a consulting model.

How do we measure product success?

How many users came to check COVID19 case data — because the product’s main service is displaying data.
Since the wire flow is for medical test registrations — the metric will also be associated with it.
Registration turnaround time — how long it will take to complete the PCR test registration.
Registration success rate — how many users completed the test registration process and paid for it.

Thank you for reading through the article I hope you find it enjoyable in one way or another! (Will I write more case studies? Stay tuned.)

--

--

Rizal Azhare

I'm a product designer with a passion for creating user-centered experiences that solve real-world problems.