MDO Design System
Introduction: Outgrowing Material UI and building a custom Design System
When working for Medondo, we hit a bottleneck in the product development process, leading to product depth and a decreasing user experience.
The Problem
Scaling is tough, especially in the medical sector. Medondo's technical/product debt skyrocketed as the requirements piled up. Our dev and design teams worked in silos, making matters worse. Our Material-UI framework couldn't keep up, resulting in escalating development effort and time sinks.
The Solution
To streamline our processes, we built an Angular-based custom MDO Design System. This allowed us to transition incrementally, keeping our codebase consistent while upgrading user experience.
Results
Reduced Product Depth: Our redesign projects, like the MDO Scheduler, allowed us to transition to a better user experience while reducing product depth working.
Streamlined Workflows: The PM and UX analysis and conception phases were accelerated, cutting down project durations and iterations with processes and tools like Figma, Zeroheight and Storybook.
Better KPIs: Improvements in user satisfaction and NPS scores, as well shorter project durations and less effort in reviewing and iterating developed interfaces.
-p-3200.webp)
The architecture of the MDO Design System
Styleguide
The style guide serves as the backbone for visual cohesiveness, specifying rules for colors, fonts, and shadows. For example, we adhere to a fixed color range to maintain consistency across the user interface. The fonts are selected to ensure readability across a variety of devices, and simple shadow guidelines are followed when depth is required in the design.
Components & Assets
In Figma, the design system is built using basic UI elements known as components, such as buttons and forms. These are further grouped into more complex units called assets. The asset-driven approach brings modularity to the design, making it both manageable and efficient for rapid prototyping and development.
Documentation and UX-guidelines
Documentation serves as the connecting bridge between design and development, offering comprehensive guidelines for each component and layout schemes. To ensure alignment between design and actual implementation, we maintain updated references on both Figma and Zeroheight. Storybook is also utilized as a real-time coding mirror of Zeroheight to create a seamless transition from design to development.
Implementation and Design-Token Logic
Processes and Maintenance
The design system is designed to evolve. It has a structured process that kicks in when there's a need to update components or assets. All suggested changes go through an evaluation phase, followed by a team consensus on what alterations should be made. Once approved, the changes are systematically implemented across all our platforms, ensuring a unified update to the design system.
