Story
Improving UX Design in the Medical Device Industry
July 20, 2022
Zoe Storch

I was a brand designer in another life.

Entering the world of medical device has been an eye-opening experience. Unlike traditional branding, packaging, or consumer goods, the medical device field hasn’t historically relied on the aesthetics or user experience of a product to dictate its success. In other words, designing for a user’s most optimal experience has long been on the back burner. Especially in emergency medicine.

But a bad user experience in healthcare isn’t just bad design – it’s valuable time, money, and (possibly) lives lost. A poorly designed user interface increases the cognitive load on healthcare workers, which in turn, increases the time it takes to properly diagnose and treat a patient.

That’s why it’s so important to make sure a device’s UX or UI follows a few basic usability guidelines. Here are a few of the most impactful guidelines to follow for a user-friendly interface.

Contrast Ratios

Did you know that 21.7 million US adults have vision issues? Designing for accessibility shouldn’t just be about meeting legal requirements. It should be about the consideration of all your users and their abilities. The contrast ratio of an image/ typographic element and its background is vital in making sure that all users can properly read text within your UI. And in the medical world, time spent deciphering text could affect diagnosis and treatment of a patient.

Punchkick: A Beginner’s Guide to Designing for Accessibility

https://www.punchkick.com/user-research/user-experience/2019/05/28/designing-for-accessibility

Punchkick has a great guide to understanding the basics of designing for accessibility. Not only do they provide readers with the history of the accessible design movement, they cover the four core elements of WCAG (see below) with helpful tips and tricks to accompany each one.

The Web Content Accessibility Guidelines

https://www.w3.org/WAI/standards-guidelines/

For contrast ratios in particular, The Web Content Accessibility Guidelines (WCAG) are a great place to start if you’re lost when making decisions about typographic color. Abide by these ratios when building out your graphic guidelines.

- Body text: 4.5:1

- Large text: 3:1

- Black and white text : 21:1

Web AIM Contrast Checker

https://webaim.org/resources/contrastchecker/

But perhaps the most helpful contrast ratio tool is this contrast checker from Web AIM. Just enter the hex codes of your type and background and voila – you’ll know if your design meets accessibility standards for vision-impaired users.

 

User Testing

Although it may seem like your team are the experts when it comes to the ins and outs of your product, there is a group of people even more important – the users. Sometimes (many times) the designer knows best, but in the end, it’s operators and clinicians who will be interacting with your UX on the regular.

We recently redesigned the UI of our Operator Portal and were able to host zoom calls with operating technicians at clinical sites. Using Figma screen prototypes, technicians could comment on their experience with the new UI before development began. Here are some other amazing tools for user testing and iteration.

Prototyping in Figma

https://help.figma.com/hc/en-us/articles/360040314193-Guide-to-prototyping-in-Figma

Check out Figma’s easy-to-follow guide to prototyping. If you haven’t heard of it yet, Figma is a collaborative user interface design tool where designers and developers can connect to build UX flows. After a flow’s built out, the program is also great for user testing.

Useberry + Figma

https://www.useberry.com/integrations/figma/

Useberry can be used as an integration to Figma, by providing designers and product teams with a slick environment for more in-depth user testing. They can even provide you with a pool of audiences to test with.

Invision’s Guide to Usability Testing

https://www.invisionapp.com/defined/usability-testing

Invision defines the difference between User and Usability testing with this simple how-to guide for conducting your own walkthroughs.

Iconography

When combined with color, type, and shape, iconography is another way to give users the information they need to make decisions quickly. Instead of just filling an “emergency stop” button red, adding an icon can allow users to recognize it faster. But for many teams, the limiting factor of creating an icon system is the technical aspect of designing it. Why reinvent the wheel? These iconography portfolios are open source and ready for you to use.

Material Design Icons

https://materialdesignicons.com

FontAwesome

https://fontawesome.com/icons

ionicons

https://ionic.io/ionicons

There are countless ways to improve a device’s user experience. Accessibility, contrast, iconography, and user testing are just pieces of the larger UX puzzle. Better user experience = better patient outcomes.