Chroma Experience

Independent Aircraft Modifier Alliance — Plattform für zertifizierte Lösungen in der zivilen Luftfahrt

Für IAMA, einen international agierenden Zusammenschluss von Unternehmen aus der Luftfahrt-Branche – gegründet von Eclipse Technics, Envoy Aerospace, Etihad Airways Engineering und Lufthansa Technik – haben wir gemeinsam mit Kollegen von Holisticon eine Plattform geschaffen, die es verschiedenen Stakeholdern ermöglicht, auf die von IAMA bereitgestellten Informationen zuzugreifen und diese weiterzunutzen.

Dabei stand die Implementierung von Funktionen im Vordergrund, welche die Erstellung und Verwaltung eines neuen Standards ermöglichen.

Tragfläche Lufthansa

Auftraggeber

Independent Aircraft Modifier Alliance

Geschäftsfelder

Definition, Herausgabe und Überwachung eines Standards im Bereich Flugzeugmodifikation und zugehöriges Wissensmanagement

Herausforderung

Bereitstellung von Informationen zu Zertifikaten für Modifikationen in einem komplexen Fachgebiet; Unterstützung bei der Entwicklung eines Standards; revisionssichere Bereitstellung des Reglements zur Erfüllung des IAMA-Standards

Lösung

Erstellung einer verteilten, skalierfähigen Plattform, die alle Aspekte der Entwicklung des IAMA-Standards abdeckt, die einer Vielzahl an Mandanten die Möglichkeit bietet, zertifizierte Lösungen bereitzustellen, abzufragen und diversen Flottenmerkmalen zuzuordnen

Aktivitäten

Beratung, Produktdesign, UX-Design, UI-Design, Frontend-Entwicklung

Technologien

Stencil, Web Components, Angular

Mehr Information

Projektzusammenfassung

Herausforderung

Primäres Ziel war es, den Prozess der Erstellung und Genehmigung von Modifikationen, Modifikationskomponenten und Dienstleistungen rund um die zivile Luftfahrt zu standardisieren, transparenter und wertschöpfend zu gestalten und damit insbesondere hinsichtlich der Dauer zu optimieren. Um eine solche Genehmigung zu erhalten, müssen Dokumente – wie Dokumentationen, Anweisungen, Zertifikate, technische Spezifikationen – den verschiedenen Zertifizierungsstellen (FAA, EASA, ICAO, CAA) jeweils für einen definierten Luftraum zur Verfügung gestellt werden. Diese Dokumente werden STC (Supplemental Type Certificate) genannt und ergänzen die existierenden Zulassungszertifikate der Hersteller.

Bisher existiert kein Standard außerhalb der luftrechtlichen Vorgaben zur Erstellung und Umsetzung einer Modifikation, was insbesondere zu Nachteilen bei dem Eignerübergang von Flugzeugen führen kann.

Unter anderem um diesen Nachteil zu minimieren, wurde die Allianz gegründet.

Vorgehen, Aktivitäten und Lösung

Um diesen fachlich und organisatorisch komplexen Anforderungen zu entsprechen, haben wir gemeinsam mit unseren Kollegen von Holisticon ein interdisziplinäres, agil operierendes Team zusammengestellt, das die verschiedenen Aspekte des Projektes gemeinsam mit unserem Auftraggeber im Rahmen eines zweitägigen Anforderungs-Workshops beleuchtet hat. Dabei wurde deutlich, dass eine webbasierte Plattform das geeignetste Instrument sein würde, um den fachlichen Anforderungen zu begegnen. In einem weiteren Workshop wurden explizit die Nutzerbedürfnisse untersucht, um diese im weiteren Produkt-Design-Prozess in den Mittelpunkt zu stellen.

Im Zuge der weiteren UX-Design- und UI-Design-Entwicklung wurden verschiedene Verantwortliche von IAMA regelmäßig in den Prozess einbezogen, da es aufgrund der parallelen Entwicklung des IAMA-Standards in Form eines Rulebooks und der damit verbundenen Wechselwirkungen einen permanenten Austausch bezüglich der spezifischen Anforderungen geben musste.

