Notarize
Team: Sam Restivo (Product Manager), Katie Adams (UX researcher), Zach Hulse (Engineering lead)
Problem
As a team, we focused on signer conversion rates and identified a critical bottleneck: the audio-video (A/V) connection step. Mixpanel data shows a monthly drop-off rate of up to 16% at this stage, and 10% of support queries stem from users facing challenges here. How can we design an experience that minimizes drop-offs during A/V setup and reduces the reliance on support channels, empowering users to seamlessly establish A/V connections without impediments on both desktop and mobile web?
Current A/V check experience 🔬
Goals
Business: Increase in user conversion, and a decrease in support tickets.
Product: Encourage exploration and re-design of parts of the product that have not been looked at in years.
Challenges and limitations
Our engineering team is constrained due to ongoing customer commitments, slowing down the project. The A/V check involves complex browser permissions, with users often automatically declining or disabling them, adding layers of complexity. Anticipating how to assist users beyond our product interface poses a considerable challenge.
Current flow
Initial Brainstorming
Today, a user lands on an introductory page and the continues to set up their A/V settings.
Current intro page before A/V check begins 🔬
.png)
Current A/V check experience 😅
In the current setup on desktop and mobile web, users face issues with the visibility of their internet connection status, often needing to scroll for crucial information. A connectivity test is conducted for a successful notary meeting, but users are unaware of it as it's out of their immediate view, causing frustration and flow abandonment. Additionally, the dropdown UI can mislead users into thinking they must select a device, leading to unnecessary actions. FullStory sessions reveal users mistakenly engaging with A/V options, causing confusion and deviations from the intended flow.
Researching meeting audio and video software like Google Meet, Skype, Zoom, and Slack revealed a common pattern: the video feed takes center stage in the user interface. While options to modify audio/video devices exist, they aren't the primary focus, allowing users to access settings without detracting from the main meeting experience.
First iteration
First round of designs 🤨
This iteration closely mirrors our current A/V experience, emphasizing a larger video feed and internet connection status. Integrating introductory copy onto this page received positive feedback from the UX team, prompting consideration of eliminating the previous step. However, the presence of dropdown fields might mislead users into thinking device selection is mandatory. While aligning with our existing framework, there's a shared sentiment within the team to push boundaries and explore a completely new approach. If introducing a new experience, there's an opportunity to experiment and test innovative ideas, potentially redefining the user journey.
Second iteration
Second round of iterations 🎊
In this version, the video feed is prominent, and A/V drop downs have a subtler yet effective presence, aligning with established patterns in meeting software. However, on mobile web, replicating the desktop drop downs appeared disjointed, so I reverted to current drop downs with expanded width for better integration. Icons were added for quick visual cues, aiming to streamline the user's scanning process for a more cohesive and user-friendly experience.
Design that shows an error code 🛑
When users encounter device-related issues, we currently display a standard error code. However, the UX team challenged me to explore ways to offer users more detailed, tailored information about their specific problems. This prompts us to consider how we can provide users with more comprehensive insights or guidance based on the nature of their issue, enhancing their troubleshooting experience.
User research & testing
Objective: Usability gut check of desired design enhancements to the users A/V Check experience to understand the risk/likelihood that our proposed changes could lead to signer confusion.
Testing approach: Unmoderated usability tests with 90, US-based participants recruited from Usability Hub’s research panel.
Open design questions:
- Will signers be confused by the new streamlined look & feel?
- Will they understand the intent of this page/what’s happening at this point?
- Will they know how to troubleshoot/navigate tech issues, etc.?
Setting the context:
You need to get a Power of Attorney form notarized and have chosen to use a service that lets you get it done online.The process is pretty straightforward: upload your document, verify your identity, and join a video call with a notary, who then conducts the notarization.
.png)
User interview sketch ✍🏻
“...change the input and output sources for audio and video. I can also continue on to the next point in the process.”
“Allow the browser to use your camera and microphone on your device. There should be a pop up that says ‘Allow’.”
“Wait for the connection status to finish and test the Webcam and speaker to make sure they are functioning correctly. Then hit continue.”
Complete-a-task
Participants were prompted to complete one of the tasks below & shown either the desktop or mobile version
Video: The video camera on your laptop is broken and you want to switch to a different video source. Click to make that change. Desktop (n=15), mobile (n=15)
Audio Speakers: You want to switch to use the speakers on your laptop to hear the notary during the meeting. Click to make that change. Desktop (n=15), mobile (n=15)
Mic: Your headphones are about to die and you want to switch to speak into the microphone on your laptop. Click to make that change. Desktop (n=15), mobile (n=15)
Key - takeaways
Click success rates were positive
- Avg. across all tests = 71%
- Desktop average = 62%
- Mobile average = 80%
Interestingly, a small subset (8 out of 90) of respondents in our tests overlooked clicking the A/V dropdown and directly proceeded by clicking 'Continue'. However, in the live experience, this behavior is curbed as users cannot advance until the connection check is completed successfully.
Additionally, a portion (11 out of 90) of respondents selected the incorrect A/V source based on the prompt they received. It's important to note that in the live experience, error codes would promptly alert users if difficulties arise, offering immediate feedback and guidance to rectify any issues.
Heat map showing users clicks 🔥
Final Design - How it Works
The Notarize signer will now select their A/V devices and test their internet connection through an updated flow. From the design explorations and user research and we feel this will be an improvement to the current experience.
Smooth audio and video check
This new experience empowers users to establish their audio/video configurations and ensure a stable internet connection, significantly boosting their chances of success during meetings. The emphasis on user-friendly design aims to make this process intuitive and straightforward. Moreover, users encountering A/V setup issues can effortlessly resolve them within the product interface, eliminating the need to seek assistance from Support.
Usability spot check
Four weeks post-release, the data paints a compelling picture: a significant decrease in drop-off rates from 6.81% to 5.73% on desktop, 6.97% to 5.76% on iOS, and 8.7% to 7.29% on Android. The drop off on support tickets has also dropped from 10% to 6%. Notably, Fullstory sessions revealed a majority of users successfully completing the A/V Check and proceeding to the subsequent steps. Those encountering hurdles at this stage typically struggled with enabling browser access to their camera and/or microphone.
Our focus now shifts to gathering additional data to gauge and continuously monitor the sustained impact of these improvements. Additionally, we aim to brainstorm alternative solutions, exploring different prompts or instructional placements to assist signers in enabling crucial browser permissions, ensuring a smoother A/V setup process.
Conclusion
I strongly believe that our revamped A/V check has significantly enhanced the user experience, evident from the promising decrease in drop-off rates. However, I'm excited to gather more data to gain deeper insights into how we can further assist users, especially in addressing the critical aspect of accepting browser permissions. Understanding and refining this aspect will undoubtedly propel us towards delivering an even more seamless and user-centric experience.
.png)