Case study: COVID Tracker

Objective

Create a website which will help people get COVID stats of the whole world. Also provide them with all other related information which is needed by an individual at the time of an emergency.

Problem Statement.

COVID-19 tracking tools or contact-tracing apps are getting developed at a rapid pace by different governments in their respective countries. But do you remember the last time you needed to open multiple tabs just to find out different information related to COVID?

This becomes a lot difficult when a user constantly has to change tabs again and again. There are times when you want to compare the information of 2 different data, from 2 different tabs. Doing this becomes quiet a task and frustrating sometimes.

Users and audience

  • People of all ages
  • COVID infected patients
  • People who want to volunteer and donate
  • Travelers

My Role

I worked on this project as a lead designer.

Scope of the project

  • Find all related information at once place.
  • A easy to understand and easy to use design.

Challenges

  • Knowing the important topics that are needed to be displayed on the landing page.
  • Designing the website in such a way that it doesn’t look too cluttered.
  • Finding out which important topics are needed to be highlighted.

Processes of the project

Process flow of the design

Transition diagram of the Process I followed.

Design

High Fidelity Design.

Main design Points

  • The UI colors come in good contrast with each other.
  • The navigation bar consists of the Logo, the Home button, the About button, the Contact button and the Search bar.
  • The main page consists of 6 cards. From top to bottom and from left to right the cards displayed are: the Map card, the Stats card, the Instructions card, the Donate card, the Medications card and the Important Links card.
  • The Map can be scrolled and moved around to browse a certain location. You can also select the county and province/state for easy searching.
  • The data in the stats card changes as you select any place on the map. The data on the stats card reflects on the area you’ve clicked on.

Research and Ideation

  • I browsed through different websites from awwwards to get ideas to add multiple information at a glance. I found out that using cards would be the best fit.
  • awwwards also helped me choose the colors for the design. I went with a dark theme, where the primary colors chose were light blue and light red, representing safety and danger respectively.
  • I interviewed 7 doctors and 27 recovered COVID patients for the medication they used. It was found that all the treatments used were mostly same, and the most recurring treatments are mentioned in the medication and and instruction card.

Wireframing

The above diagram is divided into 2 parts: A and B.
I’ve been experimenting with the layout for the different cards to be placed. Layout A and B, both prove to visually provide more information at a single glance. Rounding off the corners of each cards would make the webpage look more neat and less cluttered.

Layout A can display 4 information cards, while layout B can display 5. The advantage of 5 cards over 4, help me decide to choose B over A.

Learnings and impacts

As I set upon designing, understanding what is the thing which the people who the organization works with are looking for, or what people who come through word of mouth are looking for. There is a huge difference between the two.

As my very first project involving UX process as part of my work, I really understood what goes into the experience. User Interviews is one thing I significantly improved on during the process. Designing this website has been a wonderful learning experience.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Muzli Publication — Weekly Digest

MAMAPUT: A UI/UX CASE SUDY

Life is a cartoon

YoungInnovations Weekly Blog #258—Interaction program on Open Contracting for Health, UI/UX design…

From Onsite to Readout in 2 Weeks

Clubhouse: A New Social Media Platform?

Crafting Your Story

DEVELOPING THE PUMP. Getting close.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Flinn Rodrigues

Flinn Rodrigues

More from Medium

UI/UX Role: Becoming UX Writer

Smell Feast — Menu Previewing App

My UX Process