COVID-19 Screening Portal — a UX Case Study
A Redesign of the UC Davis Daily Symptom Survey
--
Design Interactive Fall ’21 Cohort Project
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.
Awarded: Most Customer-Centric and People’s Choice
Meet the Team!
Project Timeline
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
On the survey, we had a mix of multiple choice and free response questions. We made sure to word our questions very objectively and to leave the responses open ended to minimize any potential bias from us who were very familiar with the process already.
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.
In the case that we needed more data and to understand the user experience more thoroughly, we
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:
- Easy to forget to schedule COVID test & filling out COVID Symptom Survey (both when to take and upcoming tests)
- Non-linear process of scheduling COVID test appointment
- Tedious process of taking the Daily COVID Symptom Survey
- Unaware of the different types of results after taking the Daily COVID Symptom Survey
With those user pain points in mind, we sketched possible solutions and we voted on which ideas presented the best solutions to our researched user pain points:
Key solutions we wanted to implement were:
- 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
Our revised problem statement:
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.
From the key features we consolidated on from our ideation sketches, we mapped out the user flow and consolidated the process into six steps and a single app for the entire COVID screening process.
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.
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.
We asked UC Davis students to complete realistic tasks to ensure each flow of our prototype was clear and concise. We also focused on the navigation of the app, making sure each feature was not hidden.
Tasks we asked users to complete were:
- 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: We decided to change the design of the “upcoming test” button because we found that users struggled to access the QR coded need when taking their COVID test.
Figure 1.2: We also discovered that there was duplicate information on both the Home Page and Scheduling a COVID Test Page. This created cognitive overload and confusion within the users when navigating through the screens. With the removal of the duplicate information, we also removed the navigation bar because we discovered that all the information could be displayed on a single page.
Figure 1.3: We also removed the progress bar of the Daily Symptom Survey because it displayed the same information with which question the user is on. User also expressed confusion on the function of the two back buttons as they were used by the same icon. To eliminate the confusion, we changed the close button to an “x” icon while keeping the back button as a chevron left button.
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.
Overall, we re-evaluated what information was truly necessary to include on each screen, reorganized that information, and established clearer visual hierarchies.
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
- 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
Immediately learn about your badge restrictions with a simple click
Action items are directly linked on the Survey Results page
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
- 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
Unlike the current system that displays dozens of appointment times at 5-minute intervals, testing windows consolidates the content on the screen and users can minimize scrolling.
—
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
Unlike the current scheduling process, we added an auto-schedule function because users often want to take their COVID tests at the same time every 14 days to stay on track.
The next testing date automatically shows up on the home page after the previous appointment is complete.
—
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.
This short-term project essentially reinforced that learning how to prioritize user needs and establishing a clear hierarchy of focus for each app screen or website page is vital for an intuitive 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.
Currently, for professors and workplace supervisors to use the survey results, they have to manually check each student or employee’s survey results. If we were to further develop this app, we would also like to figure out a way to address this issue to maximize efficiency.
