End-to-end - multiplatform - design system

Actief in meerdere zorgsectoren

Mediq is een medisch hulpmiddelenzorgbedrijf met activiteiten in 13 Europese landen. Doordachte hulpmiddelenzorg en advies met verstand van zaken. Met meer dan 2.500 medewerkers zet Mediq zich dagelijks in voor patiënten, zorginstellingen en zorgprofessionals. Met het oog op nieuwe mogelijkheden om het leven en werk voor patiënten en zorgprofessionals gemakkelijker en prettiger te maken.

Gewenste situatie

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

• Interne tool met ‘experience’ componenten, patronen en richtlijnen.
• Meer samenwerking tussen de verschillende disciplines en afdelingen.
• Efficiënt ontwerpen en ontwikkelen door hergebruik van productiecode.
• Consistente en beproefde klantbeleving.
• Sterke en professionele merkuitstraling, ook internationaal.

Geen redesign

Bij de ontwikkeling van veel design systems wordt vaak gekozen voor een gelijktijdig redesign traject. Mediq had recent een nieuw ontwerp/een nieuwe stijl van hun website geïntroduceerd, en wilde deze stijl graag toepassen. Klinkt eenvoudig, je pakt de huidige componenten en zet ze in een design system. Het tegenovergestelde is waar. In het huidige ontwerp ontbrak het ‘systeem’. Maar hoe hou je de huidige situatie aan, als het fundament ontbreekt?

Design foundation

We zijn daarom begonnen met het definiëren van de design foundations, en hier afstemming over zoeken bij de stakeholders. Vanuit deze foundations hadden we een basis om de componenten te onderzoeken en vragen te stellen als: Zijn alle varianten nodig van dit component? Wat is de essentie, en wat is wildgroei? Zijn ze toegankelijk?

Per component hebben we zoveel mogelijk teruggesnoeid van varianten. Dit door het gebruik en de behoefte te onderzoeken. Ook hebben we ontwerpaanpassingen gedaan om goede toegankelijkheid te waarborgen. Stakeholders begrepen de meerwaarde hier ook goed van.

Belangrijk was ook om de relaties te leggen met andere foundations en componenten. We ontwikkelen een systeem, en daarin zitten veel relaties. Bijvoorbeeld regelafstanden en icon sizes op basis van de spacing scale.

End-to-end oplossing, van design tot en met productie

In samenwerking met Mediq is er stap voor stap een design system gerealiseerd. Na een snelle inventarisatie zijn de startsituatie, uitgangspunten en succescriteria bepaald. Vervolgens is de design system oplossing gedefinieerd en beschreven. Daarop is het design system gerealiseerd (opzet en architectuur, tools en proces en organisatie). En zijn er verschillende componenten gemaakt.

Vergunningen efficiënter

Voor implementatie en beheer van het design system is, in samenspraak met Mediq voor de volgende toolset gekozen:

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