Find My
COVID Test

Creating an accessible one-stop solution to find COVID-19 testing in California.

Launch Site
Website Mockup

Project Details

My Role:

Product Designer, Developer, Branding, Outreach

Tools:

Figma, HTML, CSS, JavaScript, Google Firebase, Google Maps API

Duration:

1 Year

Overview

Due to the COVID-19 pandemic, millions of people around the world have had to get tested. After a possible exposure in my family, I struggled to find a testing center near me. I realized that if a technological 20-year-old was having trouble, others would too.

Find My COVID Test improves the accessibility of finding a COVID-19 testing center in California by allowing patients to filter testing locations based on their preferences for distance, insurance coverage, testing method, fee, and doctor's referral.

Research

To learn more about other people’s experience registering for a COVID-19 testing center, I conducted an online research study surveying 39 past COVID-19 testing patients. From this survey, I found that on average it took users approximately 15 minutes to find a testing center and register for an appointment.

Additionally, the most difficult parts of the process were:

  1. finding the testing registration website
  2. finding a nearby testing center
  3. needing a doctor’s referral

Using this information, I came up with the research question:

"How might I reduce friction of finding a COVID-19 test for a diverse crowd of people (age, insurance status, income, etc.)?"

Target Audience

While creating my target audience, I needed to keep in mind the average internet user’s age. Additionally, using the information on the Centers for Disease Control and Prevention (CDC) website, I found that adults of any age with pre-existing health conditions such as asthma, COPD, obesity, liver disease, or smoke have a higher risk of contracting COVID-19. For these reasons, my target audience was:

  • Age: 30-50 Years old
  • Gender: Male/Female
  • High risk to COVID-19
  • No insurance
  • Has car
  • Not tech savvy

Kelly is a 40 year old woman from San Francisco, California who works as a receptionist at an elementary school. She does not have strong internet browsing knowledge and relies on her brother to help her use the internet. Additionally, Kelly also suffers from COPD, and does not have insurance. Kelly was recently in contact with someone confirmed to have COVID-19 and must get tested. Although she has a car, she isn't familiar driving outside of her local area.

Original Prototype

Through my first prototype, I had acknowledged all of the user’s highest requests, allowing them to schedule and register for a COVID-19 testing appointment within seconds. I created a simple and easy-to-use user interface that would satisfy my target audience because of its simplicity, multi-step process, and large signifying buttons/symbols

Original Prototype

However, I realized that if this remained a prototype, it would have no tangible effect in making a difference.

I began to think of ways to develop this prototype into a real application. However, the only way to register a user to an appointment would require my application to have access to every COVID-19 testing center’s registration database. I knew this would be highly unlikely.

Considering my critical users are less technically adept and would have a hard time seeing smaller screens, I knew that a desktop version would be more suitable. However, a mobile version would be better for younger people who primarily access the internet through their mobile phones. Using my knowledge in HTML, CSS, and JavaScript, I knew that I needed to turn this into a real life responsive website that would be able to meet the needs of all potential users

Sketches

Using my pre-existing mobile prototype for reference, I went on my iPad and drew some quick sketches of what the desktop website might look like. Given more screen real estate, I came up with the idea to have a filtering menu on the left side of the page to allow users to quickly and easily find a COVID testing center that met their personal needs.

Desktop sketches

Low-Fidelity Concepts

Desktop Iteration 1

Desktop Prototype 1

Going into Figma, I made some changes from my sketches, adding a menu on the left that would show a list of COVID testing locations with the location name, address, and criteria necessary for an appointment. Ultimately, I ruled against this design as it was too complicated and made the application confusing.

Desktop Iteration 2

Desktop Prototype 2

To create a more straightforward and easy to navigate experience, I eliminated the list view. Additionally, to solve the problem of not being able to register patients directly, my solution was to have a button that would open the webpage for users to register for their COVID-19 test on a new page.

High-Fidelity Concepts

After finalizing the basic wireframe design of the website I transformed these designs into high-fidelity mock-ups.

Desktop Iteration 3

