• kristensunny

Mini Case Study: TestQ

Test Q is an Android tablet concept app designed to streamline COVID-19 drive-thru testing


Project Overview

Role: UX Designer, UX Researcher

Contributions: Secondary research, proto-persona, user flows, sketches and ideation, wireframes

Tools: Figma, Procreate, Zoom

Team: 4 Designers

Platform: Android tablet app

Type: Hackathon


Project Constraints

Time: 24 hours

Scope: The project brief was broad and only specified that the app should be designed for a "hospital care system during COVID-19"

Resources: With a $0 budget and tight time constraints, we were unable to schedule user interviews or conduct primary research

Environment: Due to COVID-19, our team worked completely remotely



The Challenge

How might we design an application that allows nurses to seamlessly check-in new patients and communicate with patients, care providers, and rooms so there’s more time for patients and less paperwork?

I participated in this hackathon in early May 2020, when the coronavirus pandemic was on the rise in the United States. At this time, hospitals were in the beginning stages of figuring out how to support and care for a rapid influx of patients who were coming in to be tested for the virus. To streamline COVID-19 testing, many hospitals created external testing sites, but large amounts of paperwork cost time and slowed down the testing process.



Empathizing with Nurses on the Front-Line

Since we had limited time and resources, our team decided to conduct secondary research into the current state of COVID-19 testing, as well as what hospital workers experienced while on the front-line. One of the resources that the hackathon provided was a video of COVID-19 drive-thru testing, which helped us narrow down our problem space**.**


Given the time constraint, we were unable to schedule user interviews, so I primarily focused my research efforts on recent publications including news articles, videos, and blog posts. I discovered that nurses were the main type of workers conducting drive-thru testing and that some of their high-level pain points were delays in caring for patients and time-consuming paperwork. It was clear that saving time should be a crucial factor in our design.

From our secondary research, we created our proto-persona, Nurse Nancy, to help us empathize with front-line workers.


Proto-persona, Nurse Nancy



Multiple Lanes

From our research, we learned that high-risk patients (like the elderly or people with pre-existing conditions) might need a testing area with additional safety precautions, which could further lengthen the testing process. In addition, we learned that patients typically interact with nurses at two points in the process - one when checking in and one during testing. Thinking about ways to streamline the drive-thru testing process, we visualized a testing site with two lanes: one for low-risk patients and one for high-risk patients.


At the time of the hackathon, getting COVID-19 tests results took between 24 hours to a week. So, to further narrow our project scope, our team decided to focus on the check-in process.

Our hypothesis was that extensive administrative paperwork was one of the main causes of delays in COVID-19 drive-thru testing.



COVID-19 drive-thru testing in May 2020


Armed with a better understanding of the goals, motivations, and pain points of nurses at COVID-19 testing sites, we defined our problem statement:

Nurses need a way to quickly, safely, and easily check in patients for COVID testing because they want to provide care for as many patients as possible.



Ideation

Sketching individually, I wanted to focus on ways to save time during check-in, since this seemed to be the primary cause of frustration during testing. I came up with three main concepts:

  1. A QR code that patients would fill out prior to coming to the drive-thru. Nurses would scan the QR code, which would auto-fill information on the patient's check-in form.

  2. A drive-thru kiosk to maintain social distancing. Patients would be able to speak into the kiosk to fill in the form. Similar to ordering food at a drive-thru!

  3. After the check-in form has been filled in, an alert based on patient risk level would pop up to notify the nurse about which lane the patient should be assigned to. After being assigned to a lane, the nurse at the testing station would have all of the patient's information in his/her queue.


My sketches focused on saving time during check-in



After discussing our individual sketches, our team decided to focus on our MVP flow:

  1. Check-in dashboard with overview of patients

  2. Floating action button to select different ways to input patient information

  3. ID scanner

  4. Check-in form auto-filled with patient information

  5. Modal with automated lane assignment


Wireframes

Since our user, Nurse Nancy, wouldn't be able to have a laptop or desktop in a drive-thru testing environment, we decided to design a tablet app. We chose to design for Android after a quick Google search told us that they're the most popular and affordable devices for nurses to use. With limited time, our team decided to split up the wireframing and visual design work. I volunteered to wireframe the ID scanner and check-in form.


Mid-fidelity wireframes of ID scanner (left) and check-in form (right)



As I was creating the patient check-in form, I thought about how nurses currently filled out paperwork at COVID-19 drive-thru testing sites. They typically used a clipboard, held vertically, so my first rounds of wireframing used a vertical layout, as seen above. Most of the information would be auto-filled, with a progressive disclosure layout for the sections to keep the form short and easy to scan, but that would also allow nurses to edit information.


After discussing with my teammates, we decided to further shorten the form to streamline the check-in process. As we took our wireframes into mid-fidelity, I iterated on the check-in form to focus only on patient information, current symptoms, and high-risk indicators. I also switched the form to a horizontal layout, so nurses could hold the tablet with both hands, enlarged the buttons, and placed them in the thumb zones.


Final mockup of check-in form



Final Mockups


Final mockups of MVP screens


Check out our final presentation here: submission deck



Final Thoughts

Go, go, go

This was my first hackathon, and I enjoyed the thrill of conducting guerrilla research and rapid iteration. But looking back, I would have adjusted our (quickly put together) project roadmap to better plan time for all parts of the design process. Our team wanted to build a solid foundation for our design, but I think we spent too much time in the research phase and should have devoted more time to iterations and wireframing. We also spent a lot of time debating our ideas up front before settling on our MVP, when it would have been better to quickly choose the idea that best fit with our problem statement and iterate as we went.