UX for a pandemic response

Local government is a unique place to be a designer. In the San Francisco Digital Services team, we get to focus on accessibility, user needs, and the impact of our work on real problems in real people’s lives.

This year especially, we’ve been directly involved in COVID-19 response. From delivering critical official information to bringing services online, we’ve applied our design skills to address the pandemic from inside the heart of the City’s COVID-19 response. At a time when much of the world felt like it went on pause, we had plenty of work to do.

Here’s how the COVID-19 pandemic has affected our work across three projects.

Graphic design at the Emergency Operations Center

When they start their employment, every employee of the City and County of San Francisco agrees they could be called upon to respond to a disaster. This seemed like a faraway thought… until the pandemic! One of our UX designers, Scott, has been deployed as a Disaster Service Worker (DSW), reporting to the City’s Emergency Operations Center since March.

DSWs can do many different jobs, such as managing press conferences or distributing personal protective equipment. Scott drew upon his past experience working in the City’s print shop to design the now ubiquitous posters that San Franciscans have been seeing all over at bus stops, parks and storefronts.

Posters were translated into different languages and placed around the city.

Although this meant taking a break from working on digital services to work on posters and flyers, principles of user experience can still be applied.

Readability, translations, and accessibility were more important than ever. Complex scientific information needed to be simplified into streamlined messages to the public. And a consistent, recognizable design helps reassure people that information is accurate and official.

This poster needed to convey that masks help protect others, not just the wearer, and that a variety of items could be used as face coverings if you don’t have a mask.

Working at the Emergency Operations Center requires urgency and quick collaboration. The team of DSWs had to respond to rapidly changing information with high stakes, sometimes with only a matter of hours to deliver new designs. But the successfulness of the designs can be measured by the demand — the outreach toolkit has been useful for downloading materials for both individual people and businesses.

The outreach toolkit has options for business owners to download and print their own materials.

The SF.gov website

The pandemic led to a massive increase in traffic to SF.gov. The website is one of our ongoing projects and had been growing slowly as we work with departments one-by-one to migrate their old websites. However, with the flood of new information, and people’s need to get it from a trusted official source, it has become a “go-to” place for government info and services.

Traffic spiked in mid-March, and leveled out at around 5x what it had been.

The number of people actually interacting with the City via the website has also grown, measured by the number of form submissions.

While it may seem like we spun up a bunch of new webpages for COVID-19, what you see on SF.gov is a result of many months of prior work to create templates and information architecture structures. We were lucky to already have the bones in place to support the influx of content. For instance, we had recently designed and built the template for the SF.gov/coronavirus page, although we hadn’t envisioned this use case! It was also connected to other pages on SF.gov, meaning we weren’t creating another new government microsite in a silo.

This really reinforced how important it is for templates to be built flexibly (one of our design principles). When we created the Step by step template, we planned to use it for things like getting a cannabis business permit. It found a somewhat unexpected new life in use cases like explaining the reopening timeline.

The SF.gov page explaining the City’s reopening plan

Meanwhile, features that once felt minor at a small scale suddenly were critical. For instance, a “back to top” button on lengthy pages, or automatically collapsing lists of services into accordions on mobile. Our alert banner had seemed like something that might be nice to have, someday, in case of a major earthquake perhaps. We thought it would be used in the rarest of occasions. Unfortunately, we found ourselves needing to use it all the time!

For us, having sensible web templates and components is another aspect of disaster preparedness.

When the pandemic hit, it definitely stress-tested the templates we had built. Going forward, we can use this experience to design more flexible templates, but also to reassess the ones we already have. When you see something you designed being used in a way that you did not intend, it’s a chance to reflect on whether something requires a new solution, or if there is more you can do to better meet the need.

Checking your health before going to work

Aside from getting information to the public, we also worked on tools and services to keep things running during a pandemic.

Our UX designer Nicole worked on a vital tool for City staff to verify their health before reporting to work. Some City services (including the Emergency Operations Center) depend on staff being physically present — a tricky prospect in 2020. We needed a tool for them to answer basic health questions, then generate a screen they could show as a “pass” when entering a City building.

Although it seems relatively easy for employees to have simply answered questions from a paper list, doing it online meant their answers could be collected in a daily report for department heads. Plus, the employee could get a confirmation screen that clearly tells them (and their workplace) whether they are “Cleared for work”.

This was our first form that provided dynamic confirmation screens after submission.

In only a week, the team launched an online form for City staff to answer questions about their health, as well as the back-end tools for editors to create different confirmation screens. Getting forms away from paper and PDFs is a big problem for us to tackle, so this was important progress that paved the way for more forms and services since then.

One thing made this form different from most other government forms: people use it on a daily basis.

After talking to City staff and doing usability testing, we made a few improvements to focus on the use-case of a tool used repeatedly by “expert” daily users. First, we used browser cookies to save people’s data, so they don’t need to retype basic things like their name and workplace address. We also streamlined the flow from 7 pages down to 3 by grouping the questions by topic.

We still expect to be working remotely for a while, focusing on helping our partners in other departments bring their services online. Despite the difficulties of this year, we’re so glad we had the opportunity to impact the City’s coronavirus response, and we’re looking forward to continuing the work in the new year.