CASE STUDY — RESPONSIVE WEB DESIGN

TestToday

Seven months into the global pandemic, Covid-19 testing in the United States was still falling short of its goals. For individuals, getting a test remains confusing and daunting.

I undertook this project—what I’m calling the Test Today Initiative—to address this urgent need by establishing a centralized, user-friendly, responsive website (for mobile, tablet, and desktop/laptop) that makes it easy for users to find out where and when they can get a Covid test; schedule their test; and get their testing-related questions answered.

MY ROLE

Lead and solo designer—discovery, user research, design, testing

DETAILS

Duration: 3 weeks
Design tool: Adobe Xd
Client: CDC (spec)

JUMP TO

Problem

Research

Iteration

Testing + Revision

Summary

Prototype

PROBLEM

In an October 2020 study conducted by Northeastern, Northwestern, Harvard and Rutgers universities and reported on by NPR, 35% of respondents had to wait 3 days or more to get a Covid test after they’d decided to get one; most then had to wait another 3 days to get results, meaning nearly a week elapsed, on average, between someone’s decision to get a test and that person receiving their results.

 

Regarding the lag between the decision to get a test and actually getting a test, the survey found that, per NPR, “one-third of people did not know how or where to get a test, 23% said the testing site was too far away, and 14% said the test was too expensive.”

The delay in people receiving their results, meanwhile, causes not only psychological and potentially financial strain on the individual, but is also detrimental to contact tracing, which needs to begin within 36 hours of exposure—an impossibility when testing and test results are delayed. The same study showed that nearly half of those who tested positive never received a call from a health official to start the contact tracing process at all. 

While affecting the test result turnaround time itself is obviously beyond the scope of this project, I wanted to address the questions of a) minimizing the time between someone deciding to get a test and them actually getting the test, and b) streamlining the process by which health officials track and contact people with positive test results.

 

RESEARCH: COMPETITORS + DESIGN PATTERNS

First, I wanted to get a sense of what currently exists in the way of Covid testing information and resources. I looked in depth at the web pages of city, state, and national governments and health departments, as well as those of private healthcare companies. I noted various issues with each, and used them to start an initial features roadmap for my product. I also thought about some design patterns I’d seen elsewhere that could be applied to my product to address some of the issues I’d observed. Here are a few examples.

NYC.gov's Covid testing page includes information presented in a Q&A format, with a list of testing sites. However, only mobile testing centers are listed under the “Where can I get tested?” heading; the addresses don’t link to a map; and no information is provided about walkups v. appointments, average wait times, costs, or who is eligible for a test. To add to roadmap: more details about each testing site; view testing sites displayed on a map.

The Centers for Disease Control's existing Covid testing page provides information about who should get tested, but its "how to get tested" section just directs users to state and local sites, like the NYC.gov site above. To add to roadmap: be able to get all the information you need about a site without having to call or visit a separate website.

Quest Diagnostics' Covid testing page is much easier to use than the CDC's or NYC.gov's. On their homepage, a banner invites users to learn more about Covid testing; the resulting page lays out a manageable amount of information, with CTA buttons for different types of test. Clicking the clearly worded “Active Infection Swab Test” button leads to an uncluttered page, with short paragraphs explaining who can get tested, how the test works, and where to get tested. The user soon discovers, however, that getting a test through Quest will require them to pay $119, with no option for insurance reimbursement.To add to roadmap: apply the principles of clarity and simplicity, used effectively here on a private company's website, to a public sector service.

As part of my research, I looked at websites unrelated to Covid testing, but which included design patterns that could be applied to my product. For example, I was drawn to the beautifully straightforward landing page of I Will Vote, a website created to help U.S. citizens navigate the byzantine process of election participation. To add to roadmap: a landing page with a few clear CTAs and absolutely nothing extraneous or confusing.

 

RESEARCH: SURVEY

Next, I designed a survey, to investigate whether my own experience, and hypothesis—that the process for finding out where, when, and how to get a Covid test is opaque and often overwhelming—was shared by others, and if there were particular pain points that my product could address. The survey was completed by 27 people, ages 18-75, in 10 US states and the UK, in October 2020.

When asked to explain in words how they found out, or would find out, where, when, and how to get a Covid test...

44%

said they'd use or had used Google

24%

said they'd get or had gotten information from a friend or family member

20%

said they'd consult or had consulted a city or state health department website.

Respondents were asked if they'd ever considered getting a test, then decided against it. The most common deterrents were:

52%

wait time at testing site

33%

cost of the test

33%

wait time to get results

30%

fear of exposure to Covid at the testing site

When asked about the features they'd like to see on a website about Covid testing,

82%

said the ability to schedule a test on the website

67%

said a map showing nearby testing sites

63%

said a map showing nearby testing sites

RESEARCH: PERSONA

I used these findings to create a user persona. (Even though in this case, the target user is “pretty much everyone” it was still helpful to have in mind an archetype of the person I was designing for.)

Joanna is a project manager at a New York-based startup. She lives in Brooklyn with her husband, and they’ve both been working from home.

Joanna’s parents, who are in their late 60s, live part of the year in South Carolina and part of the year in Philadelphia; they’ve just returned to Philly after six months down south. Joanna and her husband would like to visit her parents in Philadelphia; they have a car and it’s only a two hour drive. They don’t want to risk exposing her parents to Covid, however, so ideally, they’d want to get tested (and confirm they aren’t sick) before visiting.

