Reference: Carl Zeiss Meditec AG

Setup of a Group-wide Web Component Library for ZEISS user interfaces based on the ZUi Design System Recipient of the German Design Award 2022

ZUi Web Component Library

Setup of a Group-wide Web Component Library for ZEISS user interfaces based on the ZUi Design System

Recipient of the German Design Award 2022

The continued growth of the ZEISS product portfolio has also meant an increase in the number of systems and applications that have frontends for their management, maintenance and service. These frontends should offer end users a homogeneous look and feel and consistent high quality. A standard operating concept for these user interfaces has thus become increasingly important. ZEISS Digital Innovation (ZDI) implements the official ZUi Design System as web components. Angular and React are also supported. Application developers can access this library and integrate it in their existing applications with minimal effort.

ZEISS Digital Innovation tasks

Since February 2021, a scrum team from ZDI has been responsible for the conceptual approach, the implementation, maintenance and updates of the Web Component Library. The library is made available to the entire ZEISS Group.

ZDI coordinates with the different stakeholders: project managers, application developers and UI/UX designers. In November 2021, the ZUi Design System defined approx. 5,000 components in various states. Since December 2019, the Guide has been implemented in the project as a web component.

Our Services

Library design
Setup of sustainable architecture
Requirements management
Component design with UI/UX
Stakeholder coordination and prioritization
Quality assurance and documentation
User support for deploying the components
Community Management

The ZUi components are used for the majority of the frontends for ZEISS Web applications.

Project description

The goal of the ongoing project is to develop a library that makes the components from the ZUi (ZEISS UI) Design System available as web components.

Application developers will use these components to create a consistent look and feel in their applications across the ZEISS Group. This way, they need significantly less time for the frontend implementation in their projects.

The components are defined in their different states and functions together with the UI/UX team. Quality assurance also goes hand in hand with UI/UX. This ensures the correct implementation of all components at all times.

The finalized components can be consumed by users as an npm package and integrated in their frontend applications. The applications thus follow the ZEISS UX concept and users are guaranteed the optimum interaction with the ZEISS applications.

The ZUi Web Component Library is a milestone for improved, cross-team cooperation and communication between developers and designers. It has paid off in all sorts of ways and makes our work significantly more efficient: less code duplication, UI and UX consistency across numerous projects, speed thanks to reuse, compatibility and standardization of components in design and code. Definitely an exemplary best practice for other frameworks at the company!

Ulrike Steininger Head of UX Carl Zeiss Meditec AG

Challenges

The components are made available to the entire Group. So variations in language, date, fonts, etc. must be observed and considered. Since most uses occur in the field of medical technology, the components are subject to additional regulations and specifications. An additional challenge is stakeholder management: many diverse projects consume ZUi Web. All of these have their own specific requirements that have to be prioritized in a way that makes sense and with smartly bundled synergies.
The ZUi Library continues to be enhanced. Breaking changes have to be planned with users in mind.

Technical environment

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

Share this article

Contact

Join our team.

Take a look at our job openings. We look forward to meeting you.

Write to us!

We are happy to answer your questions when you contact us using the contact form.

Form is loading...

Optional information

If you want to have more information on data processing at ZEISS, please refer to our data privacy notice.