Beyond for Online Experiences

Built for all Online Experiences at ZEISS

Beyond for Online Experiences drives & develops cohesive experiences across all ZEISS online touchpoints as a dedicated stream of ZEISS Beyond Design System which is providing a design standards across all digital ZEISS products and platforms.

Beyond for Online Experiences offers 3 main resources to support interdisciplinary product teams and accommodate various professional levels: 

Beyond for Online Portal provides clear usage guidelines, templates and documentation for designers
Code libraries in React and Angular supplies ready-to-use components for developers
Design libraries in Figma offer practical tools for designing creative workflows

With Beyond for Online Experiences, teams can efficiently create accessible, high-quality, and brand-consistent online experiences.

Proven performance

We analyzed over 20 active projects using Beyond for Online to understand its impact. The findings show that shared components, standardized patterns, and automation significantly accelerate development and deliver measurable business value.

0⁠+

Live projects actively using Beyond for Online libraries

0⁠%

Effort reduction for migrating to major library versions, thanks to automated updates

0⁠%

Faster feature development by using Beyond for Online components

0⁠

Distinctive visitors per month on our ZEISS websites, one of our Beyond Online touchpoints

Our vision

Beyond for Online Experiences provides ZEISS’ product teams with a comprehensive toolset to quickly and efficiently create exceptional online experiences tailored to our customers’ needs. We deliver tangible business value while elevating the ZEISS brand and building customer trust and loyalty.

Our vision

Beyond for Online Experiences provides ZEISS’ product teams with a comprehensive toolset to quickly and efficiently create exceptional online experiences tailored to our customers’ needs. We deliver tangible business value while elevating the ZEISS brand and building customer trust and loyalty.

Design libraries

Beyond for Online Experiences offers three stable libraries in Figma. Every ZEISS online experience can be built using these accessible and functional libraries. 

Foundation library:
185 design tokens defining color palettes, spacings, font styles, visual effects, and grids.
Component library:
65 ready-to-use components for flexible, consistent design.
Icon library:
251 design icons available in five consistent sizes.

Find out more in our Beyond Portal

Code libraries

Our code libraries cover more than 80% of design guidelines as of February 2025, offering the same high-quality foundation for developers.

React: 63 components available
Angular: 26 components available
Both include 186 foundational tokens.

Beyond for Online Portal

The Beyond for Online Portal is a public hub where users can access all documentation related to our Design System. Internally, it's also where we document and archive user testing and research activities, ensuring a continuous feedback loop. (Internal testing documentation is not publicly available.)

Visit our Beyond Portal

Our vision

Beyond for Online Experiences provides ZEISS’ product teams with a comprehensive toolset to quickly and efficiently create exceptional online experiences tailored to our customers’ needs. We deliver tangible business value while elevating the ZEISS brand and building customer trust and loyalty.

Our vision

Beyond for Online Experiences provides ZEISS’ product teams with a comprehensive toolset to quickly and efficiently create exceptional online experiences tailored to our customers’ needs. We deliver tangible business value while elevating the ZEISS brand and building customer trust and loyalty.

Design libraries

Beyond for Online Experiences offers three stable libraries in Figma. Every ZEISS online experience can be built using these accessible and functional libraries. 

Foundation library:
185 design tokens defining color palettes, spacings, font styles, visual effects, and grids.
Component library:
65 ready-to-use components for flexible, consistent design.
Icon library:
251 design icons available in five consistent sizes.

Find out more in our Beyond Portal

Code libraries

Our code libraries cover more than 80% of design guidelines as of February 2025, offering the same high-quality foundation for developers.

React: 63 components available
Angular: 26 components available
Both include 186 foundational tokens.

Beyond for Online Portal

The Beyond for Online Portal is a public hub where users can access all documentation related to our Design System. Internally, it's also where we document and archive user testing and research activities, ensuring a continuous feedback loop. (Internal testing documentation is not publicly available.)

Visit our Beyond Portal

