COVDAT: COVID-19 Database App

August 2022

In an approach to studying app designs, I have decided to create my own app and design the user experience and interface. With UI design, I have also created icons and illustrations myself to have hands-on experience in Adobe Illustrator. This app will function to give people COVID-19 information, personal vaccination records, vaccination centers, testing centers, statistics, etc.

Why

In an approach to studying app design. Also,

to further study iconography and illustrations

How

Project

Design

Adobe XD
Adobe Illustrator

Self-Initiated

PRELIMINARY RESEARCH

Background / Purpose / Goal

When I went to the U.S. I was trying to enter a concert and everyone was required to prove their vaccination. What I realized was everyone holding a paper card. It seemed to me very inefficient for people to go around and hold onto a small piece of paper that anyone could easily lose.

Design a user-friendly app that people could use to upload COVID-19-related information.

To determine the users’ needs when visiting this app.
Make sure the essential information is placed where users’ could immediately notice.
Build a structure for organizing the information on the website.
Research information people would be interested in when using the app and try to integrate different COVID-19-related apps or information sites into one.

Problem Identification

During my time in the U.S., I realized people were carrying their paper vaccination cards around to enter certain facilities. While carrying this piece of paper, people could easily lose it. Also, COVID-19-related information is nowhere integrated into any app. Thus, people have to individually search info on available vaccine records, their COVID-19-related info(vaccination), COVID cases, and FAQ about COVID.

Solution

Design an app where people could access vaccination records/authentication, general information about COVID, testing centers, vaccination centers, and COVID statistics.

User Research - Personas

Concert viewer

I want to prove I am vaccinated without losing my vaccination card so that I could enter the concert hall and not lose my vaccination card to use for different purposes in the future

DESIGN GUIDE

Information Architecture

Site Map

DESIGN CONCEPT

Style Guide

I have focused on the most common fonts: Helvetica and PT Sans. Also, the colors are focused on green with having different shades for gradation. The logo shows the long history of the incline, thus is crucial to include.

Colors

#0035D1

#001348ff

#e175ffff

#4474faff

Typography

Aa

Quicksand

Medium

Aa

Assistant

Bold

Aa

Assistant

Light

Logo

Iconography

Icons & illustrations were all made by myself through Adobe Illustrator. Through this project, I wanted to focused on exploring iconography and illustrations and a deeper dive into getting hands-on experience with the Illustrator tool.

Illustrations