Design challenge: What should vaccine credentials look like?

A report produced for the Linux Foundation outlining the design criteria for both a digital and physical vaccine credential.

Elle Marcus
UX Collective

--

Yellow world health organization vaccination certificate next to a stack of mask filters.
Image from Unsplash

As vaccines started to become available, a major question began to pop up: will businesses require proof of vaccination status? Immediately post-vaccination, you were handed a small, handwritten card with your name and vaccination dates. In a matter of weeks, individuals who did not wish to receive the vaccine began fabricating their own cards from the thousands of vaccination cards uploaded onto social media. If businesses are going to require proof, a more secure method is necessary.

With the rise of cases caused by the Delta variant, this controversial mandate is now becoming reality. According to Forbes, some bars and restaurants are considering mandating a vaccination requirement in order to enter. Many universities are requiring vaccinations in order to return to campus. There are many logistical aspects of vaccine mandates that need to be designed, and this article provides guidance on the design criteria for both a digital and physical vaccine credential.

This article is an overview of a report created as part of the Covid-19 battle efforts of the Linux Foundation Public Health. The report contains a literature review of credentials (both mobile apps and paper credentials in development), credential use cases, design criteria, and survey results that gained insight into users’ mobile tickets and mobile wallet usage. View the full report on Github.

The major challenge in storing vaccination data is accessing that stored healthcare data to form verifiable credentials. This article will focus on the design criteria that developers may keep in mind when designing the user interface and flow of a vaccine credential application (and will not cover any suggestions for retrieving this data).

Where would vaccine credentials be used?

With the increasing talk of businesses, schools, and other establishments expressing the need for vaccine credentials, this report examined multiple classifications of establishments. The types of establishments that users visit can be categorized in a variety of ways. A public transit station may be frequented by the same user every day, and in addition, be frequented by a high volume of users at once. A sports stadium may not be receiving users on a daily basis, but when there is an event they receive many customers within the span of an hour or two.

a 4x4 matrix with y axis low frequency to high frequency, and x axis low traffic to high traffic. Upper right quadrant is red and contains the text “public transit station”. Upper left quadrant is orange and contains the text “hospital (employee), school, corporate building, and grocery store”. Hospital, school, and corporate building are labeled as establishments with enrolled personnel. Lower left quadrant is green and contains the text “Bar/Restaurant, Hospital (patient), and airport”.
Graphic by Elle Marcus

I have split potential establishments into 4 use case categories:

  • high frequency, high traffic
  • high frequency, low traffic
  • low frequency, high traffic
  • low frequency, low traffic

These scenarios can help determine how the vaccine credential information is presented to the organization when entering their establishment. For example, if you were going to a sporting event, your ticket could link to your credentials. The ticket and credential info form one QR code that is scanned at the venue. Of course, this could apply to any establishment where a ticket is required in order to enter.

In cases where users are in high traffic, high-frequency areas such as a public transit station, it’s essential that any credential can be presented swiftly and efficiently.

Design Criteria for Usability

Holding up an app for the purpose of having another user or system interact with your phone for a brief period of time bears some resemblance to two other apps: mobile wallets and mobile tickets. I conducted a survey to learn more about how users interacted with these types of apps. In addition, I asked questions about carrying paper tickets and transit cards. The method that they carry their ticket or card may provide insight into how a paper credential can integrate into the user’s day-to-day life. Some concerns around paper credentials are damage or misplacement, and I wanted to examine how these concerns could be mitigated.

The survey received 60 responses. Users who were not planning on getting vaccinated were screened out.

The survey revealed that 75% of users preferred mobile tickets to paper, while only 18% preferred to use a mobile wallet over physical credit cards. Users commented that they preferred mobile airplane tickets to paper because their smartphones are already an essential item that they will not leave behind, whereas a paper ticket is an extra item to keep track of.

However, that logic did not apply in the case of payment methods. 18% of respondents expressed concern over a lack of privacy with mobile payment methods. 18% of respondents also commented that they used physical credit cards “out of habit”. Perhaps since users typically use airplane tickets less frequently than credit cards, the transition to mobile airplane tickets was not disruptive. However, the frequent usage of credit cards has become a habit, and the benefits of a mobile wallet do not outweigh the effort of changing a habit. Furthermore, cards are kept in a wallet, an item that most users tend to already bring with them.

“The benefits of a mobile wallet do not outweigh the effort of changing a habit.”

Since many respondents have not tried using mobile wallets, I chose 4 respondents who indicated they had not used mobile wallets to participate in a cultural probe. These participants ranged from age 26–32. The participants were asked to journal their experiences of using a mobile wallet for the first time to pay for an item. All participants reported feeling comfortable with using the app, with a couple of participants mentioning that it was “a lot easier than [they] thought” and that they are “considering changing to only [using] mobile wallets”.

Overall, respondents felt very comfortable using these apps. Based on the cultural probe, users in their 20s andn 30s seemed to be able to adapt to new apps quickly. The design flow of a credential app may be more intuitive to a user if it resembles popular mobile ticketing and wallet apps.

A gap worth noting in this study is that there was only 3 respondents who were age 55 or older (although 2 out of the 3 respondents preferred mobile tickets over physical tickets). According to Smashing Magazine, the elderly demographic may be less experienced with technology, and designers should keep in mind best practices for accessibility.

What features would be in the app?

