COVID-19 Screening Portal — a UX Case Study

A Redesign of the UC Davis Daily Symptom Survey

Project Overview

Context

The Daily Symptom Survey is a COVID-19 screening survey that was developed by UC Davis during the onset of the pandemic. Students, campus faculty, and visitors are required to take the survey every day and receive an “approved status” in order to access campus facilities.

The Problem

Although the implementation of this screening survey has helped UC Davis maintain the safety of their community, the experience of (1) getting the necessary requirements to complete the survey, (2) filling out the survey, and (3) using it to access school and workplaces is tedious and sometimes unclear.

How might we redesign the COVID symptom survey experience to be a hassle-free process while still ensuring the safety of the UC Davis population?

Our Solution

We decided to design an app that condenses the entire COVID-19 testing and screening process in order to make the experience of completing a Daily Symptom Survey hassle-free for the UC Davis community.

Meet the Team!

Our team of four, guided by a lovely project mentor.

Project Timeline

Our timeline for the six-week sprint process.

User Research

To begin our research, we wondered how might we reach out to as many UC Davis students as possible in order to understand the entire COVID screening process as best as we could, and concluded that surveying via Google Form would yield the highest participants and the most diversity.

Survey Structure

We were able to break down the COVID screening process into 4 stages and structured our Google Form Survey accordingly in order to discover where most user pain points lie, since the screening process is more complicated than just completing the Daily Symptom Survey.

  • Stage 1: Getting COVID-Tested in order to comply with university rules
  • Stage 2: Navigating to and accessing the Daily Symptom Survey
  • Stage 3: Taking the Daily Symptom Survey
  • Stage 4: Accessing Daily Symptom Survey results and utilizing them to access campus facilities and such

Survey Results

We ultimately received 58 responses, and although 58 does not seem that much when considering research samples, after we started synthesizing our data amongst the 4 stages with affinity mapping, we easily saw common trends and pain points amongst the survey participants so we moved on from gathering data.

Some highlights from our research findings.

Ideation & Synthesis

During our synthesis & ideation stage, we synthesized our findings using affinity mapping in which we were able to narrow down into 4 main user pain points:

  1. Easy to forget to schedule COVID test & filling out COVID Symptom Survey (both when to take and upcoming tests)
  2. Non-linear process of scheduling COVID test appointment
  3. Tedious process of taking the Daily COVID Symptom Survey
  4. Unaware of the different types of results after taking the Daily COVID Symptom Survey
Sketches of possible solutions to address the 4 user pain points.
  • Notification reminders for COVID-testing and to take symptom survey
  • Flow of scheduling COVID test appointment: callback number saved, accessing bar code easily
  • Condense the COVID screening process into one app
  • Resource page of the meaning of various approved badges and multiple ways to access that page

How might we condense the entire COVID-19 testing and screening process and make the experience hassle-free for UC Davis students?

Streamlining the User Task Flow

In this stage, we also mapped out the current Daily Symptom Survey’s task flow, as many users complained about the task being too tedious, in order to visualize the steps that we could consolidate. In this initial user flow, the user has to go through eleven steps and three different apps before reaching survey results.

User Flow of the current process of filling out the Daily Symptom Survey
User Flow of the revised process of filling out the Daily Symptom Survey

Mid-fi Prototyping

From our sketches and features we wanted to implement, we divide the work through different user flows: Home Page/Profile Flow, COVID Symptom Survey Flow, Scheduling COVID Test Flow, and Resource Flow.

A few mid-fi wireframes created during this stage.

Home Page

In our home page, we wanted to have a dashboard where users’ information is summarized and displayed onto one screen. All the tasks a user would need to get an approved badge such as taking the Daily Symptom Survey and scheduling a COVID test are accessible on the home page for easy access.

Covid Symptom Survey

We wanted to make the process of filling out the Daily Symptom Survey less tedious and repetitive, so we focused on the different ways of displaying each question. We tried to find a balance between making the survey quick and simple to fill out while also ensuring the users to read each question.

Covid-Test Scheduling Flow

We wanted to streamline the process of scheduling a COVID test by creating a page where users can schedule a COVID test and create an auto scheduling system to minimize forgetfulness and avoid the tedious process of frequent COVID test schedule that is required by UC Davis facilities.

