Referenz

ZUi Web-Komponenten Bibliothek

Umgesetzt für Carl Zeiss Meditec AG

21. Februar 2023
ZUi Webkomponenten Bibliothek

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