covid-19 app ui 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.

Based on the Competitive & Comparison Analysis and User Research, the key features prioritization that would be centered are:
- 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
- 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.

FINAL DESIGN & THOUGHTS

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. Some countries only have data points that summarize their entire cases, and aren’t split into multiple cities/provinces.

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