Ein Designsystem für Roboter und Menschen

KUKA AG

Collage aus dem KUKA Designsystem mit Farbpalette, Icons, Typografie und UI-Komponenten vor orangefarbenen KUKA-Industrierobotern in einer Halle

Projektübersicht
Projektmerkmal	Projektdetails
Kunde	KUKA AG
Bereiche	Maschinenbau Design & Strategy
Link	https://www.kuka.com
Leistungen	Strategie & Beratung Design Design Systeme
Technologien / Tools	Figma Storybook
Zeitraum

Strategie & Beratung

Design

Design Systeme

KUKA zählt zu den weltweit führenden Automatisierungsexperten mit innovativen Robotik- und Digitalisierungslösungen für Industrie, Medizin und viele weitere Bereiche. Gemeinsam mit KUKA haben wir ein Designsystem geschaffen, das die Mensch-Maschine-Interaktion erlebbar macht. Durch eine nutzerzentrierte Gestaltung und interaktive Elemente ermöglichen wir es, Lösungen intuitiv zu entdecken und in konkrete Anwendungen zu übersetzen.

So ist ein skalierbares und zukunftsorientiertes Designsystem entstanden, das die Innovationskraft von KUKA sichtbar macht, die Automatisierung nachhaltig prägt und das Erlebnis über alle Touchpoints hinweg vereinheitlicht, während es die KUKA Marke stärkt.

Komponenten
75
Themes
4
Sets
2

Das Designsystem soll eine neue Robotik-Welt eröffnen, in der alles zusammenpasst, sofort einsatzbereit ist und intuitiv gesteuert werden kann. Mit minimalem Aufwand sollen sich alle benötigten Komponenten für die Roboterapplikation zusammenstellen und in Betrieb nehmen lassen – und das ganz ohne Vorkenntnisse in der Programmierung.

Ein Designsystem ist das Fundament für konsistente, effiziente und inspirierende digitale Erlebnisse auf allen Endgeräten. Unser Vorgehen basiert auf fünf zentralen Designprinzipien: Powerful, Functional, Supportive, Delightful und Anticipatory. Diese Prinzipien leiten uns durch den gesamten Prozess – von der Konzeption bis zur Implementierung.

Die fünf Designprinzipien Powerful, Functional, Supportive, Delightful und Anticipatory zahlen auf Aesthetics, Interactions und Customer Experience ein

Semantische Tokens als Basis des Systems

Die Definitionsgrundlage für alle gestalterischen und funktionalen Aspekte basiert auf semantischen Tokens. Das tokenbasierte Setup ermöglicht Skalierbarkeit und sichert eine flexible, konsistente Gestaltung, die sich an unterschiedliche Kontexte und Markenrichtlinien anpasst. Jede Komponente enthält eine vollständige Beschreibung, alle Varianten sowie eine Implementierung.
Durch diese Struktur entsteht ein einheitliches Markenerlebnis über alle Kanäle hinweg. Zusätzlich unterstützt das Designsystem einen Light und einen Dark Mode, um auf unterschiedliche Lichtsituationen reagieren zu können.

Ein zukunftssicheres Designsystem erfordert eine sorgfältige Überarbeitung bestehender Komponenten sowie die Entwicklung neuer Bausteine. Aus diesem Grund wurden bestehende Elemente optimiert, um eine verbesserte Benutzerfreundlichkeit, Performance und visuelle Konsistenz zu gewährleisten. Gleichzeitig wurden neue Komponenten gezielt entwickelt, um erweiterte Anforderungen zu erfüllen und besondere Nutzungsszenarien abzudecken.

Dieser Ansatz ermöglicht eine flexible, skalierbare und zukunftsorientierte Gestaltung, die sowohl bewährte Konzepte als auch neue technologische Entwicklungen integriert.

Aufbau nach Atomic Design am Beispiel eines Datumswählers: Atome als Grundelemente, Moleküle als UI-Komponenten und Organismen als wiederverwendbare Module

Eine Sprache in Design und Entwicklung