Resources

We also implemented a resource page that allows users to stay informed and easily locate frequently asked questions.

Usability Testing

We then took those mid-fidelity wireframes for usability testing to ensure the flow is concise.

  • Completing the Daily Symptom Survey
  • Scheduling a COVID-19 test
  • Finding your QR code and relevant information for scheduled COVID-19 tests
  • Setting up auto-schedule for COVID tests
  • Finding information about your Daily Symptom Survey results
  • Finding information about the COVID testing frequency requirement

Findings

Figure 1.1: Usability Testing Adjustment #1
Figure 1.2: Usability Testing Adjustment #2
Figure 1.3: Usability Testing Adjustment #3

Hi-fi Prototyping

Implementing the usability testing findings into the prototype

Our screens were too information-heavy, so users were having a difficult time navigating through the app and finding what they need to find.

  • The testing tab and the homepage were quite similar, so we condensed them into one and removed the navigation bar on the bottom, replacing it with a hamburger menu.
  • It was also difficult for users to find the QR code for their appointment.
Design System Colors

Design System

Our Design system utilized UC Davis brand colors. However, we designed our components for a more modern, clean, and friendly user interface by using rounded corners, light backgrounds, and soft drop shadows.

Our Final Product

Our COVID-19 screening app condenses the entire symptom survey process, by requiring less clicks and keeping all necessary components within a single application (11 steps & 3 apps condensed to 6 steps & 1app!).

One of our primary goals is for our app to be able to save as much time as possible for students, since time is always very limited.

Figure 2.1 through 2.6 below showcase the different features of our COVID-19 screening app.

Figure 2.1: Onboarding & Home Page
Figure 2.2: Completing the Daily Symptom Survey

Figure 2.1: Onboarding & Home Page

  • Minimize Repetitiveness: Saved account & COVID related info (e.g. callback number, vaccination status, address for testing)
  • Save Time: A designated dashboard display on the home screen will make results more easily accessible to show for entrance to campus facilities
  • Customize Notifications: Choose when and how frequent reminders are for (1) Complete Survey, (2) Schedule a Test, and (3) Upcoming Test.

Figure 2.2: Completing the Daily Symptom Survey

  • Minimize Forgetfulness: An automatic button disappears once the survey is completed
  • Avoid Scrolling: Questions are distributed on separate pages
  • Only Use 1 App: Survey Badge is displayed immediately and remains on the Home Page
Figure 2.3: Daily Symptom Survey Result Badges

Figure 2.3: Daily Symptom Survey Result Badges

These are the different type of badges users receive after taking the survey.

  • Avoid Confusion: “What Does This Mean” button allows users to immediately understand their badge means.
  • Easy Access to Action Items: For the “NOT APPROVED due to overdue testing” badge, we added a direct link to schedule a COVID 19 test.
Figure 2.4: Schedule a COVID-19 Test
Figure 2.5: Auto-schedule a COVID-19 Test

Figure 2.4: Schedule a COVID-19 Test

  • Simple Steps: Select a date, location, testing window, and edit anytime
  • Easily Access Testing QR Code: Each upcoming test is displayed on the Home Page
  • Save Time: Select a testing windows instead of a specifc time

Figure 2.5: Auto-schedule a COVID-19 Test

  • Simple Steps: Select a day of the week, testing window, frequency, and edit anytime
  • Minimize Forgetfulness: Auto-schedule your COVID-19 tests for your preferred day of the week
Figure 2.6: Resources

Figure 2.6: Resources

  • Increase Clarity: Easily access badge information on the survey dashboard (“i” button)
  • Increase Awareness: Easily access badge information post-survey completion
  • Only Use 1 App: Access all resources via the hamburger menu

Reflection

Challenges & Takeaways

Our user testing phase showed us that we had tried to include too much information into our application, which made it confusing to use.

  • To fix this, we carefully examined each of our screens to decide what we really needed, and based on this, we were able to consolidate and better organize the information and features in our app to streamline the user experience.

Next Steps

If we had more time, we would definitely conduct a few user interviews and more rounds of usability testing to ensure that the user experience is as simple and as intuitive as possible.

--

--

We’re a student-run design consultancy @ UC Davis!

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store