Client

Build, promote and maintain a design system that powers multiple applications across different brands.

Role

As a global leader in warehouse automation, KION Group is transforming how goods move across the supply chain. Within the Mobile Automation department, our mission is to revolutionize the user experience across multiple brands through a unified design system.

With a 9-year history of collaboration with KION (previously Dematic and Egemin), I’ve been instrumental in shaping their digital transformation. This case study focuses on our latest achievement: creating a scalable design system that powers multiple applications while maintaining brand consistency.

🎯 What does success look like?

A successful design system implementation means:

Seamless developer experience with comprehensive documentation
Pixel-perfect implementation matching design specifications
Clear, well-defined use cases for each component
Centralized source of truth for design decisions

Tech

KION warehouse automation vehicle interface showing control panel and navigation system

The Tech Behind the Magic

Our workflow combines Figma’s powerful design capabilities with Tokens Studio for seamless token management. These tokens are transformed via Style Dictionary into Angular themes, supporting both light and dark modes across different brands.

We leverage ZeroHeight as our documentation platform, creating a living bridge between design and development. This integration ensures our documentation stays current with our design evolution.

Design system

KION design system tokens in Figma showing color palette, typography, and component variables

UI Design Process

Design System Architecture

Implemented a hierarchical token structure
Created adaptive design patterns
Developed brand-specific theming solutions
Established component variants system

Component Development

Built a library of reusable components
Implemented strict TypeScript interfaces
Created dynamic theming solutions
Optimized for mobile performance

Angular Development Workflow

Our Angular development process follows a component-driven approach that ensures scalability and maintainability:

Architected modular component structure with smart/presentational pattern
Implemented Angular Material CDK for accessibility-compliant interactions
Utilized Angular’s dependency injection for service composition
Created custom form controls with ControlValueAccessor

Component Building Techniques

Each component in our design system follows these development principles:

Developed with OnPush change detection for optimal performance
Implemented comprehensive unit tests with Jasmine and Karma
Created interactive documentation with Storybook and Angular examples
Built theme injection system using CSS custom properties and Angular’s @mixin system

Applications

KION portal interface showing application dashboard with multiple modules and navigation elements

Testing & Quality Assurance

Quality is at the heart of our design system. We’ve implemented a comprehensive testing strategy that ensures reliability and consistency.

Component Testing

Each Angular component undergoes rigorous testing through multiple approaches:

Unit tests with Jasmine and Karma for isolated logic
Integration tests with TestBed to verify component interactions
Visual regression testing through Chromatic to ensure design consistency
E2E tests with Cypress for critical user flows

Accessibility

Our automated accessibility testing helps maintain WCAG compliance, making our components usable for everyone.

Cross-Platform

Extensive cross-browser testing guarantees consistent behavior across all platforms and devices.

Documentation

Documentation is crucial for design system adoption. Through ZeroHeight, we’ve created an interactive learning environment where developers can explore components in real-time.

Our documentation goes beyond basic usage guidelines, offering practical examples and best practices drawn from real implementation scenarios. The platform maintains perfect sync with our design files, ensuring that documentation evolves alongside the design system.

Angular Component Documentation

For Angular components, we provide comprehensive documentation that includes:

Interactive examples with stackblitz integration for live code editing
API documentation generated from TypeScript interfaces and JSDoc comments
Usage guidelines with code snippets for common implementation patterns
Performance considerations and best practices specific to Angular

Regular updates and clear changelogs help teams stay current with the latest improvements and features.