Driven by our mission

We provide a robust framework that ensures consistency and accessibility across all ZEISS touchpoints, enabling rapid deployment of new online products while focusing on innovative features. By embedding our brand identity into every element, we create a distinctive design language that elevates the ZEISS brand and fosters lasting customer trust and loyalty.

Bringing user needs into focus

For our users, we ensure a consistent and accessible experience across all ZEISS touchpoints, validated through user testing and data-driven insights.

Driven by data

Driven by data

We collect insights from unmoderated and moderated usability tests, stakeholder surveys, and Figma analytics to track real-world usage and priorities, among other data sources. These inputs help us identify patterns, validate decisions, and continuously refine components based on actual user needs, not assumptions. 

By embedding both qualitative and quantitative feedback into our process, we ensure Beyond for Online Experiences remains focused, relevant, and aligned with evolving business and user goals.

Accessible foundations

Accessible foundations

Our design system follows WCAG 2.1 Level AA accessibility standards to ensure all foundations and components are usable by everyone. While implementation remains the responsibility of individual teams, Beyond for Online provides clear documentation, templates, and guidance that support inclusive, user-centered design decisions across ZEISS digital products.

Sustainable updates

Sustainable updates

Our libraries follow semantic versioning with clearly labeled statuses for every token, icon, and component, so teams always know what’s stable, new, or changing. Updates are shared at the end of each sprint through detailed changelogs, with full alignment between Figma and React for smoother design-to-dev handoff. 

We release major updates every six months and support them with automated migration tools, allowing teams to adopt changes faster and more reliably. This structured approach has significantly improved adoption and upgrade speed across ZEISS.

Delivering business value at scale

We enable our business units to set up a new online product quickly and efficiently. This way, we allow them to fully focus on new valuable features.

0⁠+

Registered users of customer portals and ZEISS identity

0⁠

ZEISS websites created by 300+ editors with no design background that use pre-defined modules based on Beyond for Online

Every ZEISS website is based on Beyond for Online Experiences, enabling faster rollout while ensuring consistent design, accessibility, and a distinctive brand experience across all touchpoints.

Beyond for Online Experiences is the design foundation for all ZEISS business unit portals, helping teams create cohesive, accessible, and user-centered customer platforms.

We created templates and conversational components to support all internal AI platforms at ZEISS. Beyond for Online Experiences speeds up development and brings consistency to all our digital experiences.

E-commerce experiences at ZEISS are built on Beyond for Online Experiences. We've established a harmonized foundation across platforms, ensuring consistency and efficiency for all future digital sales touchpoints.

Translating brand into experience

To ensure online experiences reflect our brand, we have built all elements around our brand identity and visual principles to create a distinctive and unique design language.

Leading & inspiring

We guide users intuitively through clear layouts and strong visual structures, exceeding expectations with quality and precision in every interaction.

We spark new perspectives through sophisticated compositions, exceptional functionality, and engaging content that elevates the user experience.

Precise & open

Every element serves a clear purpose, maintaining perfect proportions and visual harmony to reflect ZEISS' commitment to excellence.

We foster meaningful dialogue with our stakeholders, creating responsive, connected experiences that grow through collaboration and feedback.

Responsible

Our designs are rooted in empathy, honesty, and sustainability. Focusing on meaningful, efficient experiences and continuous improvement based on feedback.

Beyond a system

Beyond for Online Experiences is a strategic enabler behind ZEISS’s digital success. More than a design system, it is a continuously evolving foundation that connects teams, brand, and technology to deliver measurable business value at scale. 

✓ Supports over 1.1 million monthly visitors across ZEISS online platforms
✓ Enables seamless delivery across hundreds of digital touchpoints
✓ Scales through structured library updates and automation
✓ Informed by research and accessibility standards to meet user needs 

This is not just a design asset. It’s how ZEISS builds consistency, drives efficiency, and delivers premium digital experiences across the globe.

Visit our Beyond for Online Portal