Designing the Interface for a New Surgical Technology
CLIENT [Redacted Surgical Group]
MY ROLE Researcher, Architect, Designer
TIMELINE September - December 2020
Our client is a surgical device startup that is developing new radar technology to add precision and reliability to joint replacement procedures. As their hardware is still in development, many of the below images and names have been redacted.
Our team consisted of 5 designers (including Katelyn Mirabelli, Janet Liu, Xi Chen, and Sofia Ni) and we were tasked with designing the interface component that could accompany this new technology.
Scoping and Research
GOAL: To understand our client’s goals, create a realistic scope for the semester, and learn from the existing work on this product
What We Did
Client Briefing
Research on existing resources
Goals and Scope Definition
What We Learned
This company had worked with another design team, who had conceived of 20% of the workflows. They asked that we create the remaining 80%.
The previous team’s work revealed a need for increased confidentiality, consistency, flexibility, and intuitiveness.
Importance was placed on creating a cohesive vocabulary and visual design, as well as expanding pre- and post- operative opportunities
Learning About Our Users
GOAL: To define who we are building this interface for, and who will benefit from its features
What We Did
Analysis of previously created persona
Knowledge transfer sessions regarding the set up of an operating room and who might be interacting with the tool
Conception of three new personas
What We Learned
Surgical techniques and tools vary from doctor to doctor: some have more experience with robotics, whereas some prefer a more analogue method.
A surgical assistant or company representative is more likely to interact with the tool in the OR
Knee replacements require planning and analysis that take place outside of the OR, most likely by the surgeon.
Defining User Flows
GOAL: To conceive of pre-operative, surgical, and post-operative user flows and design corresponding screens
What We Did
Our final workflows came together over multiple client check-ins. The overview is as follows:
Pre-Operative: Planning cuts to be made in surgery, deciding on an implant size and placement angle
Tech Setup: Preparing the hardware, scanning and registering bone landmark
Surgery: Performing knee movement assessments, making surgical cuts, and placing the implant
Post-operative: Analyzing individual data over time and surgical trends over multiple patients
What We Learned
There are some non-negotiable steps that must be navigated in our tool for the sake of the patient’s safety.
Many steps are required in the OR that are not navigated in the software, as they are known across surgeons who perform knee replacements
Kinematic/range of motion assessments in the OR supersede previous plans
Creating the MVP
GOAL: To create a minimum viable product to pitch to our clients and confirm our direction
What We Did
Designed mid-fidelity screens based on our workflows
Created a navigation system
Sourced images as placeholders for live feeds and high-fidelity images
Pitched the MVP to our clients for their feedback
What We Learned
Even without a formal style guide, creating uniform components is essential for designing with efficiency and consistency
Screens that are used outside of the OR must function differently from those for inside the OR.
It is more important that content be high-fidelity at this stage; accurate numbers and photos drive usability for our end users
Elevating to High Fidelity
GOAL: To create and apply a cohesive design system to our MVP for a more realistic prototype
What We Did
Built a design system with layout, color, and labeling guidelines
Elevated our navigation system and labels to be better visible during surgery
Standardized the layout to include guide images on the left and live images on the right during surgical screens
What We Learned
Operating rooms are often well lit, so a dark mode could create eye fatigue for surgeons
Most surgeons would be standing about 5 feet away from this screen, so labels and images should be big
Screens from different phases will look different, but there should be one visual component that all screens share
Usability Testing
GOAL: To test our high-fidelity prototype with end users to assess its successes and failings in usability
What We Did
Recruited surgeons from the company’s surgical advisory board with our client’s help
2 moderated users tests with 5 tasks each
Conducted these tests remotely using Zoom, and acting as surgical assistants during the phases that would take place in the OR
What We Learned
Users often wanted more control over the visuals: the ability to rotate, add or remove implants, and see bones from all angles
Users liked the longitudinal treatment of patients, and the ability to assess their surgical technique over time.
Collapsible components should default to be open; most values and measurements are dependent on one another and should all be visible.
“It’s a fairly easy system to navigate, but offers very complex and powerful tools for performing a procedure.”
— User Testing Participant
Refining and Handoff
GOAL: To make changes to our prototype based on user feedback and present our final recommendations to our client
What We Did
Created a list of quotes and problems from our recorded user tests
Made refinements to our prototype based on this feedback
Compiled a list of recommendations to our clients for after handing off our work
Presented these findings and our final prototype to our clients
What We Learned
The following should be the next steps taken by our client:
Prioritize user freedom and control
Continue to refine labels based on the opinions of the surgical board
Perform more in-depth usability testing on specific features and the prototype as a whole
Continue building on image collection for the final product
Reflection
Over these three months, our team strove to produce quality work at every step along the way. We conceptualized the remain 80% of this product’s workflow and interface, added consistency and polish to the prototype, and are confident that our work will lead the interface development of this tool. Working with this client has opened our eyes to the UX design possibilities in the medical and surgical fields, and we can’t wait to see how this product grows in the coming year.
“It’s great to see how this groundbreaking technology is getting put into practical use.”
— User Testing Participant