Designing a self-sufficeint onboarding experience to replace in-person training.

Project type

Android app

Timeline

Dec 2022 – Jan 2023

Role

Founding designer

company

ThinkSono

Please read AutoDVT case study first for better context of this case study.

CONTEXT

Shifting from in-person to a self-guided onboarding training experience 

In 2022, we successfully rolled out a beta release of AutoDVT to conduct clinical trials to collect data for FDA clearance. However, the initial release lacked training features so users could learn to scan independently. As a result, the CTO traveled to each deployment site to train new users, but this approach couldn't be sustained in the long term once rolled out to the public with potentially hundreds of new users each month. 

I was tasked to investigate the feasibility of implementing an interactive manual as part of the onboarding flow to replace the need for in-person training.

impact

We have successfully designed and developed the project, and validated the interactive manual as a viable solution to train new users independently.

5/6
nurses completed their third practice exam successfully

Taking on different roles


Small startups require generalists who are comfortable with many tasks. At big companies, you focus on one thing, but at a five-person startup, resourcefulness is key. Knowing a little bit about everything and how to find answers is helpful. Some of my responsibilities for this project were interaction design, visual design, usability testing, and video production.

Memo's work as a product designer on AutoDVT's interactive manual was outstanding. He took charge of the entire project, displaying his expertise, commitment, and keen attention to detail...

Read More

Fouad Al-Noor

Co-founder & CEO, thinksonO

The problem

Traveling to deployment sites to train nurses was not a sustainable or scalable solution

At first, face-to-face nurse training worked well for clinical trials, but it couldn't be sustained long-term once the FDA approved the product for commercial use. Although AutoDVT was designed for medical professionals, particularly nurses without ultrasound experience, a basic level of knowledge is necessary to operate our technology—so the project aimed to provide and train users with the basic knowledge needed to use the app and conduct the exam.

The following are the main aspects users must learn before they can operate our tech:

01

What is DVT and how does a DVT ultrasound exam works

02

How to position the patient to facilitate scanning

03

Where to place the scanner and how to move it

04

Linking a scanner to AutoDVT

05

What does a positive DVT scan looks like

The solution

A self-guided learning experience in the onboarding flow

During the project, I collaborated closely with the engineering team and shared a vision of creating an interactive onboarding experience to guide new users through practice scanning by breaking down the exam into small chunks of information
We hypothesized that a guided walkthrough with context-sensitive tooltips and window overlays with rich content could be an effective training modality. However, there were still a few unresolved questions.

01

Is VR, 3D, video or stills the most effective media to train new users?

02

What media would require the least design and development efforts?

03

What is the ideal length/duration considering all the information that needs to be conveyed?

Research

Outlining the training steps before wireframing

The first challenge I encountered was documenting the training steps to scan a patient using AutoDVT successfully. The CTO, who had extensive knowledge of the exam protocol and trained new users, assisted me in outlining the steps, and we worked closely throughout the project. Because there were many steps to take into account and to make things more manageable, I decided to work in small increments by focusing on a single scan and see how it evolved before moving on to the other three.

Challenge

Choosing between video, 3D and VR

Initially, 3D and VR seemed ideal for training new users because they offer interactive features like zooming in and rotating a 3D environment, which creates a more immersive experience with details from various angles. However, after an initial exploration of VR and 3D, we realized they come with a high upfront cost, and we needed more in-house resources to develop a VR or 3D experience. So, we shifted to video to prove the concept with minimal investment of time and effort and, more importantly, to stay agile by making quick updates as the learnings came.

Example of modals with rich media (Knee P1 scan).
UX FLOwchart
Mapping out the new onboarding flow

To ensure a seamless integration of the interactive manual into the onboarding user flow, I created a wireflow that mapped out the screens and interactions required for users to complete the scans. With many steps in each scan, the wireflow provided a comprehensive view of the pathway users would take to reach their final destination. This deliverable was used regularly during design reviews and design iterations.

