COVID PH Map

My task was to help with the UI redesign and optimization of the web app. I also assisted in content, research, and surveying, as well as created the logo, favicon, and social media graphics.

Overview

The COVID-19 Philippine Tracker was built by a team of volunteer engineers to serve as an interactive and mobile-friendly web application to show the spread of the novel coronavirus in the country. Users could click a province or city on the map to zoom in up to the barangay level and view more details.

Statistics were sourced from the Department of Health (DOH). Other details such as affected barangays and patients' footprints, were collected from reputable news publications like GMA, ABS-CBN, CNN Philippines, Manila Bulletin, Philippine Daily Inquirer, Rappler, and Daily Tribune.

The data was updated twice a day at 11:00AM and 6:00PM GMT+8 in order to reflect the latest reports. The tracker was not meant to be a perfect real-time representation of COVID-related events in the country.

Challenges

  • Province View Color Theme - This feature needed to provide a high level view of infection severity of different provinces at once, but had 3 ways to show it, so users could not clearly understand what information they should rely on and it was hard to interpret the data properly.

  • City View Color Theme - The color set up looked odd i.e. the color contrast was lacking and users were not motivated to interact with the map.

  • Left Menu UI & Content - Content was lacking and presented inefficiently e.g. there was no About, Feedback Form, Legal Information and users had to click the menu to make any information appear.

  • Confirmed Cases/Province/City - When zooming in e.g. from province view into city view, there was no way to see if the view is still within a certain boundary.

Solutions

Complete recommendations can be found here.

Infographics