Redesigning the core Envoy experience

Back in 2013, the first version of Envoy visitor registration was built. Over that time there’s been a lot of incremental improvements made to the app, but the overall experience mostly remained unchanged. We were long overdue for a significant update — it was time for a redesign.

First and foremost, we wanted to avoid this project being labeled just as a redesign. We needed a clear set of goals around which to align the team and a way to measure the overall success of the project. Hundreds of thousands of visitors sign in with Envoy Visitors, and we needed to ensure the changes we made focused on improving their experience over everything else.

More than just a visual refresh

When you have a couple of years between substantial updates, it’s easy to have a list of existing ideas that you want to tackle right away. But to go about this the right way, we needed to ground our efforts in quantitative and qualitative feedback.

In the quantitative department, we quickly realized we were lacking considerably in this area. We had some general metrics like overall sign-in time (roughly 40–50 seconds) but had no way of knowing which parts of the process took longer than another. Was it mostly spent typing in their email address? Were they reading through the NDA thoroughly? Was the photo-capture step resulting in multiple retakes? We needed clarity around where along this path visitors were having the most trouble. Ultimately, we decided this project was the perfect time to introduce more behavioural measurements so that going forward we’d know where to place our focus.

On the qualitative side, we had an easier time. Through the years, there had been many requests to improve the experience. Some people complained of small font sizes and difficult-to-fill-in sign-in fields. Others were taken off guard by the photo capture and wanted a more natural mechanism for re-taking a poor photo. Through these high-level themes, we noticed some low hanging fruit that we could address quickly. This was why documenting and prioritizing the project was invaluable. We pulled together a list of everything we needed to address and made a plan to tackle each item in the right order.

Where to start

Essentially this project boiled down to three main themes:

1. Visually refresh the product to take advantage of some of the incredible work our visual design team has been pushing out (new website, killer swag)
2. Include better analytics and behaviour tracking to inform decisions going forward
3. Fix outstanding UX issues and provide a better experience for visitors

With those goals in mind, we then divided the work into shippable pieces we could manage in two-week sprints. This was necessary not only to keep the project moving but also to deliver value in as little time as possible.

Analytics and design

Having a diverse team on this project meant we didn’t have to do everything one part at a time. The first step of this project was to do the basic design refresh and include new measurement points.

On the design side, this meant starting with just the very visual part of the project. Updating button styles, text styles, cleaning up inconsistencies and applying that new coat of paint across the app and a high level.

While the design was being done, the engineering team went through and added more tracking to the app. We added more accurate measurements of time spent per screen, as well as time spent on each of the sign in fields. We added as much as we could to ensure we knew where users were experiencing problems.

Addressing outstanding issues

Once we had a basic new design applied throughout the app, we moved onto fixing existing problems and experiences that were sub-par.

One experience, in particular, we knew we needed to tackle was the sign-in fields. This is one of the most critical parts of the entire experience, this is where the user inputs their personal information. It’s paramount this part of the experience is easy to use so they can provide accurate information about themselves.

The design of the current sign-in fields is a relatively simple design that had done the job for a while. However, one recurring theme that we heard over and over again was that many users found it difficult to recognize which field they were filling out. Because the labels were underneath the input line, it was frequently confused as a label for the field below it. This confusion started to appear in the new analytics we had begun to track. For example, we noticed instances of users taking upwards of 10 seconds to fill in an email field.

With this feedback in mind, we developed a new concept that would make it more clear which field was active, and which fields were remaining.

This is an excellent example of where design changes don’t have to stop just with just what was requested. Visually we enhanced the UI design beyond a simple form and infused more of our brand style to give the product a more cohesive appearance with the rest of our materials.

Wait, test it first

It was easy to assume that a change like this to the sign in fields was going to be better than what we had before, but we didn’t want to leave that as an assumption. We first needed to test to make sure this was the right adjustment to make. This started by building a simple prototype where we had people in our office test drive the new design; we would randomly change the order of the fields to see if they noticed and filled in the right information. Once that passed the test, we also ran the same experiment with some of our visitors and customers. This didn’t need to be a full scale A/B test, but a few gut checks along the way made us more confident in the final result.

This helped us build a first version that we felt confident in — but it doesn’t stop there. Now that the product is updated and released to everyone, we’ll continue to closely watch our new metrics to better determine if this new design is a success. For example, now that we have a sense of how long users take per screen, and even per field, we can see if this new if this new approach reduces the lengthy pauses we noticed before.

A product is never finished

Even in a few short weeks after the initial scoped out work was complete, we were seeing a few seconds begin to be shaved off of our average sign-in time. However, this time only tells part of the story. While it was the primary guiding metric for the project, we also knew that going forward, we’d have more data to work off of and a visual design that is more up to date with the rest of our brand. These were all significant wins for us.

We’ll never be done making changes to our product, but now we’ve set ourselves up to do a better job of rapidly improving the product going forward.

Thanks for reading! Be sure to visit envoy.design and subscribe to get notified when we publish something new.