<img height="1" width="1" style="display:none" alt="" src="https://px.ads.linkedin.com/collect/?pid=1603620&fmt=gif"/>
UX and UI design for medical devices

The most surgeon-friendly sonic cutter

Medical Devices

User Experience

Interface Design

Cover of UX design case study showing surgeons in the operating room with lights overhead.
CLIENTdeSoutter Medical / Zethon
LOCATIONAylesbury, UK
TEAMUX designer, UX researcher, UI designer, interaction designer, project manager, product manager
Video summary
Greg will show you how the new user interface makes a difference to surgeons who use the ultrasonic cutter.
Video thumbnail image
Play button icon
2:32

The medical device company developed an innovative ultrasonic cutter. They were close to market release and they needed a user interface to support users and pass compliance. They decided to trust our UX design agency because they had a bigger ambition: they wanted the UI design to be a flagship of their brand, something surgeons learn to recognise as a hallmark in the medical industry.

On a day to day basis we worked with a small client team formed of a product owner and an engineer. In this format we were able to iterate designs fast and to try daring ideas to tease out the innovation they were looking for. The steering committee formed of several other stakeholders was kept up to date every second week.

OUR CONTRIBUTIONS

Information Architecture

UX Flows

User Research

Academic Literature Review

Technical Workshops

Wireframing

UX Design

Interactive Prototyping

User Testing

Human Factors

UI Design

Design System

Medical device with GUI design in foreground laid over a dark operating room in the background

THE OLD GUI DESIGN OF THE MEDICAL DEVICE

Engineers had created a user interface for the medical device, but surgeons were not happy with the design. Medical doctors have very specific needs when they are in the middle of a surgery. Simply arranging user interface elements in a way that appears to make sense in a medical device is not enough.

Other stakeholders were unhappy because this user interface design is not appealing. It doesn’t showcase the performance of the medical device and it doesn’t help sales.

Even though the developer-made UI design is far from usable, it was a constructive starting point for us, because it showed the key functions. So as a third party UX design agency team we were able to jump right in.

Previous Design
UI of medical device developed by engineers

SYSTEMATIZING THE NEEDS OF SURGEONS

Product managers had a strong intuition about user needs. But user experience design for medical devices is a whole decision making process and intuition can’t dictate much. Instead, the way you organise knowledge determines whether you tend to bias design decisions towards positive results in the design process.

We did three things to support sound UX design decisions. First we put system to the available information. Then we figure out what we don’t know and went on to find out, for example via user research with medical doctors. Third, we integrated all the sources of information, slicing and dicing to prepare the upcoming design decisions.

Discovery and Feature Mapping
Table with 7 columns summarising features of a medical device for the UX and UI design process

DESIGNING AN INTUITIVE UX ARCHITECTURE

You wouldn’t want a surgeon fiddling around with the navigation on a medical device. Typically the challenge of UX design for embedded GUIs is that too few UI components fit into one view, so the navigation becomes rather deep.

We piloted eight structures to see how they bias the user experience. We reviewed how each option affects the performance of medical doctors. The goal was to find an information architecture that gives the simplest user experience for the medical device.

Features, interactions and content are mapped to the structure, suggesting what you can and can’t do in each view of the user interface.

Information Architecture
Diagram showing the information architecture for the user experience of a medical device.

BENCHMARKING OF MEDICAL DEVICE INTERFACES

To create a best-in-class UI design, as designers, we had to meticulously field the status quo in the niche of medical devices for surgery.

As a specialised UX design agency for medical devices we can partially rely on our library of dozens of types of medical device user interfaces. But the devil is in the detail.

Rather than sticking to generic perspectives, we dug deep and scrutinised the details that make an ultrasonic cutter unique - such as handling dexterity, how attention is directed through the interface or the interactions that work well for surgeons.

This meticulous design analysis is as much about finding out what doesn’t work as it is about discovering those patterns that create familiarity with users.

UX Research
User interface example of medical device

INTERACTIONS: GUI, PHYSICAL PRODUCT AND CONTEXT

Using a medical devices is a very physical affair that makes human factors design complex.

The ultrasonic cutter features physical buttons for key functions and slots to insert cartridges. These are an integral part of the user experience.

The UX of this medical device has an additional twist: doctors touch the display with the non dominant hand (left). That changes everything.

So in the evidence based process of GUI design we had to consider:

(1) What patterns of interaction do doctors know from other medical devices?

(2) How does switching the attention from the patient to the user interface affect cognitive resources?

(3)How do fine motor skills function under these conditions?

All of these factors have influenced the user interface, both in big and small ways. For example, they determined the size of UI components, their positioning and the interaction patterns that make up the GUI.

Physical console features
Diagram showing the physical design of medical device on the left, and an excerpt from a table with GUI design requirements on the right.
Diagram showing the physical design of medical device on the left, and an excerpt from a table with GUI design requirements on the right.

