Das ZEISS-weite ZUi Design System (Screenshot)

Referenz: Carl Zeiss Meditec AG

Eine ZEISS-weite Web-Komponenten-Bibliothek auf Basis des ZUi Design Systems

ZUi Web Component Library

Aufbau einer konzernweiten Web-Komponenten Bibliothek für ZEISS User Interfaces auf Basis des ZUi Design Systems

Ausgezeichnet mit dem German Design Award 2022

Mit dem stetig wachsenden ZEISS Produktportfolio nimmt auch die Zahl der Geräte und Anwendungen zu, die Frontends zu ihrer Steuerung, Wartung und Bedienung besitzen. Diese Frontends sollen die Endkund/innen in einem homogenen ‚Look and Feel‘ und gleichbleibend hoher Qualität erleben. Daher gewinnt ein einheitliches Bedienkonzept für diese User Interfaces zunehmend an Bedeutung. Das offizielle ZUi Design System wird von ZEISS Digital Innovation (ZDI) als Web Components implementiert, zusätzlich werden Angular und React supportet. Anwendungsentwickler/innen können auf diese Library zurückgreifen und mit geringem Aufwand in ihre bestehenden Anwendungen integrieren.

Aufgabenfeld der ZEISS Digital Innovation

Ein Scrum Team von ZDI verantwortet seit Februar 2021 fortlaufend das konzeptionelle Vorgehen, die Implementierung, Pflege und Aktualisierung der Webkomponenten-Bibliothek. Die Bibliothek wird ZEISS konzernweit zur Verfügung gestellt.

ZDI übernimmt die Koordination der Stakeholder, die aus Produktmanager/innen, Anwendungsentwickler/innen und UI/UX-Designer/innen bestehen. Das ZUi Design System definierte im November 2021 ca. 5.000 Komponenten in verschiedenen Zuständen. Seit Dezember 2019 wird der Guide im Projekt als Web-Komponente implementiert.

Erbrachte Leistungen

Konzeption der Bibliothek
Aufbau einer nachhaltigen Architektur
Anforderungsmanagement
Konzeption der Komponenten mit UI/UX
Stakeholder-Koordination und Priorisierung
Qualitätssicherung und Dokumentation
Support der Anwender beim Einsatz der Komponenten
Community Management

Die ZUi-Komponenten werden für den Großteil der Front Ends der ZEISS Web-Anwendungen verwendet.‘ — Die ZUi-Komponenten werden für den Großteil der Front Ends der ZEISS Web-Anwendungen verwendet.

Projektbeschreibung

Ziel des fortlaufenden Projektes ist die Entwicklung einer Bibliothek, die die Komponenten des Design Systems ‚ZUi‘ (ZEISS UI) als Webkomponenten bereitstellt.

Anwendungsentwickler/innen sollen diese Komponenten verwenden, um ein einheitliches, ZEISS konzernweites ‚Look and Feel‘ in ihren Anwendungen zu erzeugen. Auf diese Weise benötigen sie in ihren Projekten eine deutlich kürzere Zeit für die Frontend-Implementierung.

Die Komponenten werden in ihren verschiedenen Zuständen und Funktionen gemeinsam mit dem UI/UX Team definiert. Auch die Qualitätssicherung erfolgt Hand in Hand mit UI/UX. So wird die korrekte Umsetzung aller Komponenten zu jeder Zeit gewährleistet.

Die finalisierten Komponenten können als npm-Package von Anwendern konsumiert und in ihre Frontend-Anwendungen eingebaut werden. Damit folgen die Anwendungen dem ZEISS UX-Konzept und Nutzer/innen ist die optimale Interaktion mit den ZEISS Anwendungen garantiert.

Die ZUI Web Komponenten Library ist ein Meilenstein für die verbesserte teamübergreifende Zusammenarbeit und Kommunikation zwischen Entwicklern und Designern. Sie zahlt sich in vielerlei Hinsicht aus und macht unsere Arbeit deutlich effizienter: Weniger Code-Duplizierung, Konsistenz von UI und UX über viele Projekte hinweg, Schnelligkeit durch Wiederverwendung, Kompatibilität und Standardisierung von Komponenten in Design und Code. Ein absolutes Best Practice Beispiel für weitere Frameworks im Unternehmen!

Ulrike Steininger Head of UX Carl Zeiss Meditec AG

Herausforderungen

Die Komponenten werden konzernweit zur Verfügung gestellt. Daher müssen Variationen in Sprache, Datum, Fonts etc. beachtet und umgesetzt werden. Da die Verwendungen vor allem im Bereich Medizintechnik erfolgen, unterliegen die Komponenten zusätzlich Reglementierungen und Vorgaben. Eine weitere Herausforderung ist das Stakeholder Management: ZUi Web wird von zahlreichen, diversen Projekten konsumiert. Alle haben ihrerseits spezifische Anforderungen, die nachvollziehbar priorisiert und deren Synergien klug gebündelt werden müssen.
Die ZUi Library wird ständig weiterentwickelt. Breaking Changes müssen daher nutzerfreundlich eingeplant werden.

Technisches Umfeld

AzureDevOps, TypeScript, Storybook, pnpm, Web-Components, lit-element, playwright

Share this article

Kontakt

Werde ein Teil unseres Teams.

Wirf einen Blick auf unsere Stellenangebote. Wir freuen uns darauf, Dich kennenzulernen.

Schreiben Sie uns!

Gerne beantworten wir Ihre Fragen, wenn Sie sich über das Kontaktformular bei uns melden.

Formular wird geladen ...

Optionale Angaben

Wenn Sie weitere Informationen zur Datenverarbeitung bei ZEISS haben möchten, lesen Sie bitte unsere Datenschutzerklärung.