Wie Lufthansa Systems mit Figma Make realistische Cockpit-Prototypen erstellt
Piloten sind auf Bordsoftware angewiesen, um Flugrouten zu navigieren, den Flugverkehr zu überwachen, Turbulenzen zu vermeiden und vieles mehr. Um dynamischere Prototypen für Benutzertests zu erstellen, setzte Lufthansa Systems auf Figma Make.
Wie Lufthansa Systems mit Figma Make realistische Cockpit-Prototypen erstellt teilen
Wenn man Flugnavigationssoftware für Piloten entwickelt, steht viel auf dem Spiel. Tatsächlich schwebt das Risiko buchstäblich in 10.500 m Höhe. Bei Lufthansa Systems entwirft das Team Lidos Pilot Apps, die auf iPads im Cockpit laufen, und führen Piloten und Copiloten von Start bis Landung an mehr als 250 Flughäfen. Im Zentrum der App steht eine dynamische Karte, die wichtige Informationen über Flugrouten, verschiedene Verfahren, Wetter und Flughafenpläne anzeigen muss, ohne überladen zu sein. Prototypen zu bauen, die sich wie das Original anfühlen, war jedoch eine ständige Herausforderung.
Letztes Jahr begann Lufthansa Systems mit Figma Make zu experimentieren. „Make konnte sowohl Figma-Designassets als auch externe Datenquellen gleichzeitig nutzen“, sagt Lead Product Designer Pankaj (Pank) Juvekar. „Dadurch können wir Ideen in einem realistischeren Kontext validieren und uns dem Ergebnis annähern, das die Benutzer letztendlich erwarten.“ Wir haben uns mit Pank und dem Head of Design Kristjan Gomboc zusammengesetzt, um darüber zu sprechen, wie man für Piloten konzipiert, warum es so schwierig ist, Prototypen für Karten zu erstellen, und wie ein Experiment im Rahmen der „Innovation Week“ in Figma Make die Art und Weise verändert hat, wie sie neue Ideen testen.
Die meisten Menschen denken bei Software für Fluggesellschaften an Bildschirme in Rückenlehnen. Was entwickelt ihr bei Lufthansa Systems tatsächlich?
Wir entwickeln die Software, die Piloten und Co-Piloten im Cockpit verwenden, hauptsächlich auf iPads, die auf der linken und rechten Seite montiert sind. Unsere Lido-Produktsuite deckt den gesamten Fluglebenszyklus ab, von der Flugplanung über das Rollen, den Start, den Flugbetrieb, die Landung bis hin zur Überwachung. Mehr als 100.000 Piloten nutzen täglich unsere Lido Pilot Apps, um ihre Routen sicher und effizient zu fliegen.
Die Karte ist das Schlüsselelement unserer Pilot Apps. Sie ist mit Luftfahrtdaten wie Flugrouten, Wegpunkten, Ausweichflughäfen im Notfall und Turbulenzschichten gefüllt, damit Piloten ein besseres Situationsbewusstsein haben. Es gibt auch die Airport Bewegungs-Grafik (Airport Moving Map –AMM), die Piloten vom Abstellplatz zur Startbahn leitet.
Wie ist es, Software für Piloten als Endnutzer*innen zu entwickeln?
In meinem früheren Unternehmen war es immer eine Herausforderung, Zugang zu Endnutzer*innen zu bekommen. Hier war es überwältigend, wie eng wir mit ihnen zusammenarbeiten. In diesem Jahr hatten wir mehr als 100 Pilot-Sessions, überwiegend remote. Wir haben auch Präsenz-Workshops, und jeder Produktdesigner nimmt mindestens einmal im Jahr an einem Beobachtungsflug teil. Das bedeutet, dass sie im Cockpit sitzen und eine Beobachtungsstudie während eines normalen Fluges durchführen können.
Das Gute daran ist, dass Piloten sehr begeistert von ihrer Arbeit sind und gerne erklären, was sie tun und wie sie es tun. Sie geben uns immer wertvolles Feedback.
Das Schwierige daran ist, dass man selbst ein Experte sein muss, um mit Experten zu sprechen. Wenn du ins Cockpit kommst und Anfängerfragen stellst, verlierst du sie. Man muss ihre Sprache sprechen können und ein gutes Verständnis dafür haben, was sie tun. Wenn man präzise Fragen stellt, können diese Gespräche sehr fruchtbar sein.
Wir lernen viel von internen Experten, wie ehemaligen Piloten und Fluglotsen. Ich bin seit fast sieben Jahren hier und lerne immer noch jeden Tag etwas Neues. Die Lernkurve ist steil.
Du betreust hunderte von Fluggesellschaften. Wie gestaltest du deine Lösungen so, dass sie all ihren speziellen Anforderungen gerecht werden?
Wir entwerfen selten nur für einen Kunden, auch wenn dieser uns die Anfrage erteilt. Wir präsentieren die Idee 10 weiteren Personen, um eine Voreingenommenheit zu vermeiden. Fluggesellschaften unterscheiden sich je nach Region, je nachdem, ob sie Kurz- oder Langstreckenflüge anbieten, sowie hinsichtlich der von ihnen eingesetzten Flotten. Wir berücksichtigen die unterschiedlichen Sichtweisen der Fluggesellschaften, ohne dabei vom Endziel abzuweichen.
Unsere Software baut auf der jeweiligen technischen Infrastruktur und den betrieblichen Abläufen der einzelnen Fluggesellschaften auf. Jede Kundenanfrage oder interne Idee ist ein Balanceakt: Wie groß ist das Problem für die Branche? Sind wir in der Lage, das Problem zufriedenstellend zu lösen? Was ist das Minimum, das wir tun können, um dem Kunden einen Mehrwert zu bieten, unter Berücksichtigung unserer technischen und regulatorischen Einschränkungen?
Diese Diskussionen führen wir wöchentlich und es ist nicht immer einfach. Manchmal legen wir Dinge auf Eis, weil sich im Rahmen des Design- und Entwicklungsprozesses zeigt, dass die Lösung, die wir derzeit umsetzen können, einfach noch nicht gut genug ist.
Warum war die Erstellung von Prototypen für Karten eine so große Herausforderung?
Die Karten in unserer App sind dynamisch, aber unsere Design-Prototypen waren das früher nicht immer. Wir sind von Sketch über XD zu Framer gewechselt, um eine dynamische Karte zu erstellen, und Framer war nicht für jeden einfach zu bedienen. Deshalb haben wir uns hauptsächlich auf statische Entwürfe und manuelles Erstellen von Prototypen verlassen. Man kann den Piloten zwar einen Screenshot zeigen, und sie geben einem Feedback, aber es fühlt sich nicht wie in der Realität an.
Wie hast du angefangen, mit Figma Make zu experimentieren?
Während eines internen Hackathons, der „Innovation Week“, im letzten Jahr, in der Anfangszeit von Make, fragte ich mich, ob wir eine dynamische Karte in einen Prototyp integrieren könnten. Wir begannen mit einer intern entwickelten Webversion unserer Karte, bei der wir Mapbox, eine maßgeschneiderte Kartenplattform, als Basisebene nutzten, die auf denselben Daten basiert wie die iPad-App. Zunächst haben wir die API aus dieser Webversion ausprobiert, dann einen offenen Link, und beides hat mit Make ziemlich gut funktioniert. Wir könnten eine dynamische Karte gebrauchen, die in Aussehen und Funktionsweise der Karte in unserer App ähnelt.
Von dort habe ich unsere Icons für die obere Leiste, die untere Leiste und die Ebenen in Make importiert. Die Möglichkeit, Designs einfach von Figma-Dateien direkt in Figma Make zu kopieren und einzufügen, hat die Dinge unglaublich einfach und intuitiv gemacht. Das hat viele Reibungspunkte beseitigt.
Die Möglichkeit, Designs aus Figma-Dateien einfach per Kopieren und Einfügen direkt in Figma Make zu übertragen, machte die Arbeit unglaublich einfach und intuitiv.
Du musst komplexe Flugverkehrsdaten auf dieser Karte darstellen. Wie bringst du das ins Bild?
Die Anzeige von Verkehrsinformationen auf unseren Karten verschafft den Piloten ein noch besseres Lagebewusstsein und trägt letztendlich zur Sicherheit bei. Nach den ersten Recherchen begannen wir mit der Entwicklung eines Prototyps, doch es stellte sich als ziemlich schwierig heraus, so viele dynamische Informationen realistisch darzustellen. Das schien mir ein weiterer toller Anwendungsfall für Make zu sein. Also habe ich Make mit dem OpenSky Network verbunden, einer App, die den Benutzer*innen Beispielverkehr auf verschiedenen Flugrouten anzeigt, und die App so eingestellt, dass sie nur Beispielmarkierungen für Flugzeuge im Umkreis von 500 Seemeilen um unsere simulierte Position anzeigt. Durch Antippen eines Flugzeugs werden die Informationen angezeigt, die sich die Pilot*innen laut eigener Aussage gewünscht haben: Rufzeichen, Flugzeugtyp, Geschwindigkeit, Höhe im Verhältnis zur eigenen Position, Abflugort und Zielort. Es fühlte sich sofort vertrauter an. Als wir es den Piloten zeigten, verstanden sie es sofort.
Dann baten die Piloten um Marker in verschiedenen Größen, wie sie sie in Flugverfolgungs-Apps sehen. Ich bat Make, die Gewichtsklassen der Federal Aviation Administration (FAA) auf die Icons anzuwenden: super, schwer, groß, klein. Es war faszinierend zu sehen, dass Make mit nur wenigen Schlüsselwörtern verstand, was ich zu tun versuchte, ohne mich nach weiteren Informationen zu fragen. Eine Embraer 195 erscheint jetzt kleiner als eine Boeing 737. Die Iterationen verliefen schneller.
Was kannst du testen, was du vorher nicht testen konntest?
Alles, was von dynamischer Interaktion abhängt. Wir konnten den Zoombereich finden, in dem der Verkehr angezeigt werden sollte, ohne die Karte zu überladen, da wir hinein- und herauszoomen konnten und die Piloten uns das erwartete Verhalten des Zoombereichs beschreiben konnten. Gemeinsam mit meiner kartographischen Teamkollegin Agata konnten wir auch mit verschiedenen Kartentypen experimentieren, wie dem AMM, wo Flugzeuge auf der Startbahn ihre Farbe wechseln, sobald sie abheben. Das ist eine gesetzliche Vorschrift, um den Bodenverkehr vom Flugverkehr zu trennen, und man muss das wirklich sehen können. Flugbahnen tauchten sogar als Nebenprodukt des Experimentierens auf. Das war nicht geplant, und dadurch haben wir eine ganze Reihe neues Feedback erhalten.
Wir gingen immer wieder zu den Piloten zurück, ohne die Implementierung zu berühren. Unsere Apps werden in SwiftUI entwickelt, und da wir dort nicht jedes Mal experimentieren können, führt diese Vorab-Erkundung dazu, dass die Entwickler ein viel besser durchdachtes Ergebnis erhalten.
Gab es einen „Aha“-Moment, als du mit Make gearbeitet hast?
Ein paar. Make lässt sich über API-Zugangsdaten problemlos mit Open-Source- und Drittanbieter-Plattformen verbinden, sogar mit unseren internen, auf Entwickler ausgerichteten Plattformen. Die größere Überraschung war, dass man Make nicht nur Anweisungen geben, sondern auch um Empfehlungen bitten kann. Es schlägt mehrere Ansätze vor, die oft nach Komplexität sortiert sind: einfach, mittel oder schwer. Das macht es eher zu einem kollaborativen Denkanstoß als nur zu einem Tool zum Prototyp erstellen.
[Figma Make] ist eher ein kollaborativer Denkapparat, nicht nur ein Tool zum Erstellen von Prototypen.
Wie sieht es mit der Einführung von Make bei Lufthansa Systems aus?
Es fühlte sich intuitiv an. Wir haben mit unserem App-Framework und unserer dynamischen Karte Vorlagen erstellt, damit andere Designer damit experimentieren können. Mittlerweile nutzen mehrere andere Designteams Make, und wir tauschen Ideen zu dynamischen Prototypen und komplexer Geschäftslogik aus, für die sonst viele zusätzliche Bildschirme erforderlich wären. Karten spielen in unseren Web-, iPad- und Desktop-Apps eine zentrale Rolle, daher findet dies großen Anklang.
Wir können zwar nicht für alle Designteams sprechen, aber wir beobachten einen stetigen Anstieg der Zahl der Designer, die mit Make an Lido arbeiten – und zwar in einem solchen Ausmaß, dass manche Projekte ausschließlich mit Make umgesetzt werden. Der größte Vorteil zeigt sich bei der Arbeit mit komplexen Schnittstellen, wie beispielsweise Karteninteraktionen oder datenintensiven Benutzeroberflächen, die bestimmte Geschäftslogik oder App-Verhalten darstellen, deren Prototypenerstellung und Testung andernfalls schwierig wären. Natürlich haben wir noch mit einigen Anlaufschwierigkeiten zu kämpfen, aber wir sind zuversichtlich, dass sich diese mit der Zeit lösen werden.
Welchen Rat würdest du anderen Teams geben, die für Experten entwerfen?
Investiere in fundiertes Fachwissen und tausche dich regelmäßig mit den Benutzer*innen aus. Unsere Designer und Entwickler sind große Luftfahrtbegeisterte, und die meisten unserer Produktverantwortlichen und anderen internen Experten können selbst ein Flugzeug fliegen. Die Einarbeitungsphase ist anspruchsvoll, aber genau das ermöglicht es dir, echte Gespräche mit deinen Benutzer*innen zu führen und wirklich wichtige Probleme zu lösen.
Für Lufthansa Systems hat sich an den Anforderungen nichts geändert: Piloten benötigen auch in einer Höhe von rund 10.500 Metern weiterhin klare und zuverlässige Informationen. Was sich geändert hat, ist, wie früh das Team realistische, datengestützte Prototypen vorlegen kann. Mit Figma Make können Pank, Kristjan und ihre Teams Ideen immer wieder mithilfe von Piloten testen, bevor auch nur eine einzige Zeile Produktionscode geschrieben wird.
