End-to-end - multiplatform - design system

We set up and implemented an 'end-to-end' design system for Mediq within five months using our standardized approach. This design system enables Mediq to achieve more consistency and efficiency in the development of its digital portfolio. Thanks to validated standard components, designers and developers can iterate more easily, and Mediq is continuously able to innovate. Above all, customers and partners benefit from an excellent and consistent user experience across various channels, products, and services.

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.

“In an excellent collaboration with Informaat, we have rapidly built a high-quality and scalable design system for Mediq.”
Hans Rosier - Manager Digital Benelux

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


Digital innovation that you can feel and experience

Fulfill your digital promise

Interfaces designed to resonate with your heart and soul

Discover the You in UX
Design systems

One digital source, expressing yourself everywhere

Give your identity a system
Content Architectuur

Digital discipline down to the finest detail

Cement your content strategy

Interested in a design system?

We are eager to collaborate to make your business valuable, authentic, and credible for your customers of the future. Send us a message, and we will get in touch.

Danny van Wieringen

+31 6 53 53 73 87