DESIGN SYSTEM FOR MED DEVICES
Specific project details, client information, and proprietary assets are omitted due to NDA constraints.
Objective
The Challenge
My Role
To unify the user interface across multiple dialysis devices by creating a scalable, modular design system using Atomic Design principles, improving usability, accessibility, and patient safety.
​
Independently developed devices resulted in inconsistent UI elements and fragmented user experiences. The task was to create a cohesive system that balanced user needs, regulatory compliance, and technical feasibility.
​
As the lead designer, I spearheaded the creation of the design system using Figma, from research and audits to final documentation and hand-off, ensuring consistency, scalability, and accessibility across all devices.
​
This portfolio piece outlines my process, methodology, and the impact of the work at a high level.
Key Takeaways
Scalability
Created a modular design system that reduced development time by 20% and enabled faster updates across devices.
Consistency
Standardized UI components and interaction patterns, improving user satisfaction by 15% and reducing training time by 30%.
Accessibility
Ensured all components met WCAG 2.1 AA standards, enhancing usability for patients with visual/motor impairments.
Collaboration
Led x-functional meetings with human factors and software teams to ensure compliance with FDA and ISO standards.
Project Discovery & Initial Assessment
I conducted a comprehensive audit of existing interfaces, breaking them down into atoms, molecules, organisms, and templates using Atomic Design principles. This helped identify inconsistencies and prioritize areas for improvement.
Through stakeholder interviews with product managers, engineers, and regulatory teams, I gathered requirements and ensured alignment with FDA and ISO 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
I developed a core library of reusable UI components (e.g., buttons, sliders, alerts) designed for clarity, consistency, and accessibility. A unified color palette and typography system enhanced readability, especially in high-stress medical environments.
All components met WCAG 2.1 AA standards, with a focus on color contrast, font sizes, and touch targets.
Applying Atomic Design to Design System Components
Atoms: Standardized the smallest UI elements (e.g., buttons, icons) for clarity and compliance.
Molecules: Combined atoms into reusable molecules and icons, to create consistent interaction patterns across devices.
Organisms: Built larger components (e.g., dashboards, error prompts) tested for usability and compliance.
Templates and Pages: Created flexible templates to arrange organisms into cohesive interface layouts, adapting them for various device screens.
Cross-Functional Collaboration
A critical aspect of this project was ensuring that the design system was not only user-friendly but also technically feasible and easy to implement. To achieve this, I worked closely with the software engineering team to bridge the gap between design and development.
Design-to-Dev Hand-off
Created detailed documentation for each component, including interaction states, animations, and accessibility requirements, ensuring that developers could implement the design system accurately.
This documentation was complemented by Figma prototypes that demonstrated how components should behave in real-world scenarios.
Iterative Feedback Loops
Maintained an open feedback loop with the engineering team. By reviewing early builds and providing design feedback, I ensured that the final product matched the intended user experience.
This iterative process also allowed us to identify and resolve technical issues before they became major roadblocks.
Component Reusability
By creating a library of modular, reusable UI elements, we reduced redundancy in the codebase and enabled developers to build interfaces more efficiently.
This approach not only sped up development but also ensured consistency across the product suite.
Bridging the Gap Between UX Design and Software Development
Outcome and Impact
The design system reduced development time by 20% and improved user satisfaction by 15%.
Internal usability testing with healthcare professionals across acute care and at-home dialysis environments confirmed the system was easier to learn and more intuitive to use, even in high-stress situations.
High Level View of Design System
Atoms
Molecules
Organisms
Templates & Pages
All images provided are mockups for portfolio purposes only.
Future Product Development for Critical Care Environments
The design system’s flexibility enabled us to address the unique needs of acute care and at-home dialysis devices. For acute care and at-home devices, we focused on high-stress environments to ensure that the interface was clear, responsive, and easy to navigate under pressure while prioritizing accessibility and ease of use, empowering patients to manage their care with confidence.
​
The modular nature of the design system allowed us to explore its application in critical care environments, where consistency and usability are equally vital. By creating a design system that could adapt to diverse environments and user needs, we ensured its relevance and longevity in an ever-evolving industry.
Finally
This project reinforced my belief in the power of user-centered design and strengthened my ability to lead cross-functional teams. It challenged me to think deeply about scalability, consistency, and user empathy while balancing multiple stakeholder needs.
​
The design system not only unified the current suite of dialysis devices but also laid the foundation for future product development, supporting the company’s long-term vision of expanding into global markets and critical care environments.