New York State
Department of Health
2021
Work created while at IBM for New York State.#Product Design
#native apps
#App store marketing
#Public relations
Role
UI/UX Designer on a small team of 2
s. 01
Intro
In the winter of 2020, nearly a year after the start of the pandemic, IBM began working on a system of digital vaccination credentials for the state of New York. The project was something like multi-dimensional, involving at its core a digitized vaccine card to replace the easily forgeable paper ones. The data for the project would be provided by the vaccination and testing centers where patients got treatment. From an IBM perspective the idea was to create a system that could be rolled out first in New York, with several other states to quickly follow if/when the idea caught hold. Ultimately this particular solution to our covid vaccine credential woes did not take hold and instead found itself trapped in a political quagmire, alternately torn apart and praised by analysts according to their position on the spectrum. Our effort was organized and concerted up until the moment the product launched, a moment that coincided near perfectly with the project’s champion Andrew Cuomo losing all credibility and being booed out of office. Cuomo’s issues aside, our hard work entered the world as one of the most interesting developments in the pandemic, making it the perfect target for news organizations and political groups. We quickly found ourselves making small, nonsensical decisions to appease the governor’s office as they scrambled to cover their tracks in response to each new press article. For about 5 months I worked in opportunistic silence with a small team, under the design leadership of Stanton Ware, as we prepared what we all knew would be the most visible piece of work we’d ever have our hands on. There’s nothing marvelous about the aesthetic, the apps, or the portal, but it was a fascinating effort to be a part of.
Role
UX/UI, Visual Design
Team
2-3 Designers, 10+ Business Analysts
TaGs
Product design, design systems, native apps, iOS, Android, App + Play Store
s. 02
The problem at a glance
Existing paper vaccine cards were easily falsifiable and could not be used to trace potential outbreaks if necessary. A more secure verification of vaccine and testing status was necessary to safely get the world back to control the spread of the pandemic in public spaces and get the world back to where it was.Existing paper vaccine cards were easily falsifiable and could not be used to trace potential outbreaks if necessary. A more secure verification of vaccine and testing status was necessary to safely get the world back to control the spread of the pandemic in public spaces and get the world back to where it was.
Solution overview
The solution involved 3 separate parts that all worked off the data collected at vaccination and testing centers. That data can be put into a database and used to verify vaccination and/or testing status in order to provide a significantly more secure vaccination card. This card could then be used as proof that someone meets the state’s latest requirements upon entry to a restaurant, bar, museum, or other business.
s. 03
3 part system
1 web portal
The first step in retrieving your covid pass after getting vaccinated or tested.The Web Portal is a basic entry point to the Excelsior Pass program. Users log on, provide basic information to validate their credentials, and receive their passes. They can then use that pass to get into businesses according to the latest government guidance.
2 NY Wallet app
Securely store and easily retrieve your digital covid credentials.
The NY Wallet App is built to store your digital credentials from the state. Users have the option to use this app as well as native phone wallets after downloading their pass.
This app was created with the idea that it could be expanded as a space for other digital credentials, for example a hunting license.
3 NY Scanner app
Scan and verify passes at points of entry for businesses, museums, etc.
The NY Scanner App is designed to be used as an entry requirement to bars, restaurants, museums etc. Scan Passes when presented to verify their validity and the date of their last test.
s. 04
Retrieving your pass from the web portaL
Step 1
Notifying through email and SMSThe contact info users provide as part of the vaccination or testing process at registered centers across the state is used as a contact list. These users are notified within hours of their vaccination event.
Step 2
Navigate to the Web Portal to retrieve your passFollowing the link in the notification, or by accessing a widely distributed direct link, will take users to the web portal to begin the pass retreival process.
Step 3
Provide basic detailsThe process is brief, relying on very basic information for verification. See below for more on this topic.
Step 4
Verify your identityThe questions on this page are based on your last vaccination event. Questions like the type of vaccine you received, the name of the center, and the vaccination date were among the most common.
Step 5
Pass retrieval screenOnce the verification process is completed the pass is available for download. From there, it can either be printed and used as a physical card, or accessed through the NY Wallet App (or your native wallet app).
s. 05
data security concerns
At this point it can safely be said that the required data in step 3 above was too basic and too easily available, leading to the site being repeatedly and very publicly hacked by the shrewd, techy intellectuals at institutions such as The Daily Beast.
Of course the tech team was aware of this possibility, but the reality was that the data we had available was in such bad shape that only the most basic details could be reliably retreived. We had to find a balance between a more difficult verification that would use personal data that may or may not have been provided or properly recorded, a route that would lead to hundreds of thousands of users being falsely rejected while trying to retreive their passes, OR using simple questions that would allow for a much higher success rate and consequently much higher adoption at the admitted risk of a few hackers making us look bad. The priorities were such that our team took the simpler route.
s. 06
Wallet and Scanner native Apps
To make the passes useable we built two very simple applications, both using white-labeled IBM products as a base. The essential functionality was the ability to first retrieve the pass on demand, and second to verify the pass at points of entry.
New York Wallet App
Details
- Store your Pass here for secure use.
- Alternative to native phone wallets (unsurprisingly, most users preferred using their native phone wallets)
- Built off an IBM whitelabel product (reusable)
- Works on Android and iOS
- Tablet sizes included
A quick note on the Wallet App: For most of the team it seemed obvious that we could leverage existing native wallet app functionality, meaning there really was no need to create our own. Ultimately the decision was made to push forward with the custom app, with the idea that it could be expanded to house other digital credentials in the future, including things like hunting and fishing licenses. It’s not hard to imagine a digital drivers license as well but as far as I know we’re not there quite yet.
New York Scanner App
Details
- Validate credentials upon entry to any open establishment.
- Simple interface employs only the functionality it needs.
- Works on Android and iOS
- Tablet sizes included
s. 07
Design considerations
Designing for accessibility
Given the products wide reach across age ranges, ethnic groups, and technological legibility, accessibility was extremely important. One aspect of this (pictured above) was setting the content read order for native app users using the voice reader to navigate.
Designing for 11+ languages
All products had to be usable in a variety of languages. For “right to left’ languages like Arabic and Yiddish this meant a whole new set of screens to show how layouts would change, including reversing things like timelines or progress counters.
Designing for the App Store
Our team created promotional assets for both the App and Play stores. We created sample screens displaying the basic purpose and value add of the app, then translated those screens into all of our 11 languages and added each one of them to their respecrtive store pages.
Designing for native Android and iOS
We worked within and around iOS and Android best practices and guidelines for native apps. It was important to integrate smoothly with iOS and Android patterns when doing things like adding passes to the app, changing the apps language, or searching for a pass within your downloaded photos.
Branding, naming, and iconography
We didn’t have much control when it came to brand, but our team contributed the app icons and logo lockups based on the state’s existing branding assets. Standard colors and typography were carried throughout. We argued for a simpler name, one that was recognizable and could be pronounced easily, but we were not listened to.
Publicity and press materials
In an effort to explain not only the products but the entire initiative to the public we put together dozens of screens to be handed off to media sites, printed in store windows, and published on social media.
s. 08
final thoughts
Despite the chaos of the political moment this was an exciting project to be apart of. Many of my friends used the passes, and for me professionally it exposed me to a lot of nuances when designing on this scale. The actual products were incredibly simple, the biggest concern was the success rate for pass issuing with the cruddy data we had access to. From a usability standpoint we found ourselves up against myriad limitations but ultimately the product and the campaign was something like a successful first attempt at solving the massive societal shift brought on by Covid (depending who you ask!). To add to the political tension we found ourselves wrapped up in the corruption scandals of our projects main stakeholder, then Governor Cuomo. From the moment the campaign and apps launched they were hit from all sides with press including the opinions one would expect depending on political ties. We found ourselves rapidly and carelessly changing things in response to a bad press article as vague instructions/demands came in urgently nearly every day. Ultimately the system was rolled out in Indiana as well under the name Monarch Pass, using the same system we had set up and most of the same tech stack behind it.
press reactions
Next Case study
Shell Polymers
Toyota North America
Nomenclature typography
EIA Africa Geo-Portal
Discount Tire
Shell Polymers
Alex Sweet
Available for full time + Freelance© 2024 All work created and owned by Alex Sweet
Typography Site