Product Designer | Metamason | 2017
Metamason is a health technology startup developing a mobile platform that allows clinicians and respiratory therapists to take 3D scan data of patient’s face and create a truly personalized 3D printed CPAP mask.
We aimed to design an intuitive scanning interface and user experience that would ensure that clinicians and respiratory technicians of any skill level would be able to take an accurate scan of their patients’ faces.
Role & Responsibilities
Collaborated with engineers who have deep understanding 3D scanning technology to define scan workflow.
Conceived of scanning interaction concepts and created visual solutions for the interface as well as the user experience for the scanning process.
Research & Findings
5 Metamason co-workers, 2 photo-taking tests
Because the Metamason CPAP mask is generated from 3D scan data captured on-site via the app, designing a scanning interface that guides technicians of any skill level in capturing the scan data efficiently and reliably was key. To gain insight into how people typically interact with capturing objects, I performed usability tests on my teammates with two spatial photography apps, Fyuse and Android Photo Sphere. The tasks were simple:
1. Fyuse: Follow the instructions and take a 3D photo of a selected object.
2. Android Photo Sphere: Follow the instruction and take an image of anything around you.
Finding 1: Visual guidance can be a distraction
Fyuse relied heavily on its graphical interface in ensuring that users had achieved coverage of their subject by displaying a visual guideline that users would have to follow along with a crosshair. However, people got fixated with keeping the camera trained on the orbit line.
"I am trying to follow this line... It's hard!"
"I was trying too hard tracing the line... I wasn't even looking at the mug (the object). And it took too long, my hands got tired" (While looking at his photo of the object that's off-centered)
Finding 2: People get lost when there is no guidance
By Contrast, Photo Sphere has a very minimalist UI: a center with a frame and four dots that indicate different directions the user is supposed to move their camera. It was unclear to people that they needed move the camera to find the next dot and repeat the same interaction.
"(Paused after the first shot)... where am I supposed to go?" (Then randomly moved the camera around )
"I think I am done... (Unsure) I don't see any more dots." (The final stitched image was incomplete, as he had missed many spots)
Scan Interface Design
After observing my co-workers interact with the existing scanning software, it became apparent that the ideal solution to the problem lay somewhere in between the two extremes. Using my research, I came up with the following solutions to the problems I had observed.
Design Solution 1:
Create a path for users to follow
Users are not able to see scan results in real-time. A scanning path is designed to ensure every angle of the nose area is covered. The graphic moves in 3D to help the user understand better how to move the camera around patient's face.
Design Solution 2:
Use a frame to help users stay focused
The frame is designed to help users stay focused on the patient's face while maintaining a certain distance between the camera and the face.
Design Solution 3:
Provide real-time feedback when needed only
Camera position and speed is tracked relative to the patient’s face in real-time. The system frame will be highlighted in blue to get the user's attention, and provide a short message telling the user how to adjust the camera to avoid errors in scan result.