Role
UX/UI designer
Target
B2B/B2C
Year
2021-2024
Duration
3 years
Team
16 designers
Skills
Sketch
Figma
Principle
Zeplin
Miro
Confluence
Adobe Exp.
The Online Design System was created to help everyone build high-quality digital experiences for the web, like public websites, customer login portals, or e-commerce platforms within ZEISS. It is a systematic approach that establishes a consistent, best-in-class platform and shapes the entire digital experience for customers, both for B2B and B2C.
When I joined the team, the foundation was already set up. My main contribution was designing, establishing, and maintaining consistency across the system and having everything documented. Thanks to a robust foundation, we scaled it with archetypes, modules and components that follow the ZEISS Corporate Brand Guidelines and fulfil the business unit's needs. Close collaboration with product owners, developers, editors and a dedicated team of engineers for the CMS was always central to the workflow.
Build a robust web-based design system that facilitates the complexity of all content requirements across the various business units within ZEISS globally.
The main challenges were two:
Build an efficient production cycle that would value research-based design while continuously matching the velocity of the development stream
Create an ongoing and reliable feedback loop between design and development (including design and code reviews) to achieve excellence through iteration.
The result is a strong and flexible library able to create archetypes which meet business and user needs, supported by consistent documentation, which evolves together with the Design System. The outcome enables different stakeholders and departments on building webpages.
The structure of the design system is loosely based on Atomic Design and consist of the following types:
Archetype: a group of Modules with a content narrative specific to a business&user need.
Module: a container for two or more components and/or foundation elements. It’s like a section
Component: a group of Foundational Elements. Together they deliver functionality with a certain level of behaviours and interactions.
Foundation: grid, colors, typography, graphic elements — and meets accessibility standards.
My Role & Responsibilities
I was part of the core team of the design system and contributed significantly to the following areas:
Design System Development: As a core team member, I played a key role in shaping processes—especially for documentation—and contributed to the task force that accelerated the transition from Sketch to Figma by rebuilding all components.
UX Research & Insights: Introduced Hotjar to the company and conducted quantitative research, leveraging data-driven insights to enhance the system and provide stakeholders with tangible evidence.
Consistency & Scalability: Atomic Design–based components applied across the entire design system (archetypes and modules) while ensuring alignment with ZEISS Corporate Brand Guidelines.
Documentation: Resolved proactively documentation inconsistencies and created a live, evolving documentation that later had to transition from Confluence to Frontify
Cross-functional Collaboration: Partnered closely with product owners, developers, editors, and CMS engineers within a 16-member design team. Served as the go-to person for quantitative research insights, onboarding new designers to the system, and addressing questions during weekly design meetings to ensure alignment and efficiency.
Each component was designed with Figma’s full capabilities and scalability in mind, ensuring they were ready for system-wide implementation. I prioritized accessibility, incorporated Auto-Layout, prototype ready components to ensure components can be easily used in prototypes, with all necessary states. Adhered to ZEISS’ brand guidelines, and ensured responsiveness. By using design tokens correctly and following web standards, I created pixel-perfect components that would maintain consistency and adaptability across various platforms
Documenting is a crucial part when working on a Design System. In our Design Team, we meant the documentation to be a live document. Constantly evolving and reflecting its status, everyone has the responsibility to document well. Very soon, when I started working on the project, I was asked to solve inconsistency gaps across the documentation. Given the fact that I was a newbie in the project and its status, it was not an easy task. Establishing and maintaining consistency was a big responsibility for me. I took advantage of the Weekly Design Critiques to create a better quality assurance for the documentation. Later on, it was also clear that the tools to document had to change. The first documentation for ZDS was made in Confluence: it was doing the job in a very clunky way, and it was tedious to enable third parties to access the information there. The documentation transitioned from Confluence to Frontify, a more professional and seamless experience aligned to the ZEISS Brand Guidelines.
Throughout the project, I gained insights into the key aspects of building a successful design system which has so many co-dependencies. These lessons were crucial to ensuring the system’s long-term effectiveness and adaptability.
Documentation Consistency: Ensuring live, evolving documentation kept the system clear and accessible for the entire team.
Scalability & Flexibility: A modular, scalable approach allowed for continuous updates without compromising system integrity.
Transparent Communication: Maintaining open and transparent communication throughout the project kept all stakeholders aligned and facilitated smoother collaboration and faster decision-making.
