Iterating on a branded touchless experience in light of COVID-19

Completed

2020

Role

Product Designer

Platform

Mobile, iOS, Android

My Role

At Envoy we have a small but mighty team of visual and product designers working on complex problems at a pretty furious pace. As a bit of respite from months of work on our billing platform, I got to work on a few mobile projects to free up some bandwidth for our lead product designer. I kind of got my start in product design working on dashboards and mobile apps, so I was very excited. I worked as the design owner of this project and collaborated closely with our insanely talented iOS and Android engineers.

Older invite screen
Why's Jon so blurry back there?

The Problem Space

Through the middle of 2020, we've been working hard to implement our new brand guidelines. Inside that initiative was a project to update our invitation info cards and subsequently iterate on our touchless sign-in feature.

The first problem here was that the invite card felt out of place in the newest version of our mobile platform. This was primarily a stylistic change and update to the interactions in the app. For our iterations on the touchless sign in we would need to think about the touchless experience as well as some edge cases where a visitor might not have

Challenges & Constraints

Our primary constraint for invites was our departure from HIG and Android design guideline defaults in several places, so matching our visual patterns was crucial. For our iterations on the touchless sign-in experience, we were adding a feature that required visitors to be in the building, near an Envoy kiosk to be able to sign in. We called this feature, Presence Required.

The Work

PMs are in short supply at Envoy, so product designers have been acting as product owners where necessary. For this project, our lead product designer acted as the product owner. I worked closely with him to define the needs of our brand, our customers, and their visitors in light of the COVID-19 crisis.

Another bit of context here is that we had just transitioned a lot of our teams to start building COVID response software. We had also swapped our team to Figma from Sketch in the weeks leading up to this string of projects, and we were learning rapidly how that tool switch could supercharge our workflow and our ongoing work to build a usable pattern library.

Visitor Invites

There were a few possible patterns we could use for this new invite and detail screen. We opted to go with a modal that was more custom and kept with our updated branding.

Updates to previous invite UI moving it into a more traditional modal
UI updates to the Visitor Invite View the prototype

The ability of a Visitor to see the information about her invite without a lot of cruft was crucial. Upcoming visit invite cards would live in the profile tab above the passport section, and our Visitors would be able to check-in, see visit details, and see clearly when their visit was scheduled.

The workflow with edge cases
The workflow for presence required with the two main edge cases

Presence required

For Presence Required there was a pretty robust workflow that included some edge cases that needed to be addressed. The feature uses Bluetooth Low Energy (BLE) beacons to ping the phone to check proximity and permissions. There's a possibility that Location Services might not be enabled os we needed to design for that.

screens checking for location services
Enable Location Services View the prototype

The other case we needed to be cognizant of was just that the Visitor might not be close enough to the kiosk. In this case, we would give more information and direct the Visitor to the iPad as much as possible. The Visitor would get a view of the touchless sign-in process in the previous emails, so there's an assumption of at least a passive understanding of how the process would work.

An alert for a user to get closer to the Envoy Kiosk
UI updates to the Visitor Invite View the prototype

Wrapping up

All in I think we spend 2 sprints sorting out the design and engineering for these projects. We're still measuring the net effect and usage on these but in the current climate it's very rewarding to be working on projects that actively protect employees and visitors as the world struggles to repoen.