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.

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.

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.

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.

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.

Nächstes Projekt