Joanna gets health insurance through her job, but her deductible is high—she’s never actually met it—and she’s wary of surprise medical expenses.

Joanna’s schedule is always busy, and she dreads the thought of waiting in line for hours for anything, particularly a Covid test.

The Covid testing situation is definitely better now than it was in the spring, but it’s still way too complicated and stressful.

Concerns

  • Being exposed to/becoming ill with Covid

  • Unwittingly exposing someone else to Covid

  • Unexpected expenses, especially medical bills

  • Long lines at testing centers, re: both the time commitment and potential exposure to the disease

  • Long wait times between getting tested and getting results—are results even meaningful if it takes 10 days to get them?

Goals/Needs

  • Being able to visit her parents without the risk of exposing them to Covid-19 

  • Being knowledgeable and up to date about

  • Covid risks, symptoms, and testing

  • Knowing when/if she should get a Covid test

  • Knowing where she should go to get tested

  • The test being free of charge, or, at the very least, knowing ahead of time how much it will cost and if her insurance will reimburse her

  • Knowing when she can expect her test results

ITERATION 

With a features roadmap and a persona at the ready, I next went about creating a combination wireframe and lo-fi prototype using Adobe Xd. I wanted to be able to design individual screens based on how a user would move through the site, and the best way to visualize that, I felt, would be to experience those flows myself.

As I assembled this lo-fi prototype, I made sure it included the features from my roadmap, which was informed by my research: among other things, the ability to view test sites on a map, and get all the information about each test site—and be able to schedule an appointment—without needing to make a phone call or visit an additional website.

Once I'd established the flows and the screens I'd need, I went about the visual design of each page. I applied the CDC's branding, and created a hi-fi prototype. ​

 

TESTING + REVISION

Next, I recruited several respondents for usability testing. I sent each respondent the link to the hi-fi prototype and had them share their screen with me over Zoom; with their permission, I recorded the interviews. I gave them the following tasks:

  1. Look for information about the accuracy of Covid tests. 

  2. Use the self-assessment tool.

  3. Find a testing site that accepts walk-ins AND offers all test free of charge. Choose the one with the shortest wait time, and indicate that you plan to get a walk-in test here.

  4. Decide you’d rather make an appointment, and book one for November 2 at 1:30pm. 

I then asked each respondent a series of questions about their experience: their likes and dislikes, areas of confusion, whether anything was unexpected. I assembled their feedback into an affinity map, to help guide my revisions roadmap.

Armed with this feedback, I got to work applying the necessary revisions. Here are some examples.​

Some of the changes I made in response to the usability tests were tiny and simple, but had major impact. One respondent, for instance, said that not having the CDC logo on the landing page made her trust the site less. Simply moving the CDC logo above the fold and to a visually prominent spot eliminated the issue this respondent flagged. It was a minor issue from a technical perspective, but important in terms of the site garnering the desired emotional reaction from users.

Another seemingly small but nonetheless important issue was the appearance of the Call to Action buttons on the results page. In the prototype I presented in my usability tests, the buttons looked like this: 

During usability testing, one respondent said, "It took me a minute to figure out which button would confirm a walk-in test and which would make an appointment. I had to use some reading comprehension skills!" She said it in a self-deprecating way, but her observation was 100% right: the buttons required too much reading. 

In response, I redesigned the buttons, making them larger and adding icons. While the text in the original version is white on both buttons, in the updated version the blue button uses blue text and the teal button uses teal text. In combination with the icons, the colors make the buttons more visually distinct from one another: it's clearer that they do different things, and it's clearer what each button does.

Multiple respondents, when asked if there was anything they felt was missing, mentioned wanting more information listed for each test site. Some of these were requests were easy, like adding phone numbers. Others were more complex, as was the case with with wait times.

 

I'd initially thought of "wait time less than one hour" as a particular feature that some test sites would have and some wouldn't, so I included it initially as a filter option: I figured that if it was important to a user that the wait time be less than one hour, they'd apply that filter. But testing showed that users wanted to see wait times for every site, and were confused when "wait currently less than 60 minutes" appeared on some listings but not others, and that those others didn't have any analogous details (e.g. "wait currently 1-2 hours"). That made wait time less of a feature to be filtered for, I decided, and more of a standard piece of information, like a phone number, that each listing should have. I removed it from the filter options, and added wait time information, in bold, colored text, to each listing.

In the original version, "wait currently less than 60 minutes" appeared in the Filters list on the left side of the screen. If it wasn't checked, results would populate that didn't have wait times of less than an hour, but they wouldn't be marked as such—their wait times simply wouldn't be listed. 

In the updated version, wait times are listed for each test site, color-coded to instantly communicate the length of time (green for short, yellow for medium, red for long, and gray for not applicable). The list of filter options no longer includes any filters related to wait time. 

 

SUMMARY

After applying these changes, I assembled an updated prototype, addressing nearly all of the pain points my usability testers had identified.

With the revisions complete, I adapted the desktop design for tablet and mobile. For both of these devices, I made the two main blocks on the landing page vertical instead of horizontal so the Call to Action buttons would still draw the eye right away. I converted the language options to a drop-down menu to save screen space. 

With cases of Covid-19 surging worldwide, it's more important than ever that testing be accessible. Part of that means making it easy for everyone, no matter who they are, how well informed they are, and how much time they have to spare, and how comfortable they are with technology, etc., to be able to find out where, when, and how to get tested for Covid-19. 

 
spotify mockup.jpg