One of the quickest forms of data verification is a QR code. A QR code maintains user privacy since information of what is embedded within the QR code does not need to be displayed in order to be verified by the scanner’s system. Privacy was noted as a concern to users in the survey regarding mobile wallets, and one can assume that this privacy concern applies to vaccination credentials. US Officials and experts at the Ada Lovelace Institute have also mentioned that privacy is a priority when designing a credential.

Many organizations (such as schools and airports) are not solely relying on vaccinations as their only line of defense. Stat News also mentioned that we should not rely on vaccines as our only line of defense. As organizations continue to do symptom screening, it’s important to consider this feature in a vaccination app in order to create a one-stop-shop for the user.

In addition to the above, a starting list of the features a designer should consider include:

  • QR code containing vaccination, test, and symptom data
  • Explicit vaccination data
  • Explicit covid test data
  • Symptom checker
  • Specific custom passports required by organizations
  • Link to Covid-19 CDC Resources

What will the back end look like?

Although this article is not offering recommendations on how to obtain back-end data, a theoretical back-end administrative system can help illustrate the user’s interactions with this app.

Some establishments may not have the budget or IT infrastructure to install QR code scanners. If the establishment does not have a QR code scanner available, the administrative user can create a personalized QR code to print on a sheet of paper. The user can scan this QR code that can pull up a check-in page on the app (see photos below).

As mentioned earlier, some establishments such as schools require symptom checking and negative Covid-19 tests in addition to vaccines. The establishment’s administrative system can set recommendations for how often they would like their users to be tested and perform symptom checks. The user can receive reminders in their app, and a specific QR code for that establishment will be generated based on the establishment’s requirements.

Security

During the onboarding process, the user should be required to upload a photo of themselves. This photo can be scanned and cross-referenced with an uploaded ID to verify the user using biometric software. If the user does not have an ID available to upload, their photo can appear alongside their credential information. The person in the establishment checking credentials should match the user with the photo if they choose to use this credential system.

A designer should consider having an animated element on the credential page. This element could be a green dot or text fading in and out. This is to prevent the credentials from being screenshotted and forwarded to a non-user. Another line of defense to ensure validity is that the QR code will automatically regenerate every day.

At this time, there are no existing government policies that dictate what information needs to be shown at certain establishments. The data elements that appear in the following low fidelity wireframes are purely conceptual. Please note that these wireframes do not represent a high fidelity, production-worthy design.

Specific Use Case Scenarios

Now that design criteria and general use cases are established, there are 3 specific scenarios that pertain to how the user and establishment will interact with the app.

  1. The user visits an establishment that uses a QR code scanner, and will need to present their QR code. That QR code needs to be in a prominent location in the app to allow for fast access.
2 Wireframe mockups of vaccine credential app. Left mockup shows homepage with a QR code, and lists two organizations with custom QR codes. Right mockup shows enlarged QR code.
Low fidelity concept design by Elle Marcus

2. The user is at an establishment that doesn’t have a QR code scanner. The business will present a printed QR code. The visiting user will scan the printed code and be redirected to their vaccine credential app to reveal their vaccination status and check-in.

2 mobile app wireframes. Left wireframe shows the app scanning a QR code, right wireframe shows the restaurant that user is checking into.
Low fidelity concept design by Elle Marcus

3. The user is at an establishment that may or may not have a QR code scanner, and also requires additional information in addition to vaccination status (i.e. ID verification, symptom check, COVID-19 test). Therefore, the QR code should still be in a prominent location, but additional information required to verify a user should be easily accessible beyond the QR code.

4 mobile app credential wireframes
Low fidelity concept design by Elle Marcus

Alternatively, the establishment could require a code specifically generated for its establishment. This would be most appropriate for use cases where the establishment is highly frequented and the user is affiliated with the organization as an employee or student.

wireframe shows homepage with a QR code, and lists two organizations with custom QR codes
Low fidelity concept design by Elle Marcus

The establishment will dictate their additional requirements. If they would like to see negative Covid-19 tests and symptom checks, the user will be alerted under the “Report” tab.

mobile app wireframe shows buttons to upload test results and screen for symptoms
Low fidelity concept design by Elle Marcus

Note: It would be simpler for all necessary data to be populated into the main QR code, with no need for additional customized codes. At the time this report was written, the author felt there was not enough information to determine the proper flow based on what may or may not be feasible in the backend.

What if the user doesn’t have a smartphone?

Similar guidelines can be followed for a paper credential. MIT developed a concept for a tri-fold credential. The purpose of the tri-fold is so the user may choose to conceal certain information strategically placed on different faces of the credential. In order to avoid damage or misplacement, this design can be improved by adjusting the dimensions to a wallet-sized credential.

MIT tri-fold paper credential concept

These suggested features and data elements can serve as a guide for those developing a vaccine credential application. The criteria were established based on usability and mitigating falsification. Please see the attached report for more details about the following:

  • Use cases
  • Digital and physical credential design criteria
  • Literature review of digital and physical credentials in development
  • Survey conducted to learn about users’ mobile tickets and mobile wallet usage.
  • App concept modeling data elements

View the full report on Github.

The UX Collective donates US$1 for each article we publish. This story contributed to World-Class Designer School: a college-level, tuition-free design school focused on preparing young and talented African designers for the local and international digital product market. Build the design community you believe in.

--

--