Lufthansa

Establishment of Lufthansa Group's MULTIBRAND Design System in Collaboration with SYZYGY GmbH

Client

Lufthansa Group & Syzygy GmbH

Contribution

Design System

Duration

7 months

Year

2023

Lufthansa

Establishment of Lufthansa Group's MULTIBRAND Design System in Collaboration with SYZYGY GmbH

Client

Lufthansa Group & Syzygy GmbH

Contribution

Design System

Duration

7 months

Year

2023
Insight into the Challenge

As a Senior UX Lead and Designer, I had the privilege of contributing to a pivotal project for the Lufthansa Group in collaboration with SYZYGY. The challenge at hand was to create a cohesive and efficient design system for all brands under the Lufthansa Group umbrella – including Swiss, Austrian, Eurowings, and more. These brands had their distinct designs and UI components, leading to inconsistencies and time-consuming development processes. My role was to devise a solution that centralizes component management and facilitates seamless interchangeability across brands.

Solution Development

My first step involved conducting a comprehensive analysis of existing designs and UI components. I captured commonalities and differences among the brands to establish a robust foundation for the new design system. In close collaboration with the SYZYGY team, we collectively decided to utilize Figma as the central tool for designing, creating, and synchronizing components.

I focused on crafting a clear and flexible system of components that catered to the varying requirements of different brands, with reusability as the driving factor. I curated an extensive library of UI elements, encompassing buttons, forms, typography, and more. These components were designed not only to preserve brand identity but also to allow room for individual customization.

The Breakthrough: Introducing the "Brand Swap"

A pivotal leap in the design system's development was the inception of the "Brand Swap." This innovation enabled us to design and create a component in a manner that automatically propagated it across all Lufthansa Group brands. This approach introduced a significant boost in development efficiency. Singular changes to a component seamlessly translated into consistent adaptations across all brands. This breakthrough eradicated inconsistencies and streamlined the design and development process.

Efficiency Unleashed: The "Brand Swap" proved to be a game-changer in terms of efficiency. It enabled us to drastically cut down on design and development efforts. The mechanics were simple yet transformative: by creating a UI component within Figma, we could tag it with a "Brand Swap" attribute. This attribute acted as a trigger that automatically generated assets for all other brands within the Lufthansa Group.

The Benefits of the "Brand Swap"
  • Rapid Iteration: With the "Brand Swap" in place, design iterations became a breeze. When changes were made to a component, the automated process swiftly propagated these changes across all brands. This significantly accelerated the design process, allowing for quicker refinements and adaptations.


  • Efficient Development: From a development perspective, the "Brand Swap" was a revelation. Developers no longer needed to manually recreate UI elements for different brands. This not only saved substantial time but also minimized the risk of inconsistencies or errors in the codebase.


  • Consistency: The "Brand Swap" promoted consistency in design and functionality. The uniformity of UI components across brands helped establish a cohesive brand identity while ensuring a seamless user experience.


  • Scalability: As new brands or variations emerged, the "Brand Swap" accommodated them effortlessly. This scalability factor was crucial, particularly for a conglomerate as diverse as the Lufthansa Group.


  • Time-Savings: The most tangible outcome of the "Brand Swap" was the remarkable time savings. Designing and developing for each brand had previously been a laborious process, but with the automation facilitated by the "Brand Swap," we experienced up to 5x faster design and development timelines.

My Role in Implementation

As the UX Lead for the project, I played a pivotal role in conceptualizing, designing, and implementing the "Brand Swap" feature. I devised the structure and logic behind the feature, working closely with developers to ensure seamless integration into the Figma-based design system. The functionality was rigorously tested, refined, and documented under my guidance.

Implementation and Success

Translating the design system into Figma necessitated close collaboration with the design teams of the various brands. I conducted training sessions and ensured that all team members were adept with the new system. The iterative refinement and expansion of the system were ongoing processes, informed by feedback from design teams and developers.

The design system proved to be immensely successful. It resulted in a substantial surge in development efficiency, consistent designs across all brands, and an accelerated time-to-market for new features.

Conclusion

Engaging with this project was an invaluable experience that significantly enhanced my skills as a Senior UX Lead and Designer. The opportunity to contribute to such an extensive and demanding endeavor for a renowned brand like the Lufthansa Group showcased the indispensability of a well-conceived design system for a company's success and scalability. The collaboration with SYZYGY and the introduction of the "Brand Swap" marked milestones that paved the way for seamless, efficient, and consistent design within a complex brand environment.The "Brand Swap" became the cornerstone of our design system's success, exemplifying the power of innovation in enhancing efficiency. Its impact was profound, transforming a previously labor-intensive process into one that empowered designers and developers to work more swiftly, consistently, and cohesively across all Lufthansa Group brands. The fusion of intuitive design, meticulous development, and visionary innovation culminated in a triumph that not only streamlined processes but also demonstrated the pivotal role of a well-structured design system in a large-scale organizational context.

