Unifying Siemens’ Digital Experience Through a Core Design System
Driving cross-platform consistency, scalability, and operational efficiency across a global ecosystem
Situation
When Siemens combined its US (SW) and European (AG) digital teams into a single XD organization, we inherited three fundamentally different ecosystems:
- Two design languages and token sets
- Three CMS platforms (Webiny, Contentful and AEM)
- Three front-end component libraries
- Different documentation and onboarding paths
- No unified governance or contribution model
The impact was visible at every level:
- Customers experienced inconsistent UI and interaction patterns
- Content editors struggled with duplicated components, complex settings, and unclear rules
- Developers rebuilt similar components in different stacks with little reuse
- Brand consistency and accessibility were difficult to manage at scale
At the same time, Siemens was driving a “One Siemens” initiative and expecting a frictionless, unified digital experience across siemens.com, sw.siemens.com, xcelerator.siemens.com and in the future 100 additional domains.
Task
My task was to lead the unification and modernization of Siemens’ design systems across platforms and teams by:
- Establishing a shared design system (IRIS) (color, typography, spacing, iconography, tokens)
- Aligning SW (Contentful) and AG (AEM) component sets toward a common standard
- Defining and initiating a Core Design System spanning Figma, front-end libraries, CMS components, and documentation
- Improving the authoring experience for hundreds of global content editors
- Creating governance, contribution, and lifecycle processes that could scale with the organization
- Ensuring the system supported Siemens’ broader objectives around brand consistency, operational efficiency, and digital revenue growth
This was not just a UI cleanup effort — it was an organization-level systems project bridging design, product, development, content, operations, and brand.
Action
1. Created a shared fact base through a joint audit
I started by aligning SW and AG teams on a single view of reality:
- Audited foundational styles (color, type, spacing, icons) across siemens.com and sw.siemens.com
- Catalogued components and block-level patterns in both stacks
- Mapped differences in Contentful and AEM content models and editor settings
- Evaluated front-end React component sets against Figma libraries and documentation
- Brought cross-functional groups together to synthesize the findings instead of doing it in a silo
This collaborative synthesis built trust between previously separate teams and gave us a common reference point for decisions.
2. Established a unified, token-driven foundation
Next, we created a modern design foundation that could span platforms:
- Defined a shared primitive color palette and semantic token set for both SW and AG
- Standardized typography and spacing scales and aligned icon libraries
- Introduced themeable tokens (e.g., light/dark mode) with accessibility baked in
- Implemented token syncing between Figma and the Siemens Shared Library so design and development worked from the same source of truth
This token layer became the backbone for consistent, themeable UI across multiple tech stacks.
3. Aligned high-impact components across Webiny, Contentful and AEM
With the foundation in place, we focused on the components that touched the most pages and journeys:
- Harmonized heroes, carousels, cards, highlight sections, tiles, and other block-level components
- Reviewed and aligned container components such as tabs, accordions, and table of contents
- Updated element-level components like buttons, form fields, and icons for consistency and reuse
- Evaluated each change against brand direction, product UI (X2), research insights, and development feasibility
- Deliberately designed toward a strategic “middle ground” rather than simply copying one system into the other
This allowed SW (Contentful) to move forward quickly while giving AEM a clear path toward alignment.
4. Defined the Core Design System architecture
I then worked with leads from design, engineering, product, content strategy, and operations to define the future-state system:
- A Core Figma library for foundational styles, components, and patterns
- A shared front-end component layer integrated with the Siemens Shared Library
- Aligned CMS component models and settings that could be expressed in both Contentful and AEM
- Consolidated documentation in ZeroHeight and supporting tools for onboarding and usage
- A governance model describing ownership, change control, and contribution paths across US and EU teams
This blueprint positioned the design system as a cross-functional capability rather than a design-only artifact.
5. Improved the content-authoring experience at scale
Because Siemens’ web presence is heavily driven by content editors, I prioritized improving their day-to-day experience:
- Standardized content modals and simplified the configuration options for components
- Created consistent naming conventions and hierarchies for settings (e.g., theme, layout, behavior)
- Defined clear nesting rules for container components to reduce invalid or confusing combinations
- Improved theme selection (including dark mode) directly inside Contentful
- Updated documentation and onboarding flows to help editors understand how to use the system effectively
These changes made it easier for non-designers to build high-quality, consistent pages using system components.
6. Embedded governance, analytics, and lifecycle processes
To ensure the system was sustainable, I led the effort to put structure around how it evolves:
- Defined workflows for proposing, reviewing, and deploying component changes
- Clarified roles for design, development, and content in the component lifecycle
- Connected analytics to core components to monitor usage and performance over time
- Built QA expectations for UX, content, and accessibility as part of system changes
- Considered migration readiness (e.g., AEM → Contentful) in how components and patterns were defined
This transformed the design system from a library to a managed product with clear accountability.
Results
As I document this, it is early days for the transformation, but we have already realized some outcomes:
Experience Quality
- A more coherent Siemens design language across core digital properties
- Consistent patterns for color, typography, spacing, and interaction across SW and AG
- Accessibility and semantic structure embedded in tokens and components from the start
Operational Efficiency
- Reduced design and development effort through tokenized, reusable components
- Higher reuse of components across Contentful and AEM instead of parallel one-off solutions
- Faster onboarding for designers, developers, and content editors joining the ecosystem
Governance & Scale
- Unified documentation and Figma libraries that provide a single source of truth
- Defined governance and contribution processes that allow the system to evolve without fragmenting
- A scalable architecture capable of supporting additional platforms (e.g., community, account, support) over time
Strategic Impact
- Advanced Siemens’ One Siemens initiative by aligning multiple regions, platforms, and teams on a common system
- Supported Frictionless CX goals with more consistent, predictable digital experiences
- Created a strategic design foundation that supports Siemens’ broader digital revenue and marketplace ambitions