Als Schnittstelle zwischen dem UX/UI-Team und dem Entwicklungsteam wurde der Frontend-Technologie-Stack in zwei Domänen geteilt. So haben wir neben der Dokumentation von Anforderungen und der Dokumentation des fachlichen und nutzerspezifischen Konzeptes alle UI-Design-Ressourcen in Form von Web Components (oder Custom Elements) erarbeitet und in einem separaten Paket zur Verfügung gestellt. Diese Ressourcen wurden dann vom Frontend-Team in die verschiedenen Services integriert und dort eingesetzt, um die benötigten Sichten der Angular-Anwendung zu implementieren.

Ergebnis

Es ist uns gemeinsam mit allen Projektbeteiligten gelungen, eine verteilte, service-orientierte Plattform zu erschaffen, die es IAMA ermöglicht, ihre Geschäftsziele – auch unter durch Covid-19 stark veränderten Rahmenbedingungen – zu erreichen sowie den Nutzern der Plattform echte Mehrwerte zu bieten.

Die Allianz hat es so innerhalb kurzer Zeit geschafft, mehrere neue Mitstreiter zu finden und sich eine bedeutende Position innerhalb des MRO-Marktes zu erarbeiten.

Bis heute ist das Produkt ständigen Änderungen und Erweiterungen unterworfen, zu denen wir weiterhin einen Beitrag in Form von Design-Überlegungen und Frontend-Implementierung von Design-Komponenten leisten.

Time to market

12 Wochen

UI-Komponenten

462

UI-Libraries

4

IAMA Web-Application, Landing Page
IAMA Web-Application, Darstellung Mitglied
Nicole Noack
Nicole Noack Managing Director, Independent Aircraft Modifier Alliance

Chroma Experience hat uns grossartig beraten und in vielen offenen und ehrlichen Streitgesprächen zu einem idealen Ergebnis geführt. Neben dem Know-How, schätze ich insbesondere diese Beratungskultur, die wir mit Chroma Experience erfahren haben.

MRO, was?

Um die Herausforderungen dieses Projekts bestehen zu können, war unser Vorwissen aus einem vorherigen Projekt im Umfeld der Modifikationen von Flugzeugen sehr hilfreich. So konnten wir auf ein solides Grundverständnis dieses komplexen Marktes zurückgreifen. Die spezifischen Anforderungen zu verstehen war durch den engen Austausch und die offene Zusammenarbeit mit den Verantwortlichen nicht nur ein spannender und interessanter, sondern auch ein äußerst angenehmer Prozess. Alle Fragestellungen wurden intensiv und detailliert betrachtet und vorbehaltlos diskutiert. Dabei konnten wir und damit das Projektergebnis von der außerordentlichen Expertise unserer Ansprechpartner profitieren.

MRO ist übrigens die Abkürzung für Machine Repair and Overhaul.

Design-Prozess

Über unsere Entwürfe zum Service-Schnitt, dem Bedienkonzept und der Ausgestaltung der Bedienoberflächen wurde in regelmäßigen Zyklen unter Einbeziehung von Stakeholder-Rückmeldungen iteriert. So konnten wir eine Basis schaffen, die in Bezug auf Fachlichkeit, Nutzbarkeit und Realisierbarkeit so weit evaluiert war, dass in der weiteren Entwicklung sehr zielstrebig vorgegangen werden konnte.

Requirements Engineering, Stakeholder-Workshop

Wir haben dabei die Ergebnisse der Fach- und Nutzer-Workshops in Form einer schriftlichen Dokumentation – insbesondere für das Projekt-Team – beschrieben und auf dieser Basis Use Cases in Form von User Flows festgehalten. Diese wurden in Form von Wireframes verfeinert und schlussendlich in ein Interface-Design überführt. Mit einfachen Prototypen waren wir dazu in der Lage, innerhalb kurzer Zeit einen umfassenden Eindruck des Produktes zu vermitteln.

Bedienoberfläche, Landing Page
Bedienoberfläche, Ergebnisse erweiterte Suche
Bedienoberfläche, Member Capabilities
Bedienoberfläche, Empty State

