How to change the brick of the house - without tearing it down: migrating frontend to Design System.

Today we would like to introduce you to something that might seem technical at first glance but is the basis for most of what you see when you use our digital touchpoints – the implementation of a Design System at Lufthansa Group . ?

Imagine wanting to upgrade the aesthetic of your house without disassembling its structure - this analogy closely aligns with the challenge faced by many corporations, including Lufthansa Group, when transitioning to a comprehensive design system in the digital landscape. This article will explore how we are implementing Design System to enhance frontend (FE) development, ensuring a seamless and efficient transformation.?

Why are we making this change??

We are committed to innovation and want to make using our digital services as easy and enjoyable as possible for our passengers. By standardizing elements that everyone notices, from buttons to forms, we make it easier to navigate and interact with our apps and websites.?

Why a Design System??

Transitioning to a design system provides numerous advantages:?

• Get products to market faster: With ready-made components, teams can focus on building new features instead of designing each element from scratch.?

• Reduce costs and increase efficiency: Because elements can be reused, the amount of work needed to create new sites and applications is reduced.?
• Consistency and quality: Every digital element looks and feels similar, which increases user trust and satisfaction.?
• Accessibility: Our components adhere to accessibility standards, providing the same usability experience to all our customers.?

Transition Process: Rebuilding Without Disruption?

As the Digital Hangar grows bigger and bigger, we set out to implement this design system for the majority of elements used in our web-based digital touchpoints. It's a very interesting and unusual process, where we must drill down to the smallest element of the pages—the atoms—replace them with design system atoms, and then test and reimplement. The unusual element is that the implementation is a success if nothing visibly changes. So, it's like we are changing most of the bricks in the wall of the house, and afterwards, you cannot even see they have been changed. The wall looks exactly the same. Secondly, it's an interesting process also, because unlike components, whole pages and web sections, which have dedicated organizational teams responsible, the atoms are used widely and across all areas. Therefore, we have set a cross-organizational migration process in the Digital Hangar, still adhering to our agile way of working, yet coordinating that every atom and its usage is validated by all relevant teams.?

How does this help passengers??

In all digital touchpoints of the Lufthansa Group, we thrive to have the same set of components and design principles. This means passengers will find familiar user interface elements such as buttons, icons, and forms, whether they are using a mobile app, website, or airport kiosk. For example, when a passenger wants to order a meal on board or update their details in the app, the process is similar and just as simple, reducing confusion and frustration.?

Furthermore, we can provide a seamless user experience for customers with disabilities. By sticking to our consistent design approach and incorporating features like screen reader compatibility and keyboard navigation support, Lufthansa Group ensures that all customers can interact with our digital experience.?

We hope this helps you understand why such changes are important for all of us. The Design System is not just about technology - it's about better and more consistent experiences for everyone.?