ZEISS Design System

BRIEF – Build a robust web-based design system that facilitates the complexity of all content requirements across the various business units within ZEISS globally.

PROJECT – ZEISS is an internationally leading technology enterprise operating in the fields of optics and optoelectronics. In the previous fiscal year, the ZEISS Group generated annual revenue totalling 6.3 billion euros in its four segments Semiconductor Manufacturing Technology, Industrial Quality & Research, Medical Technology and Consumer Markets (status: 30 September 2020). All segments come with very different content requirements with regard to information, education, sales and support. I helped to build a team of 12 designers that successfully has been able to develop and ship an entire design system, building a robust foundation that scales archetypes, modules and components across various needs of those globally operating business units. In close collaboration with product owner, marcom., editors as well as a dedicated team of engineers we have unified and updated the overall online experience of ZEISS including a content strategy that accommodates localisation applying sharp copy that follows the ZEISS Corporate Brand Guidelines. The main challenges were one the one side to build an efficient production cycle that would value research based design while continuously match the velocity of the development stream, and on the other side aiming to create an ongoing and reliable feedback loop between design and development (including design as well as code reviews) in order to achieve excellence through iteration.

TEAM – 12 designers (UX, UI, Visual, Creative Director)
DESIGN FRAMEWORK – The overarching process was structured by a three-step sequence in which the design team would operate. The simplicity of such design framework helped to provide clarity about a lean and efficient production stream and guided all stakeholder involved to move in a commonly understood direction. It was important get product owner and content editor on board to gather essential business requirements as well as let the entire engineering team know when they could expect which deliverables at what velocity. The three-steps define a mode of communication that aims identify opportunities and limitations through constant iteration.
KICKOFF – After setting up the teams and defining and agreeing on our ways of working, we started building within two-week sprints including adapted rituals within the scrum process. Every design system should be based on solid foundations, so the first task was to gather existing materials, research and discuss what assets were required, benchmark and define our best-in-class standards. Whilst everything was designed digitally and archived in cloud-libraries, it helped to print initial drafts to be able to discuss with team members and continuously iterate on ideas.
DESIGN OPS – The project was from its beginning fully remote having people sitting across Europe. It required the right tooling to be able to collaborate efficiently within an international team of professionals. Thanks to the use of several virtual-canvas tools as well as the rapid improvements due to COVID necessities of Microsoft Teams, we were able to develop and apply digital-first operational principles to the project that allowed for seamless interdisciplinary collaboration between business - design - engineering. Unfortunately, we couldn’t bring Figma as core design tool to the setup, therefore remained with a sometimes cumbersome design stack based on the Sketch Cloud and Zeplin.
EXPERIENCE STACK – The Z Design System is core to the Experience Stack – a holistic, multi-layered approach to designing and building digital products, from the smallest element of the user interface to the bigger picture of how customers interact with our brand and consume our content.

The layers of the Experience Stack fall into two categories: Agnostic and Context-specific.

Agnostic elements are the building blocks of every experience. General and cross-functional, they appear the same in every context, which imparts a consistent brand presence. Foundational elements, Components, Modules and Archetypes (for the most part) are agnostic.

Context-specific elements are customisable to business needs. Their content and functionalities change based on where and what the business would like to communicate. Touch points, Flows, Pages, Archetypes (in small part) are context-specific.

Definitions:
Touch Points – is any point of contact between Zeiss and its audience of customers and potential customers. This can be anything from a trade-show booth to a "Learn more" button.

Flow – is how an audience experiences a touchpoint. This often refers to a user’s progression through Pages (a.k.a., the ‘user journey’) with distinct functionalities each step of the way.

Page – is an Archetype with real content filled in. The narrative logically flows through the sequence of modules, supported by the components' functionality.

Archetype – is a blank page. Each archetype establishes a hierarchy of Modules that connects the page flow with a content narrative specific to a business need. Using archetypes when creating new pages (a kind of plug-and-play) enables consistent content presentation across topics, products and services for a seamless brand experience.

Module – is a container for two or more components and/or foundation elements. E.g. one Module might contain a Card Component, a Learn More button and a "Contact Us" link.

Component – groups Foundational Elements together to deliver functionality with a certain level of behaviours and interactions. E.g., a Card Component consists of a Title, Text, Image, Colour.

Foundation – Every page is built upon these basics — grid, colors, typography, graphic elements — and meets accessibility standards.

This Sketch file defines and documents the Foundation, Components & Modules used to build any Archetype within the ZEISS Web.
STYLES AND GUIDELINES – In close collaboration with the ZEISS Corporate Brand Department we developed a comprehensive style guide in accordance with ZEISS’ brand values. Next to the precise documentation of all characteristics, we defined style sheet consisting of design tokens (colors, outlines, shadows, breakpoints, text styles, spacers, aspect rations) to be used as variables across the code.
ZEISS FRUTIGER NEXT UI – The Frutiger typeface originated in the 1970s, a time before ubiquitous computing and the intense use of digital user interfaces. It got its start in transport infrastructure, providing clear, printed sign systems in public spaces. At ZEISS, the use of the Frutiger Next W1G font dates from this time, and has been used for print and, increasingly, for some digital platforms & channels. Frutiger's excellent legibility in large and small letters appeared at first to make its transition into digital realms unchallenging, yet for years it created difficulties across digital design and implementation, known but never tackled.

The ZDS Design Team realized that using a custom typeface originally made for print across all digital touch points requires a revision of its metrics with a clear focus on optimised UI performance. It was time to commission a unique UI version of the original Frutiger Next. Probably for the first time in its history.


ZDS MAIN INTEND – The Frutiger typeface was originally designed for clear, easy-to-read transport signage in the 1970s. In order to continue to use it digitally as ZEISS’ official font, the Greenfield Design Team needed to optimise it to retain the easy legibility for which the original is so appreciated. The necessary inclusion of glyphs (special characters) to accommodate international audiences resulted in un-centred text that needed to be manually adjusted on a case-by-case basis. Over time, this created a kind of Franken-text that eroded the uniformity of the original. The right approach was customisation, exporting a new, specialised version of the ZEISS Frutiger Next that meets the current needs of the ZDS. Going forward, the needs of individual languages will be addressed on a case-by-case basis, instead of trying to force one font to fit all needs.
UI EXAMPLES – I worked across several projects including the public facing websites, b2b platforms as well as the official customer portal helping ZEISS to facilitate information, education, sales and support for its hardware and software offerings.