Design process
Adopting a fast iterative design process

With a clear design concept, we were ready to begin testing. However, creating a functional prototype was challenging because simulating ultrasound is complex, as it requires connecting to an ultrasound probe and capturing ultrasound images based on the operator's probe movements. Therefore, we decided to forgo the prototype and test with actual working code to gather insights with more ecological validity. Once the wireflows were completed, the engineering team and I worked together for three weeks; we co-designed, implemented, tested and quickly iterated based on findings gathered.

Iterative process model
User testing
Testing outside the target demographic

One challenge I encountered was finding target audience participants with domain knowledge to test with. Due to budget constraints, recruiting high-paying nurses or doctors was impossible. To address this issue, we divided the research into two stages. The first stage involved recruiting participants from outside the target audience who were easier to find. We used this stage to identify navigation and major usability issues. We also investigated if the interactive manual provided all the necessary steps and content to scan successfully. In the second stage, we tested the product with our target audience to determine if medical professionals could complete a third-time exam successfully, which was the main success metric for the project.

We conducted a total of 16 usability sessions:

10 sessions with participants outside our target audience.
sessions with medical professionals.

Testing session with a medical professional
Usability findings and design refinement
01 Highlighting the importance of clearing the groin for proper scanning

Overall, medical professionals performed better than non-medical participants in testing due to their experience working with patients and being comfortable with close physical interaction. Most non-medical participants appeared hesitant when moving a patient's underwear to scan the groin. Although this was not an issue for most medical professionals, we still introduced a looped video that highlights the importance of clearing the groin area to ensure proper scanner placement.

02 Improved understandability with concise copy and checkboxes to confirm step completion

We observed that participants were skimming through the instructions and not carefully reading them, which hindered their ability to scan the patient. To tackle this issue, we simplified the written instructions and introduced checkboxes. This design change improved the number of tests completed on the third try by making instructions easier to follow and ensuring each step was completed before moving on to the next.

Before
After
03 Testing directional terms

AutoDVT uses anatomical terms of location, such as lateral and medial, instead of left and right. We tested both terms, but we learned that medical professionals preferred anatomical directional terms because they reduce ambiguity, help visualize positional and spatial locations of structures, and navigate directionally from one area to another.

Conventional terms
Anatomical directional terms
04 Videos proved highly effective, so we incorporated them beyond onboarding into the scanning core flow

We found videos highly effective in training users, so we expanded their use beyond the interactive manual to the scanning flow for users who needed to reference them while scanning. However, a constant design challenge we faced with AutoDVT was making features easy to spot for new users but not intrusive for experienced users already familiar with the app. We redesigned the scanning flow to make videos available before and while scanning.

'After' subflow shows how training videos were incorporated into the scanning core flow.
The final Design

Interactive manual demo

The video below is a 3-minute partial walkthrough of the interactive flow. It demos the beginning of the interactive manual experience.

Snippet of the interactive manual flow (Groin P1 scan).
Learnings
Bending the user testing rules

One of the biggest lessons I learned during this project was the importance of being resourceful and adaptable because things might go differently than planned. For example, recruiting medical professionals became challenging, mainly because nurses and doctors expect high compensation for their time; however, we lacked a recruiting budget. So we considered other options, such as conducting preliminary tests with more attainable participants to test navigation and other kinks, as specialized knowledge will not help someone navigate an app and reserved testing with medical professionals only when truly necessary.

Next steps
Further design refinements needed

Navigation: Navigating back or exiting the interactive manual needed improvements as we removed the navigation controls we initially contemplated and relied on Android's native navigation bar. The plan was to refine the UX through further testing and design iterations. 

Virtual scanner:
 The virtual scanner is a feature that allows users without a scanner to experience the app via ultrasound exam simulations. However, we needed further testing to understand whether the virtual scanner offered new users any value.

Watch Autodvt in Action.
Thanks for scrolling.

I'm open to product design opportunities that deliver meaningful impact.

Get in touch