covid-19 app ui/UX design

A personal solo project, this conceptual mobile app is the John Hopkin’s COVID-19 tracker dashboard. While the desktop view is immensely useful in conveying info towards politicians and medical professional around the world, the mobile view is not particular intuitve when communicating the necessary information. As a result, the purpose of this redesign is to create a universal, standardize design that would work within the current sets of data that were being displayed.
‍
TIME
‍3 months
‍
TOOLS
Photoshop, Illustrator, Figma
‍
TEAM
Michael Tewasart (UI Designer)
user research
SUMMARY
As of mid-June, 2020, the user-friendly dashboard has attracted millions of page views. Government health officials, scientists and journalists use this to track the growing cases everyday. In other words, people already have an insight into what the software is about. Compiling all of that information into a single app would mean it the design would have to be intuitive, easy to understand, and appeal to the most common denominator with a workflow as minimum as possible.

MOBILE PAIN POINTS
The mobile view lacked several features that were in the desktop version, such as viewing cities and various info data points. Multiple tabs at the bottom that were used to sort between each data point had to be streamlined and condensed into something more manageable. How each country/region tracks and organizes its cases also has to be factored in when creating a universal design system. Also, not every US state has a complete set of data points.
competitive & comparAtive analysis
At the time of designing this, there has been no app specifically geared towards tracking COVID-19 cases at a global level. Nevertheless, various other websites/organizations/media outlets such as Bing, CDC, New York Times, and Google offer their own mobile version of a COVID-19 tracker.

MAIN FEATURE PRIORITIZATION
Based on analyzing the features of other COVID-19 trackers with a mobile viewport, the key features that I prioritized would be:
- search any country/province/county/city at any point of the workflow
- map view that would display the same amount of information as a list view would
- filter/display different types of data (cases, deaths, recovered, active, tested, and hospitalized)
- switch between list and globe view instantly

Low fidelity wireframes & wireflow

As this was a mobile view of the dashboard compressed into an app, a workflow was created so that interaction from screen to screen could be tracked easier. A universal, standardize card was created to contain all relevant necessary information that the user wishes to display and filter by.

As this app was primarily focused on displaying information in the most efficient and intuitive way possible, the the main focus was providing an easy, intuitive navigation system in which the user can choose how to obtain data.

visual elements & color scheme

BRANDING
The color selection is similar to that of the desktop view, as I wanted to maintain visual consistency across all viewing device platforms.

FINAL DESIGN & THOUGHTS

TAKE AWAY:
The biggest takeaway I learned were consistency in both design and how data is collected. Without a standardize design system, the entire workflow can fall apart quickly and frustrate the user. Another thing would be a standardize way of how the information is collected. As I learned during this process, some countries collect and display data differently. Some have data points that summarize their entire country, while others (such as the USA) are split into multiple states/provinces. Even here in the USA, within these states, some have the same data points that their borders states have.

The goal of this design was to create a user-friendly, mobile interface with a universal, standardize design that would work WITHIN the current sets of data points.

In the near future where dashboard gets updated with new features, I would love to iterate on this design by incorporating on those new systems.
View Prototype