THE ROLE OF HUMAN FACTORS RESEARCH

Studies from cognitive science informed our evidence based design process.

In the day to day process of collaborating with stakeholders we shared with product managers those insights that help give perspective on the pros and cons of this or that particular design detail of the user interface. Stakeholders can make sense of this research because we demonstrate how a principle applies pragmatically in the design for the GUI of their medical device.

Research into human factors helps product teams make sound design decisions that improve the safety and usability of medical device interfaces. It is not the only source of information in evidence based design, but it surely lends robustness to the process because it helps integrate other data points into a coherent whole.

Evidence Based Design
Excerpts from human factors design research that informs ux design for medical device.
Colle, H. A., & Hiszem, K. J. (2004). Standing at a kiosk: Effects of key size and spacing on touch screen numeric keypad performance and user preference. Ergonomics, 47(13), 1406-1423.
Excerpts from human factors design research that informs ux design for medical device.
Tao, D., Yuan, J., Liu, S., & Qu, X. (2018). Effects of button design characteristics on performance and perceptions of touchscreen use. International Journal of Industrial Ergonomics, 64, 59-68.
Diagram of GUI components alignment on touch display

THE USER EXPERIENCE EVOLVES COLLABORATIVELY

Sketches and wireframes are deliverables we used to field ideas and to communicate design options to product owners, users and engineers. As the user interface design evolved, we moved from simple sketches to ever more sophisticated wireframes.

A surprising aspect of this evolution is how we oscillate between different perspectives of the user interface. For example, in one sprint we may revise the layout of the interface as a whole, while in another sprint we may investigate options for a particular component.

Gradually the user experience of the medical device becomes stable, meaning that both the whole and the smallest details find their ideal shape.

Prototype & Product Thinking
Wireframe prototyping the user experience of a medical device

METICULOUS UI DESIGN MAKES IMPLEMENTATION EASY

The visual design of the user interface, with the aesthetics and brand identity, makes up the final phase. Visual UI design doesn’t change the structure of the interface, but it adds character to the medical device.

With this ultrasonic cutter, the UI design plays two key roles.

First, it enhances usability by steering the attention of surgeons when they glance at the interface. Second, it adds the emotional layer that has an appealing effect in sales presentations of the medical device.

Engineers implement this final UI design. Therefore, as designers we prepare the assets for them to minimise their effort.

UI Design
GUI design of the main screen of a medical device with buttons.
UI design deliverable of UX agency working for a medtech client.
Example of GUI design deliverable of UX and UI design agency
User interface design deliverable from medical UX agency
Black blob spiralling.
Quotes
This interface would make my work easier. I wouldn’t have to worry about it at all. It’s all clear and straightforward, like my Tesla.
UX research user
Tom Frilling, MSc MBBS FRCS(Tr&Orth)
Hip & Knee Trauma and Orthopaedic Surgeon
GUI design for settings screen of a medical device
UI design for a setup screen for a medical device with UI components
Get a feel
Try the buttons below
HDS-121
connected
running
RUNNING
Pump
Paired
Unpaired
Speed (RPM)8,500

THE HIGHLY DETAILED DESIGN SYSTEM

The design system we provided to engineers is highly detailed, it leaves nothing to be interpreted. The design system meticulously accounts for states, behaviours and relationships between all the UI design components that make up the user experience. Engineers are highly productive when they code with this support.

But the design system also provides assets and the logic that make this GUI language ready to be used in other products in the portfolio of the medical device manufacturer.

Excerpt showing icons and buttons from the design system of an ultrasonic cutter.
Excerpt showing icons and buttons from the design system of an ultrasonic cutter.
Cover of UX design case study showing surgeons in the operating room with lights overhead.
Cover of UX design case study showing surgeons in the operating room with lights overhead.
Design elements

UX AND UI DESIGN FOR MEDICAL DEVICES

Look at the GUI design for this medical device: it immediately positions it as an industry leader. But that’s just the tip of the iceberg.

When surgeons try the medical device they quickly feel at ease with the user experience: it’s as if it anticipates the nuances that are important to them and it behaves in a way that is reassuring.

This level of user experience does not happen by chance. it is the result of a meticulous process that integrates an abundance of information into the design decision making process. The process is lead by expert designers with considerable experience in embedded GUIs and medical devices, so that product managers and other stakeholders can see what options exist for the user interface, with their pros and cons.

The right GUI design is not a subjective guess. It emerges as the obvious and rational choice from the intersection between user needs, technology and business strategy.

OUTCOMES

First clickable prototype delivered in 3 weeks

Compliance with ISO 62366 and IEC 62366-1

Industry defining GUI design

Full design system to be used across the entire portfolio

Seamless handover and support for the engineering team