Da wir zu einem sehr frühen Zeitpunkt begonnen haben, die Bedienoberflächen als Komposition von UI-Komponenten zu verstehen und diese in einer Design-Komponenten-Bibliothek vorzuhalten, konnten wir kurzfristig mit Anpassungen umgehen und parallel mit dem Design-Team an den verschiedenen Services arbeiten.

Die so entstandene Komponenten-Library diente in ihrer dokumentierten Form als inhaltliche Schnittstelle zwischen den Disziplinen Design und Frontend-Entwicklung.

Komponenten-Library, Ressourcen
Komponenten-Library, Design-Komponenten
Komponenten-Library, Templates

Frontend-Realisierung

Um den fachlichen und betrieblichen Anforderungen gerecht zu werden, bot es sich an, Angular als Frontend-Application-Framework einzusetzen.

Angular bringt das nötige Tooling mit, um wiederverwendbare UI-Komponenten zu implementieren und einzusetzen – allerdings nur im Angular-Kontext. Da wir weitere Frontend-Technologien einsetzen mussten – z.B. werden die Oberflächen der Keycloak-Instanz als Plain HTML ausgeliefert – haben wir uns gegen Angular-Komponenten als zentrale UI-Technologie entschieden und stattdessen mit Web Components (auch Custom Elements) eine standardkonforme Technologie eingesetzt. Web Components bieten den Vorteil, ohne weitere Abhängigkeiten in modernen Browsern präsentiert werden zu können. Darüber hinaus waren wir so dazu in der Lage, den fachlichen Schnitt zwischen Frontend-Anwendung und Frontend-Präsentation auch technisch zu vollziehen, um sicherzustellen, dass wir die spezifizierte Frontend-Architektur sauber und abgegrenzt realisieren können.

Nicole Noack
Nicole Noack Managing Director, Independent Aircraft Modifier Alliance

Für uns war die größte Herausforderung, dass wir innerhalb kürzester Zeit und noch in der Gründungsphase den Grundstock für ein permanent wachsendes System legen wollten. Neben der Auswahl der Technologien an sich, war eine zukunftsfähige Nutzeroberfläche, die einfach zu bedienen ist und gleichzeitig dem CI entspricht, von Bedeutung.

Ein weiterer erheblicher Vorteil dieses Vorgehens war die Möglichkeit, zeitgleich und mit einem größeren Team an der Anwendung und an den UI-Komponenten arbeiten zu können. So haben wir die UI-Komponenten jeweils in einer ersten Version als fachliche Komponente ausgefertigt, die direkt in der Anwendung eingesetzt wurde. Im Anschluss haben wir uns damit beschäftigt, die Komponenten jeweils mit ihrem spezifischen Aussehen auszustatten. Diese neuen Komponenten konnten genauso wie Anpassungen bestehender Komponenten über das Paketmanagement – in diesem Fall npm – verteilt werden.

Im Ergebnis ist ein projektspezifisches Design-System entstanden, das beginnend mit dem UX-Design-Prozess bis zur Frontend-Implementierung einen relevanten und konsistenten Bestandteil des gesamten Vorgehens darstellt. Wir können auf Anpassungen und Erweiterungen durch Eingriffe in ein fach- und technologieunabhängiges Tooling reagieren und bei strikter Einhaltung der inhaltlichen Constraints so ohne Randbedingungen und Abhängigkeiten aktuellen und zukünftigen Anforderungen gerecht werden.

Tragfläche Lufthansa
Projektmanagement
Stefan Heldt (Holisticon)
Requirements Engineering, UX-Research
Martin Brecht-Precht
Design-Lead
Martin Brecht-Precht
Technologie-Lead, Architektur
Martin Reinhardt (Holisticon)
UX-Design
Ilona Maslioukovskagia
UI-Design
Ilona Maslioukovskagia, Martin Brecht-Precht
Frontend-Komponenten-Entwicklung
Michael Seelisch
Frontend-Anwendungsentwicklung
Julian Wrastil (Holisticon)

Nächstes Projekt

Fiege Logistik Lager
FIEGE Logistik Stiftung & Co. KG Beratung ⟶ Architektur ⟶ UX-Design ⟶ UI-Design ⟶ Full-Stack-Entwicklung

Flexfillment — bedarfsgetriebene Steuerung von Lagerkapazitäten

Projekt ansehen