Alle Designprinzipien, Komponenten und Interaktionsmuster werden in einer zentralen Library dokumentiert, die Designer:innen und Entwickler:innen als Referenz dient. Das Designsystem fungiert dabei als Single Source of Truth. Es stellt alle Komponenten bereit und ermöglicht es Screendesigner:innen, effizient und konsistent mit den Elementen des Designsystems zu arbeiten. Diese Dokumentation umfasst:

Visuelle Spezifikationen: Eine detaillierte Beschreibung aller Designelemente, einschließlich Farben, Typografie, Abstände und Rasterstrukturen. Diese Spezifikationen gewährleisten eine konsistente visuelle Gestaltung und erleichtern die Zusammenarbeit zwischen Design- und Entwicklungsteams.

Komponentenrichtlinien: Für jede UI-Komponente gibt es umfassende Anleitungen, die den Anwendungsbereich, funktionale Eigenschaften und Implementierungsempfehlungen abdecken. Dadurch wird sichergestellt, dass alle Komponenten korrekt und effizient genutzt werden.

Code-Beispiele: Für jede Komponente und jedes Pattern stehen klar definierte Richtlinien zur Verfügung, die die technische Umsetzung gezielt unterstützen. Durch die enge Abstimmung mit der Entwicklung sind Design und Implementierung konsistent und passgenau aufeinander ausgerichtet. Die technische Dokumentation wird zentral in Storybook gepflegt und stellt alle Komponenten strukturiert für die Entwicklungsteams bereit.

Interaktionsrichtlinien: Um eine konsistente Nutzerführung zu gewährleisten, enthält die Dokumentation zusätzlich klare Richtlinien zu Animationen, responsiven Verhaltensweisen und zur Barrierefreiheit. Dies sorgt für eine intuitive Bedienbarkeit und ein zielgruppenspezifisches Nutzererlebnis.

Verschiedene Modi ermöglichen individualisierte Umgebungen

Um eine individualisierbare Umgebung zu schaffen, unterstützt das Designsystem verschiedene Modi, die sich an unterschiedliche Nutzungspräferenzen und Geräte anpassen:

Light & Dark Mode: User können zwischen einem hellen und einem dunklen Modus wechseln, um die Lesbarkeit und das Nutzungserlebnis je nach Umgebung zu optimieren.
Touch & Desktop: Die Komponenten sind so konzipiert, dass sie sich flexibel an verschiedene Bildschirmgrößen und Interaktionsformen anpassen, um eine optimale Nutzung auf Touch und Desktop-Geräten zu gewährleisten.

‍

UI-Komponenten des KUKA Designsystems im Light Mode, darunter Dropdown, Tabs, Schalter, Checkboxen und Eingabefelder

Systemübergreifende Experience

Ziel war eine nahtlose, systemübergreifende Nutzungserfahrung. Das bedeutet, dass User unabhängig von Plattform, Gerät oder Anwendungsfall eine konsistente Bedienung und ein einheitliches visuelles Erscheinungsbild erleben. Durch die standardisierte Gestaltung der Komponenten und Interaktionsmuster wird sichergestellt, dass wiederkehrende User auf verschiedenen Systemen sofort mit der Bedienung vertraut sind. Gleichzeitig ermöglicht die Flexibilität des Systems eine Anpassung an spezifische Anforderungen, ohne dabei die grundlegende Konsistenz zu gefährden.

Auch für Screendesigner:innen schafft das System eine zentrale Single Source of Truth. Klare Gestaltungsprinzipien, verbindliche Vorgaben und wiederverwendbare Komponenten sorgen für eine einheitliche und effiziente Erstellung von Interfaces. Dadurch können Anwendungen schneller und unkomplizierter gestaltet und entwickelt werden und gleichzeitig wird die gestalterische Qualität über unterschiedliche Anwendungen und Teams hinweg gesichert.

‍So entsteht eine intuitive und durchgängig hochwertige User Experience sowohl für die User als auch eine verlässliche und konsistente Arbeitsgrundlage für die gestaltenden Teams.