Duration:
2022 – Present
Role:
Design System Lead
Platforms:
Web (Angular), Flutter (mobile), HMI
Client:
Viessmann → acquired by Carrier
Challenge
When I joined Viessmann in 2022, the Design System existed as a basic Figma Library with minimal documentation and non-responsive components. There was no token structure, no theming capability, and no alignment across teams or platforms.
Approach & Leadership
1. Foundation & Alignment
Conducted a full component audit and interviewed all stakeholder groups (design, development, product).
Defined usage rules and component lifecycle → removed outdated parts, redesigned and enhanced others.
Outcome: a clean, unified component baseline as foundation for further scaling.
2. Scaling Responsiveness & Flexibility
Reworked every component to be fully Auto Layout enabled and responsive in Figma.
Introduced cross-platform design structure (mobile, Web, HMI).
3. Enabling Theming & Speed
Integrated Design Tokens via Tokens Studio, enabling live switching between Light & Dark Mode across the system in seconds.
Later migrated the entire Design System again to native Figma Variables, ensuring long-term viability without dependence on third-party tools.
4. Multi-Brand Transformation
After Viessmann’s acquisition by Carrier, I led the initiative to evolve the system into a multi-brand framework (Viessmann, Carrier, Toshiba).
With token architecture in place, teams can now switch entire UI designs to different corporate brands with a single click, including light/dark mode.
5. Brand Evolution Ready
When Viessmann introduced a new brand strategy and typeface, we integrated the new font system-wide within hours thanks to the flexible token setup.
6. Platform Adaptation (Web → Mobile → HMI)
Built a token-driven HMI mode adjusting UI to hardware specifications automatically.
Screens designed for mobile can now be converted to HMI layouts in seconds using token-driven rules.
Impact
⚡ Design creation speed:
Significantly accelerated
💪🏻 Design consistency:
Major improvement across teams and platforms
👩🏻💻 Developer handoff:
More precise, less rework
📐 Multi-brand scalability:
3 companies, light & dark mode, HMI mode, QA mode
🫂 Design System adoption:
High engagement across design and tech teams
📡 Future readiness:
Fully prepared for new brand rollouts and platform extension
Technical Implementation
Design:
Figma Variables & Tokens, responsive components, advanced Auto Layout.
Development:
System implemented in Flutter and Angular.
Documentation:
Tech documentation built via custom tools, design documentation via Zeroheight.
Key Takeaway
I transformed Viessmann’s design system from a static component library into a highly scalable, multi-brand, token-driven ecosystem powering Web, mobile, and HMI. This shift dramatically increased design velocity, consistency, and adaptability during major company transitions including mergers, rebranding, and platform expansion.