Klant

Bouwen, promoten en onderhouden van een design systeem dat meerdere applicaties aanstuurt voor verschillende merken.

Rol

Als wereldleider in magazijnautomatisering transformeert KION Group de manier waarop goederen door de toeleveringsketen bewegen. Binnen de Mobile Automation afdeling is onze missie om de gebruikerservaring over meerdere merken te revolutioneren door middel van een uniform design systeem.

Met een 9-jarige geschiedenis van samenwerking met KION (voorheen Dematic en Egemin) heb ik een instrumentele rol gespeeld in het vormgeven van hun digitale transformatie. Deze case study richt zich op onze nieuwste prestatie: het creëren van een schaalbaar design systeem dat meerdere applicaties aanstuurt met behoud van merkconsistentie.

🎯 Wat betekent succes?

Een succesvolle implementatie van het design systeem betekent:

Naadloze ontwikkelaarservaring met uitgebreide documentatie
Pixel-perfecte implementatie die overeenkomt met ontwerpspecificaties
Duidelijke, goed gedefinieerde use cases voor elke component
Gecentraliseerde bron van waarheid voor ontwerpbeslissingen

Tech

KION magazijnautomatisering voertuiginterface met bedieningspaneel en navigatiesysteem

De Technologie Achter de Magie

Onze workflow combineert Figma’s krachtige ontwerpmogelijkheden met Tokens Studio voor naadloos tokenbeheer. Deze tokens worden via Style Dictionary getransformeerd naar Angular-thema’s, die zowel lichte als donkere modi ondersteunen voor verschillende merken.

We gebruiken ZeroHeight als ons documentatieplatform, waarmee we een levende brug creëren tussen ontwerp en ontwikkeling. Deze integratie zorgt ervoor dat onze documentatie actueel blijft met onze ontwerpontwikkeling.

Design systeem

KION design systeem tokens in Figma met kleurenpalet, typografie en componentvariabelen

UI Ontwerpproces

Design Systeem Architectuur

Implementeerde een hiërarchische tokenstructuur
Creëerde adaptieve ontwerppatronen
Ontwikkelde merkspecifieke thema-oplossingen
Opzetten van een componentvariantensysteem

Componentontwikkeling

Bouwde een bibliotheek van herbruikbare componenten
Implementeerde strikte TypeScript interfaces
Creëerde dynamische thema-oplossingen
Optimaliseerde voor mobiele prestaties

Angular Ontwikkelingsworkflow

Ons Angular ontwikkelingsproces volgt een component-gedreven aanpak die schaalbaarheid en onderhoudbaarheid garandeert:

Architectuur van modulaire componentstructuur met smart/presentational pattern
Implementatie van Angular Material CDK voor toegankelijke interacties
Toepassing van Angular’s dependency injection voor service compositie
Ontwikkeling van aangepaste formulierbesturingselementen met ControlValueAccessor

Component Bouwtechnieken

Elk component in ons design systeem volgt deze ontwikkelingsprincipes:

Ontwikkeld met OnPush change detection voor optimale prestaties
Geïmplementeerd met uitgebreide unit tests via Jasmine en Karma
Voorzien van interactieve documentatie met Storybook en Angular voorbeelden
Gebouwd met een thema-injectiesysteem via CSS custom properties en Angular’s @mixin systeem

Applicaties

KION portaalinterface met applicatiedashboard met meerdere modules en navigatie-elementen

Testen & Kwaliteitsborging

Kwaliteit staat centraal in ons design systeem. We hebben een uitgebreide teststrategie geïmplementeerd die betrouwbaarheid en consistentie garandeert.

Component Testen

Elke Angular component ondergaat rigoureuze tests via meerdere benaderingen:

Unit tests met Jasmine en Karma voor geïsoleerde logica
Integratietests met TestBed om component-interacties te verifiëren
Visuele regressietests via Chromatic om ontwerpsconsistentie te waarborgen
E2E tests met Cypress voor kritieke gebruikersstromen

Toegankelijkheid

Onze geautomatiseerde toegankelijkheidstests helpen bij het handhaven van WCAG-compliance, waardoor onze componenten voor iedereen bruikbaar zijn.

Cross-Platform

Uitgebreide cross-browser tests garanderen consistent gedrag op alle platforms en apparaten.

Documentatie

Documentatie is cruciaal voor de adoptie van het design systeem. Via ZeroHeight hebben we een interactieve leeromgeving gecreëerd waar ontwikkelaars componenten in realtime kunnen verkennen.

Onze documentatie gaat verder dan basisgebruiksrichtlijnen en biedt praktische voorbeelden en best practices uit echte implementatiescenario’s. Het platform blijft perfect gesynchroniseerd met onze ontwerpbestanden, waardoor de documentatie evolueert samen met het design systeem.

Angular Component Documentatie

Voor Angular componenten bieden we uitgebreide documentatie die het volgende omvat:

Interactieve voorbeelden met stackblitz integratie voor live code bewerking
API documentatie gegenereerd uit TypeScript interfaces en JSDoc commentaar
Gebruiksrichtlijnen met code snippets voor veelvoorkomende implementatiepatronen
Prestatieoverwegingen en best practices specifiek voor Angular

Regelmatige updates en duidelijke changelogs helpen teams om op de hoogte te blijven van de nieuwste verbeteringen en functies.