Desktop Prototype 3 Desktop Prototype 3 Filtered

Desktop Iteration 4

Desktop Prototype 4 Gif

After compiling a list of testing centers in California, I omitted the filtering option of Appointment because every testing center required an appointment. Additionally, I added a search bar feature that allows users to find testing centers in a desired city.

User Feedback

Once finalizing the design and developing the application to Desktop Iteration 4, I began to user test the prototype with 10 people ages 20-55 to ensure that the product was usable for all ages and demographics.

I received a lot of constructive feedback that helped polish and push Find My COVID Test to its final version. For example:

  • Cost was rewritten to Fee and Test Type to Test Method.
  • On page load, the filter buttons would be selected to Any, to clearly illustrate that no filters were applied
  • Zoom-in and zoom-out buttons on the map for both mobile and desktop users.
  • Testing center address would be clickable, linking the user directly to Google Maps where they’d be able to find out how far a testing center was from their current location

Branding

To acknowledge that Find My COVID Test was an interactive map based website for COVID-19, I created a unique logo that highlighted both components. Instantly, I knew that this would be the logo that I wanted to create for the site.

style guide

Final Prototype

Finally, after implementing the feedback I received and logo I created, I decided to default to the classic Google Maps red marker color as it was a familiar icon that users would recognize.

Final Prototype

Development

Along with designing Find My COVID Test, I also developed the website using HTML, CSS, and JavaScript.

This required me to also learn how to use Google Firebase Database to store the testing location data along with the Google Maps API to access the location database and plot the map pins using the stored coordinates to the map interface.

Below is a basic level flow-diagram that explains how the user interface components and development functions interact as the website is being used.

Development Diagram

Final Product

Countless all-nighters and weeks later, I had successfully developed Find My COVID Test!

Below is a demonstrational video that I created of how the website works.

Impact

At the start of the pandemic, finding a COVID test was a difficult challenge.

Since the release of Find My COVID Test, I have been able to help more than 3,000 people find COVID-19 tests with an average time of 34 seconds.

Prior to creating this website, past test recipients reported that the average time test was 15 minutes. Overall, my website has greatly reduced the search time for finding the most suitable COVID-19 test. With the improved accessibility, I hope to be able to increase the amount of California residents receiving tests, creating a healthier and aware community that can flatten the curve.

As I continue to add testing locations to the map, I am proactively reaching out to the California government and testing organizations such as Verily- Project Baseline, CVS Health, and Walgreens to work together and improve the website's map coverage across the United States.

Being the sole designer and developer of this project has been rewarding in itself to positively impact the community and make finding COVID testing more accessible to the public.

If you would like to partner, please email me at: findmycovidtest@gmail.com

If you would like to use Find My COVID Test for yourself, please visit: http://findmycovidtest.com

Reflection

After many sleepless nights and 6 weeks later, I am so proud to release Find My COVID Test to the public. This was definitely the most challenging design and development project that I have ever worked on. It was a HUGE learning experience for myself and taught me much more than I could have ever imagined.

The biggest challenge I had while creating this website was imposter syndrome. There were many times where I had encountered significant development problems. However, I was determined to develop the website no matter what as I knew the true potential and how big of a difference I could create in the world once it was released.

Update

From January - March 2021, I continued working on Find My COVID Test to continue outreaching and updating the test location database.

At the end of my independent study, I was able to partner with 2 of the largest testing organizations in California, Verily- Project Baseline and Curative. With their help, Find My COVID Test now has over 1,100 testing locations to choose from!

Additionally, I was featured in an article by the University of California, Davis Letters and Sciences and the California Aggie newspaper!

Newspaper Article

To read more about my 10 week independent study, click here.

Thank You

Thank you, Blake Brown, Jeremy Chang-Yoo, Joli Chien, Kit Nga Chou, Thomas Hernandez, Linda Huang, Francis Kong, Hannah McKelson, Sam Louderback, Thomas Pham, Marcela San Juan, Aileen Yang, and many more for their feedback and support along the way.