Case study: COVID Tracker
How I designed an online COVID tracker which helps people find not only COVID stats, but also other COVID relevant information under one roof.
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
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.