COVID-19 Tracker

Role

UI/ UX Designer

Front-end Developer

Stack

HTML5

CSS3

ES7

React

LocalStorage

Service workers

PWA

Time

Jun 2 -

Jun 25, 2020


Summery

Coronavirus disease(COVID-19)is an ongoing global pandemic resulting in more than 28 million cases and 900K deaths. As of now, countless people’s lives have been changed because of the loss of jobs or family and it becomes one of the most concerning topics. Many digital tools are in turn created to enable people to keep track of the latest situation.

However, these tools often display too much information to users requiring specific data. Besides, the interface is also too complex for them. Therefore, this project aims to simplify data and the interface as much as possible so that those users are able to perform the daily query with ease.

Contextual rendering of COVID-19 Tracker
Contextual rendering of COVID-19 Tracker

User Story

The COVID-19 Tracker consists of two sections:

  • Overview of the Selected Country: A user can not only get to know the amount of today's confirmed, recovered, deaths cases but also the current amount and ratio of recovered and deaths cases to confirmed cases of the selected country.

  • Comparison of Selected Countries: A user can select up to five countries and compare their case-growing trend and further details. Moreover, the information of each country can be turned on or off and all countries can be sorted in ascending or descending order according to different user needs.

Wireframe of responsive design
Wireframe of responsive design

Interface Design

The wireframe was further crafted by implementing the design system. The main design goal is to differentiate complex data with a clear visual hierarchy. For instance, the chromatic color theme classified data into confirmed, active, recovered and deaths cases.

Design system
Design system
High-fidelity user interface design created with Figma
High-fidelity user interface design created with Figma

Web Development

The COVID-19 Tracker is a single-page application(SPA) and progressive web application(PWA) developed in HTML, CSS, React.js and Service Workers and deployed on Netlify.

    • Data Visualization

    The data is powered by NOVELCovid API sourced from Worldometer, Johns Hopkins University, etc. and visualized with Mapbox GL JS and Chart.js in various ways such as map, histogram, pie chart, etc. In addition, Chart.js and CountUp.js were implemented to animate the transition of charts and numbers respectively.

    Data visualization(Mapbox GL)
    Data visualization(Mapbox GL)
    Data visualization(Chart.js)
    Data visualization(Chart.js)
    • Selecting & Tracking Countries

    Apart from the drop-down menu, the confirmed-case map offers an alternative way to select a country for users. In the comparison section, the selected countries are saved in the localStorage to reduce the repetitive selection of tracking countries next time.

Country selection: Map or Drop-down menu
Country selection: Map or Drop-down menu
Tracking countries(Up to 5) are keeped in localStorage
Tracking countries(Up to 5) are keeped in localStorage