End-to-end - multiplatform - design system

Active in multiple healthcare sectors

Mediq is a medical device care company operating in 13 European countries. Thoughtful care and advice with expertise. With more than 2,500 employees, Mediq works daily for patients, healthcare institutions, and healthcare professionals, with an eye on new possibilities to make life and work easier and more pleasant for patients and healthcare professionals.

Desired situation

Met het design system wenst Mediq ambitieuze doelen te realiseren. Te weten:

• Internal tool with 'experience' components, patterns, and guidelines.
• More collaboration between different disciplines and departments.
• Efficient design and development through reuse of production code.
• Consistent and proven customer experience.
• Strong and professional brand presence, internationally as well.

No redesign

While many design systems are developed alongside a redesign project, Mediq had recently introduced a new design/style for its website and wanted to apply this style. Sounds simple, right? Just take the current components and put them into a design system. The opposite is true. The current design lacked a 'system.' But how do you maintain the current situation if the foundation is missing?

Design foundation

Therefore, we started by defining the design foundations and seeking alignment with stakeholders. From these foundations, we had a basis to explore the components and ask questions like: Are all variants of this component needed? What is essential, and what is overgrowth? Are they accessible?

For each component, we pruned back as many variants as possible by examining usage and needs. We also made design adjustments to ensure good accessibility. Stakeholders also well understood the added value of this.

It was also important to establish relationships with other foundations and components. We are developing a system, and many relationships exist within it, such as line spacing and icon sizes based on the spacing scale.

End-to-end solution, from design to production

In collaboration with Mediq, a design system was realized step by step. After a rapid assessment, the initial situation, principles, and success criteria were defined. Then, the design system solution was defined and described. Following this, the design system was realized (setup and architecture, tools, process, and organization), and various components were created.

Permits more efficient

For the implementation and management of the design system, in consultation with Mediq, the following toolset was chosen:

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