Insight into the Challenge

As a Senior UX Lead and Designer, I had the privilege of contributing to a pivotal project for the Lufthansa Group in collaboration with SYZYGY. The challenge at hand was to create a cohesive and efficient design system for all brands under the Lufthansa Group umbrella – including Swiss, Austrian, Eurowings, and more. These brands had their distinct designs and UI components, leading to inconsistencies and time-consuming development processes. My role was to devise a solution that centralizes component management and facilitates seamless interchangeability across brands.

Solution Development

My first step involved conducting a comprehensive analysis of existing designs and UI components. I captured commonalities and differences among the brands to establish a robust foundation for the new design system. In close collaboration with the SYZYGY team, we collectively decided to utilize Figma as the central tool for designing, creating, and synchronizing components.

I focused on crafting a clear and flexible system of components that catered to the varying requirements of different brands, with reusability as the driving factor. I curated an extensive library of UI elements, encompassing buttons, forms, typography, and more. These components were designed not only to preserve brand identity but also to allow room for individual customization.

The Breakthrough: Introducing the "Brand Swap"

A pivotal leap in the design system's development was the inception of the "Brand Swap." This innovation enabled us to design and create a component in a manner that automatically propagated it across all Lufthansa Group brands. This approach introduced a significant boost in development efficiency. Singular changes to a component seamlessly translated into consistent adaptations across all brands. This breakthrough eradicated inconsistencies and streamlined the design and development process.

Efficiency Unleashed: The "Brand Swap" proved to be a game-changer in terms of efficiency. It enabled us to drastically cut down on design and development efforts. The mechanics were simple yet transformative: by creating a UI component within Figma, we could tag it with a "Brand Swap" attribute. This attribute acted as a trigger that automatically generated assets for all other brands within the Lufthansa Group.

The Benefits of the "Brand Swap"
  • Rapid Iteration: With the "Brand Swap" in place, design iterations became a breeze. When changes were made to a component, the automated process swiftly propagated these changes across all brands. This significantly accelerated the design process, allowing for quicker refinements and adaptations.


  • Efficient Development: From a development perspective, the "Brand Swap" was a revelation. Developers no longer needed to manually recreate UI elements for different brands. This not only saved substantial time but also minimized the risk of inconsistencies or errors in the codebase.


  • Consistency: The "Brand Swap" promoted consistency in design and functionality. The uniformity of UI components across brands helped establish a cohesive brand identity while ensuring a seamless user experience.


  • Scalability: As new brands or variations emerged, the "Brand Swap" accommodated them effortlessly. This scalability factor was crucial, particularly for a conglomerate as diverse as the Lufthansa Group.


  • Time-Savings: The most tangible outcome of the "Brand Swap" was the remarkable time savings. Designing and developing for each brand had previously been a laborious process, but with the automation facilitated by the "Brand Swap," we experienced up to 5x faster design and development timelines.

My Role in Implementation

As the UX Lead for the project, I played a pivotal role in conceptualizing, designing, and implementing the "Brand Swap" feature. I devised the structure and logic behind the feature, working closely with developers to ensure seamless integration into the Figma-based design system. The functionality was rigorously tested, refined, and documented under my guidance.

Implementation and Success

Translating the design system into Figma necessitated close collaboration with the design teams of the various brands. I conducted training sessions and ensured that all team members were adept with the new system. The iterative refinement and expansion of the system were ongoing processes, informed by feedback from design teams and developers.

The design system proved to be immensely successful. It resulted in a substantial surge in development efficiency, consistent designs across all brands, and an accelerated time-to-market for new features.

Conclusion

Engaging with this project was an invaluable experience that significantly enhanced my skills as a Senior UX Lead and Designer. The opportunity to contribute to such an extensive and demanding endeavor for a renowned brand like the Lufthansa Group showcased the indispensability of a well-conceived design system for a company's success and scalability. The collaboration with SYZYGY and the introduction of the "Brand Swap" marked milestones that paved the way for seamless, efficient, and consistent design within a complex brand environment.The "Brand Swap" became the cornerstone of our design system's success, exemplifying the power of innovation in enhancing efficiency. Its impact was profound, transforming a previously labor-intensive process into one that empowered designers and developers to work more swiftly, consistently, and cohesively across all Lufthansa Group brands. The fusion of intuitive design, meticulous development, and visionary innovation culminated in a triumph that not only streamlined processes but also demonstrated the pivotal role of a well-structured design system in a large-scale organizational context.