Iterating on a branded touchless experience in light of COVID-19
Mobile, iOS, Android
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.
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.
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.
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.
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.
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.
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.
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.