ZUi Web Component Library
Implemented for 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
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.
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!