DESIGN SYSTEM FOR MED DEVICES
Objective
The Challenge
My Role
To unify the user interface across multiple established medical devices for dialysis care by creating a design system using Atomic Design principles, which standardizes components and improves usability and accessibility.
The devices were independently developed, resulting in varied UI elements and interaction patterns. The task involved implementing a consistent design system focused on modularity and scalability, using Atomic Design principles to address complexity without compromising regulatory standards.
My role was one of two designers and created the design system using Figma.
Specific project details, client information, and proprietary assets are omitted due to NDA constraints. This portfolio piece outlines my process, methodology, and the impact of the work at a high level.
Project Discovery & Initial Assessment
Audit of Existing Interfaces: Conducted an interface audit across devices to identify inconsistencies in components, patterns, and visual elements. This analysis was organized by Atomic Design principles, breaking down existing elements into atoms, molecules, organisms, and templates.
Stakeholder Interviews and Compliance Review: Collaborated with product, engineering, and regulatory teams to understand requirements and constraints, ensuring alignment with FDA and ISO standards. This input guided Atomic Design categorization to ensure all elements met safety and compliance standards.
Pain Points
1
Inconsistent UI elements across devices led to confusion and increased risk of user error.
2
Varying interaction patterns and feedback responses created uncertainty and raised training demands.
3
Lack of standardized accessibility features hindered usability and complicated regulatory compliance.
Define Core System Components
Component Standardization: Developed a core library of UI elements, including buttons, sliders, and alerts, focusing on clarity and consistency. This library served as a foundation to streamline updates and maintain visual uniformity.
Visual Style and Accessibility Standards: Established a unified color palette and typography standards to enhance readability, particularly in high-stress situations. Ensured color contrast ratios met accessibility standards for users with visual impairments.
Applying Atomic Design to Design System Components
Atoms: Standardized the smallest UI elements (e.g., buttons, icons, progress indicators) to create a cohesive foundation. These atoms were designed for clarity, accessibility, and compatibility with medical device regulations.
Molecules: Built combinations of atoms into molecules (e.g., multiple button with layouts) that users commonly interacted with across devices. Consistency in these molecules helped streamline the UI.
Organisms: Defined organisms by combining molecules into larger, reusable components, such as progress indicators, troubleshooting steps, and banners. Each organism was tested for usability and compliance, ensuring consistency in complex interactions.
Templates and Pages: Created templates to arrange organisms into interface layouts, adapting them for various device screens. Templates were tested in prototypes to validate the user experience across devices.
Developing Consistent Interaction Patterns
Interaction Consistency: Established interaction patterns for critical actions (e.g., treatment initiation, pausing, & troubleshooting), organized by Atomic Design levels. For example, instructional steps were treated as organisms, ensuring consistency in feedback for users.
Testing with Prototypes: Developed prototypes using Atomic Design components, enabling usability tests that validated the design system.
Collaboration and Documentation
Comprehensive Atomic Design System Documentation: Documented guidelines for each design element from atoms to templates, detailing usage, interaction states, and compliance requirements. This approach made the design system modular and scalable for future updates.
Cross-Functional Workshops: Hosted workshops with development to demonstrate how Atomic Design principles applied to the medical device UI, ensuring a seamless hand-off and alignment on implementation practices.
End Result
Modular and Scalable Design System: The Atomic Design approach enabled a modular, scalable design system that maintained consistency across devices and facilitated quick adaptation for future device updates.
Improved Efficiency and Consistency: By unifying and organizing UI components, development time was reduced, ensuring that users experience a coherent interface regardless of the device.
High Level View of Design System
Atoms
Molecules
Organisms
Templates & Pages
All images provided are mockups for portfolio purposes only.
Finally
The design system was created to provide a seamless, intuitive experience for patients, prioritizing ease of use across all dialysis devices. By unifying UI elements, standardizing interaction patterns, and enhancing accessibility, the system reduces cognitive load and minimizes user errors, enabling patients to focus on their care with confidence.
Helping to create this design system was a transformative experience for me as it was my first time taking part in such an effort. Tackling the challenge of unifying complex medical device interfaces pushed me to think deeply about scalability, consistency, and user empathy at every step.
Seeing the impact of a well-structured design system on patient usability and confidence was incredibly rewarding, and it reinforced my passion for designing solutions that truly make a difference in people's lives.