Summary
When reimagining a new electronic health record, the internal tools product team needed to define a unified design system. Establishing a set of shared components was crucial to ensuring consistency and cohesion across the internal products. After evaluating Fluent, Ant, Carbon, and MUI design systems, MUI was the most suitable option due to its strong community support, existing Figma library, and suitability for enterprise-level products or customization.
The Problem
As the internal tools product team reimagined an electronic health record, one of our main challenges was the need for a unified design system. Establishing a set of shared components was crucial to ensure consistency and cohesion across the internal products. This project aimed to identify an open-source enterprise-level design system we could use immediately and customize further.
The Solution
We identified four open-source design systems that met our requirements. These design systems must have strong community support, an existing Figma library, and be suitable for enterprise-level products or customizable to meet these needs. After evaluating Fluent, Ant, Carbon, and MUI against these criteria and considering the immediate and ongoing costs of each, we have determined that MUI is the most suitable option.
Constraints and Dependencies
1. We are limited to a design system library that supports dense layouts and components.
2. The development will be concurrent with the framework and information architecture designs.
3. Layout decisions depend on final framework decisions and monitor size.
4. Components and customization depend on information architecture (IA).
Role
I prepared research and documentation and scheduled stakeholder meetings to ensure effective communication and alignment throughout the project. I also collaborated closely with the engineering team.
The process
Research and comparison
We established a set of design and technical criteria to help us find the best open-source enterprise-level design system. For design, the requirements included an existing Figma library, comprehensive design documentation, and various component variations. Engineering sought high community support, small bundle sizes, and maintainer trust. We explored Fluent, Ant, Carbon, and MUI based on these criteria.
After we found a set of design systems that fit our criteria, we conducted a component audit and created a sticker sheet showcasing both "out-of-the-box" and customization options.
Dashboard using out of the box MUI components
Dashboard using out of the box Ant components
We also assessed the immediate and ongoing costs for each design system. We found that MUI is highly customizable to suit our enterprise-level needs; however, it will require a high immediate cost to customize less dense components. While MUI’s design system is geared toward consumer-facing products, some components lack the density needed for an enterprise-level product. Despite the higher immediate costs, ongoing licensing costs, potential breaking changes with major updates, and higher costs for higher-dense components need to be considered.
After evaluating these factors, we concluded that MUI was the better fit for our needs. Although it isn't an enterprise-level library, it offers dense components, is supported in Figma, and has high community support. Ant Designs was a close second as an enterprise-level design system, but it fell short due to security issues, large bundle sizes, and language barriers.
Throughout the research and comparison process, we actively engaged with leadership. We shared our findings and proposed decisions, seeking their input and insights. This collaborative approach ensured that the decision-making process was transparent and inclusive, and that the final decision was aligned with the strategic goals and vision of Hinge Health.
We prepared and shared a final document explaining our decision to use the MUI design system. This document was created as the source of truth to highlight why MUI was chosen, potential risks, mitigation strategies, and FAQs.
Engineering and design created a detailed timeline for customizing the MUI design system to fit our brand. This work needed to happen alongside framework designs and information architecture, ensuring a coordinated and efficient process. We also needed to prioritize certain design system components based on milestones for other parts of the product to ensure a smooth and timely design system implementation.
With a timeline in place, we began customizing the MUI design system by defining breakpoints and theming.
While defining the breakpoints, I wanted to understand what monitors our care team specialists used. I found that care team specialists were required to use their work-from-home stipend to offset the cost of the monitor, whereas other roles were provided a monitor by the company. This led to a business case for policy changes regarding care team specialists' benefit stipends.
Results and conclusion
After conducting research, initial implementation explorations, and cost breakdowns, we concluded that the MUI design system would be the most suitable open-source library for Hinge Health's internal tools. This project highlighted the significance of having a design system for our internal tools and initiated the forming of a design systems team to tailor the design system further.
