The Benefits of Developing Design Systems for Medical Products

By Kimberly Nieves and Jessica Black 

A medical device company may have multiple business divisions and device types all working in silos, creating the potential for multiple, seemingly disconnected graphical user interface (GUI) designs and user experiences. Aligning these with a single source of design plans, behaviors and guidelines (i.e., a design system), while taking accessibility and inclusivity into consideration, will aid in creating simpler user workflows and cohesive user interface (UI) experiences. However, it can be difficult to know where to start when establishing a design system and why you should establish one in the first place. In this article, we will discuss top considerations when developing design systems and their key benefits.  

Anatomy of a graphical user interface design system 

A design system is a library of reusable GUI elements, code and guidance that serves designers and developers in understanding and implementing specific GUI elements. A GUI design system often comprises style guides, component libraries and pattern libraries. A style guide defines visual treatments (e.g., color usage, typography) with guidelines and behaviors of UI components and patterns. This guide provides consistent visual language that can be easily enforced throughout products (e.g., spacing of layouts, positioning of components and ensuring accessibility of components and patterns). Component libraries contain all UI elements that make up a digital product, including clear explanations for the element and how it is typically used. It defines the recommended default state of the component and the subsequent changes in appearance per state change. This library might also include code snippets for each element. The pattern library contains UI elements or templates including groupings of components (e.g., a card pattern that utilizes a header component, icon, body text, link and call to action (CTA) button).  

Through thorough documentation, design systems stipulate how teams must design products for a seamless user experience across various device types. 

Design system considerations for medical devices 

As a central framework for design decisions, design systems aid in streamlining work and aligning team members, as well as providing consistency across multiple UI platforms and considering different user types. Decisions related to colors, contrast, shapes and more are centralized in the design system. Notably as technology usage and home-based healthcare increase, design systems help to create cohesive interfaces across multiple software platforms and device types, uniting the UI design language of a single medical device company.  

In medical device design, consider and understand the educational level and unique workflows of each user type, whether that be a layperson versus healthcare provider, someone with unique attributes of the patient population or part of the overall aging population using these technologies. We should take care to develop design systems that keep possible and probable vision, hearing and mobility impairments (i.e. cataracts, hearing loss, limited mobility) top of mind. Ensure the design system accommodates these needs and allows flexibility for customizing elements. If there are many different workflows for various intended users, take the time to understand each scenario. Consider that the user might also be interacting between several products in a scenario, some of which might or might not be under the same company umbrella. This is where it becomes important to utilize similar symbols, patterns and even conventional or expected layouts so users can quickly interpret the product’s interface to locate vital actions. Notably, ISO 60417 and ISO 7000 are good resources for identifying common medical symbols and icons on adjoining medical devices, as well as IEC 60601-1-8 for guidance on color and symbol use for alarms and notifications. 

Consider the medical device’s use environment and what implications it might have on the product’s design. For example, what will the available lighting be? Should you design a dark or light user interface? What angle and distance will the screen be viewed from? Will this affect the visibility and legibility of certain symbols or buttons? Understanding the characteristics of the physical environment will then help you determine the most effective design specifications. You can then refer to common references such as ANSI/AAMI HE75 and Web Content Accessibility Guidelines (WCAG) for guidance on minimum font size, character height based on viewing distance and color contrast ratio requirements for best legibility. In addition, medical devices can often be used in stressful and/or demanding environments and situations, so you might consider ways to simplify or streamline the interactions to reduce the cognitive demands on the user. For example, providing an ample touch target area (e.g., button size) and padding between controls can help make activating the right control easier when a user is moving quickly or under duress.  

Benefits of establishing a design system 

A design system can be a great way to streamline your workflow and make design processes more consistent. In one case study, developing a design system helped reduce the time it took to design, develop and test new user interfaces by nearly 60%. Not only will design systems save money in the long run, but they will also allow users to easily transition from legacy to new products. 

Development speed and consistency 

A well-designed system will standardize your processes and practices across projects. As a result, this will reduce the cost of developing and maintaining your applications. Specifically: 

• Using common patterns will help reduce the amount of code needed for specific tasks.  

• Design systems help reduce the amount time creating and updating user interfaces because they will be able to rely on a set of established conventions that will reduce or eliminate the time required for such tasks. 

• Design systems help ensure that everyone involved in a project is working from the same set of standards, which promotes consistency and helps eliminate potential conflicts or disagreements. 

Innovation and scalability 

A design system allows you to experiment and develop new features without fear of causing confusion or conflict. Using design system conventions throughout your project can help reduce the amount of trial and error required when developing new features, thus allowing for easier adaptability to different products and better scaling for larger teams. Using design elements and components that were tested previously (e.g., in usability testing of a similar or predecessor product) can also increase confidence that those interactions and components will work well for users in similar applications. 

Updating the experience 

The course of a medical product’s life on the market can be lengthy. A GUI design system can provide a way to ensure that the experience users have with the product matches the changing trends and interaction patterns users might expect with GUIs. Adopting a design system bridges the gap between legacy products and a next-generation user experience perhaps without needing to reengineer a device’s hardware and core functional value.  

Adopting and developing a graphical user interface design system will create unified guidelines to reduce the time and resources needed to create new or different user interface solutions through design and development. When you are developing your design system, just as you would for any specific product, remember to consider the intended user and use environment, relevant guidelines to stay compliant and to test the design system with prototypes and scenarios your users might encounter.  

Contact our team to learn more about design support or how to develop a design system. Or, sign up for a complimentary account with OPUS, our team’s software platform that provides a variety of design tools, including the Design Recommendation Library and Touch Target Tool. 

Kimberly Nieves is a Managing User Interface Designer and Jessica Black is a Human Factors Associate at Emergo by UL.