End to end -multiplatform- design system

Mediq is a medical device care company with operations in 13 European countries: well-thought-out resource care and expert advice. With more than 2,500 employees, Mediq is committed to patients, healthcare institutions and healthcare professionals daily with a view to new opportunities to make life and work easier and more pleasant for patients and healthcare professionals.

With the design system, Mediq wants to achieve ambitious goals. Namely:

• An internal tool with 'experience' components, patterns and guidelines.
• More collaboration between the different disciplines and departments.
• Efficient design and development by reusing production-ready code.
• Consistent and proven customer experience.
• Strong and professional brand appearance, also internationally.

In developing design systems, a common choice is a simultaneous redesign process. Mediq had recently introduced a new design/style of their website and wanted to apply this to a new design system. Sounds simple, you take the current components and put them in a design system. The opposite is true. In the design, the 'system' was missing. But how do you maintain the current situation if the foundation is lacking?

That's why we started defining the design foundations and looking for stakeholders' alignment. These foundations provide a basis to examine the components and ask: Are all variants of this component needed? What is the essence, and what is sprawl? Are they accessible? We have pruned back as many variants as possible for each component by investigating the use and need. We have also made design adjustments to ensure good accessibility. Stakeholders also appreciated the added value of this. It was also essential to establish relationships with other foundations and components. We develop a system with many connections — for example, line spacing and icon sizes based on the spacing scale.

In collaboration with Mediq, we realized a viable design system step-by-step. After a quick inventory, we determined the starting points and success criteria. We released the design system solution. It was defined and described covering all aspects of design, architecture, tools, process and organization. And several components have been made to provide a path forward for Mediq's designers en development teams.

In consultation with Mediq, the following tooling for design system management was implemented:

• Design creation: Figma
• Design Specification: ZeroHeight
• Design Integration: Style Dictionary (design tokens)
• Design Implementation: Web Components with Lit
• Design Demonstration: Storybook