Vsafe -a mobile health passport wallet

Narrative and visual design project

About this project

THUMB.png

Concept overview

This app collects users' COVID vaccine records, COVID testings, and digital IDs and generated them into QR codes with the necessary information that users can present anywhere when a COVID health check is needed.

Statement of need

People need a device to store and collect all the necessary health documentations and present them easily when needed during the COVID-19 pandemic in a safe and easy way.

Target audience

Any iPhone users, especially those who need necessary trips frequently at the moment,

Learning goals and objectives

Goals

Travel safely during the COVID-19 pandemic by following the restrictions and health check requirement

Objectives

By using this app, users will be able to:

  • Digitalize important health documentations (COVID-19 vaccination record card, COVID RNA test results, COVID antibody test results), as well as important ID documents (passport, Driver's license, identification card, etc)

  • Understand what are those required health documentation for the upcoming travels’s heath checks

  • Understand basic COVID-19 symptoms and check from time to time if the users are feeling unwell

  • Prepare all the most updated required health documentation ready for commuting or traveling during the COVID-19 pandemic

Design thinking

Up to March, according to New York Times, about a third of the U.S. population has taken at least one dose of COVID vaccine. More states are expanding their vaccination policies to other age groups as time moves on to meet Biden's vaccination goal of “200 million in his first 100 days in office.” The Biden administration said this week that it will leave it to the private sector to create a mobile digital vaccination passports app for safer and easier access, and New York is actually launching the nation’s first vaccination passport app called “Excelsior Pass” which small businesses, venues and entertainment will be able to start to use it from April 2, 2021.

Presenting one’s health documentation is like presenting one’s story of how safe and healthy people are. It is a prove of how safe someone is, and also a shout-out of someone’s awareness of public health and safety. This is a narrative that is extremely important during this given time, and the information presented should be easy accessible and visually readable for both the users and stakeholders who are checking this documentation.

As a designer, I think it would be super useful if people can present their vaccination records and COVID testing results when they are needed without carrying a bunch of flimsy papers. QR codes that record all the health information can be super easily accessed in a touchless and safe way. At the same time, users should be able to understand different requirements and restrictions for different kinds of commuting, travels, or trips so they can take the required tests and prepare the documents ahead of time. My app features on:

  • Generating QR codes for some most commonly-used health documentations (eg. COVID-19 vaccination record card, COVID RNA test results, COVID antibody test results), as well as important ID documents (passport, Driver's license, identification card, etc)

  • Serving as an information hub for checking policies for different kinds of trips include:

    • International or domestic flights, trains, subways, etc.

    • Small venue gathering (cinema, bars, restaurants, museums, etc)

  • A health daily checker system to self assess if the users are “COVID-free” when they feel unwell

An app with all these functions can make people's lives easier without carrying or forgetting to carry healthy documentation, and also maintain the public safer by reducing the physical interactions between people in order to keep safe and secure.

Design process

Tools used: Figma

I chose Figma for this prototype, which I am already pretty familiar with it. As for the color palette, I chose brighter colors in order to enlighten

I chose a color palette that is bright and charming to enlighten the audience's moods, also as a signal for the most important information such as “vaccinated”, “negative”, “positive” and so on. The interface is aimed to be minimalist and easy to read rather than cluttered with a lot of text and icons. Most of the design layout follows visual design principles.

The followings are my initial storyboard and my prototype design interface.

Stroyboard (click to view)

Stroyboard (click to view)

Figma prototype design interface (click to view)

Figma prototype design interface (click to view)

Design rationales

Mayer's Cognitive Theory of Multimedia Learning (CTML)

The design of this project follows a number of Mayer’s CTML design principles and visual design principles in order to create a clean and effective design to reduce the extraneous load and maximize germane load when users are using the app. Here is a list of CTML principles I used for this prototype:

  • Coherence Principle → Balance

  • Spatial Contiguity Principle → Visual hierarchy

  • The Image Principle → Simple illustrations made of lines, shapes and points

  • Signaling Principle → Scale and color contrast

Color theories and visual design

For this project, I chose to use analogous color schemes use adjacent colors from the color wheel, which fits the theme of “travel” and “health”, creating a sense of pleasing, calming, informative, and security. The analogous colors usually have one dominant color, and a secondary color that supports it and the accent color is served to highlight the different information. In action-orientated tasks and designs, analogous color schemes are not only pleasing to the eye, but can effectively instruct the consumer where and how to take action.

 
colors.jpg
 

Prototype

A clean homepage navigation with three features upfront

A clean homepage navigation
with three features upfront

Add new passes by scanning the testing report or record cards instantly

Add new passes by scanning the testing report or record cards instantly

Stacked passes allow users to access different passes with minimal scrolling

Stacked passes allow users to access different passes with minimal scrolling

Accurate information extraction from the photo saves your time

Accurate information extraction from the photo saves your time

Add new any pass anytime within a few clicks

Add new any pass anytime
within a few clicks

Your new pass is ready to be used!

Your new pass is ready to be used!

Please see interactive prototype here:

 
 

Limitations and future work

Due to the time constraints, I did not have time to conduct proper user research on users’ needs for health passes - all the functions are built upon my own assumptions and health requirements that are on the news. I also did not have time to conduct a usability test on the application. This project is clearly not built from a proper UX perspective but more from a visual design perspective. If I have time, I would like to start by using the double diamond iterative design model from the analysis phase to research, then to the design phase and iterate the whole process in order to build a user-centered app.

Reference

Cousins, C. (2019, March 30). Principles of Color and the Color Wheel. Codrops. https://tympanus.net/codrops/2012/02/28/principles-of-color-and-the-color-wheel/

Decker, K. (2020, July 7). The fundamentals of understanding color theory. 99designs. https://99designs.com/blog/tips/the-7-step-guide-to-understanding-color-theory/

How to Use Mayer’s 12 Principles of Multimedia Learning [Examples Included]. (2020, July 24). Water Bear Learning. https://waterbearlearning.com/mayers-principles-multimedia-learning/

Rio, G. M. N. (2021, March 29). Covid-19: About a Third of U.S. Adults Have Received at Least One Dose of a Vaccine. The New York Times. https://www.nytimes.com/live/2021/03/27/world/covid-vaccine-coronavirus-cases

Torre, J. (2019, December 9). 10 Basic Principles of Visual Design - Prototypr. Medium. https://blog.prototypr.io/10-basic-principles-of-visual-design-55b86b9f7241

Weaver, S. (2021, March 30). Excelsior Pass, the nation’s first vaccine passport, launches in New York. Time Out New York. https://www.timeout.com/newyork/news/new-york-launches-the-nations-first-vaccine-passports-032921