Hochmoderne Multisite-Plattform

Eine hochmoderne Multisite-Plattform für alle Bedürfnisse

Um die verschiedenen Zielgruppen mit den relevanten Informationen rund um den Flughafen zu versorgen, haben wir eine technologisch hochmoderne sowie zukunftsträchtige Multisite-Plattform entwickelt: von der Sitecore Experience Platform und der Headless-Architektur über eine Progressive Web Application basierend auf React bis zum Microservice für die Flugdaten, immer aktuell gepusht mit SignalR, und einer spezialisierten Identity-Plattform. Wir setzen auf technologische Innovationen, um die gesamte Systemlandschaft des Flughafens einzubeziehen und dem hohen Bedürfnis nach Echtzeit-Informationen gerecht zu werden.Mit qualitativen sowie quantitativen Erhebungsmethoden haben wir uns den Nutzerbedürfnissen genähert. Ein grosszügiges Design, neu konzipierte Features und das innovative Mobile-Navigations-Pattern setzen neue Massstäbe in Human-Centered Design. Denn der Flughafen Zürich ist viel mehr als «nur» ein Flughafen.

Das Projekt gewinnt 2021 Gold in der Best of Swiss Web Kategorie Technologie und den World Travel Tech Award in der Kategorie Europe's Best Airport Website 2022.

Eine Reise durch den Flughafen Zürich

Dreh- und Angelpunkt der neuen Website sind die Flugdaten sowie die Fluginformationen. Die Fluggäste haben je nach Situation unterschiedliche Informationsbedürfnisse: Sie sind am Packen ihres Reisekoffers, sie steigen drei Stunden vor Abflug am Flughafen Zürich aus dem Auto oder suchen 30 Minuten vor Abflug das richtige Gate. Sie reisen allein, mit Kindern, mit viel Gepäck. Alle diese Passagierinnen und Passagiere brauchen aktuelle und personalisierte Fluginformationen in ihrem jeweiligen Kontext. Steigen Sie ein! Wir nehmen Sie mit auf eine Reise!

Ich fliege ab – ein Tag vor Abflug

Eine Familie mit Kindern packt am Tag vor den Ferien ihre Koffer und braucht die wichtigsten Informationen zu ihrem Flug. Die Mutter ruft flughafen-zuerich.ch auf und sieht umgehend, mit dem entsprechenden visuellen Gewicht sowie mit einer ausserordentlichen Intelligenz ausgestattet, die Flugsuche. Über die Eingabe ihrer Flugnummer bekommt sie sofort die notwendigen Fluginformationen übersichtlich angezeigt: von den wichtigsten Regeln beim Handgepäck über den Check-in-Schalter bis zur Abflugzeit. Sobald sie eingegeben hat, dass sie mit Kindern reist, passen sich die Informationen entsprechend an. Sie kann sich den Flug merken. Der gemerkte Flug ist anschliessend auf der Website immer sicht- und verfügbar. Auf dieser Grundlage kann der Flughafen der Nutzerin jederzeit und kontextualisiert aktuelle Informationen anbieten.

Ich fliege ab – 3 Stunden vorher

Die Familie trifft drei Stunden vor Abflug am Flughafen Zürich ein – der gemerkte Flug ist nach wie vor auf dem Display ersichtlich. Besitzt die Nutzerin ein Login, so wird der Flug über die Login-Session gespeichert und automatisch über die verschiedenen Endgeräte synchronisiert. Mit der Funktion «Parkplatz merken» kann sie das Parkhaus und das Stockwerk über einen QR-Code speichern und nach den Ferien wieder abrufen.Wenige Stunden vor Abflug ist es für die Familie entscheidend, dass ihr immer die aktuellen Fluginformationen angezeigt werden: Zu welchem Check-in-Schalter muss sie gehen? Hat der Flug Verspätung? Die Website stellt dies sicher, denn der Flugplan wird laufend aktualisiert. Dazu haben wir bei der Entwicklung der Applikation den ansonsten üblichen Standard, dass sich der Client regelmässig die Daten vom Server holt, umgekehrt: Mit SignalR pushen wir vom Server die Updates an den Browser. Für unsere Familie heisst das: Sie besitzt immer die aktuellsten Informationen über ihren Flug, ohne dass sie die Seite neu laden muss.

Ich fliege ab – wo muss ich hin?

Die Familie sucht den Weg zur Sicherheitskontrolle: Wie weit ist es, und vor allem: Wie lange ist dort die aktuelle Wartezeit? Die neue Flughafenkarte, ein Herzstück des neuen Auftritts, unterstützt die Familie. Sie ist in derselben isometrischen Ansicht abgebildet wie die Karten an den Displays vor Ort. Die Familie erkennt somit sofort, wo sie sich befindet.Dank der Wayfinding-Funktionalität kann sich die Familie den Weg von A nach B anzeigen lassen. Das intelligente Indoor-Navigationssystem erlaubt sogar Tippfehler. Alle Standorte innerhalb des Flughafens sind darin verortet: Ob Restaurants und Bars, ob Services und Geschäfte, ob Sicherheit, Zoll und vieles mehr: Die Familie kann ihren jeweiligen Standort und den gewünschten Bestimmungsort problemlos suchen und sich den schnellsten Weg dorthin anzeigen lassen – die Zeit, die man dafür braucht, wird ebenfalls angezeigt.

Ich fliege ab – ein bisschen Zeit bleibt noch

Die Familie weiss jetzt, wie viel Zeit ihr noch bleibt. Nun bleibt die Frage, was sie in dieser Zeit noch tun kann: Reicht es für einen Restaurantbesuch, oder bleibt es bei einem Sandwich? Kann sie noch Mitbringsel für ihre Gastgeber einkaufen?Der neue Webauftritt macht die gesamte Welt des Flughafens erlebbar und die vielfältigen Möglichkeiten sichtbar, die sich den Besucherinnen und Besuchern bieten. Der Flughafen spielt die Inhalte über themenspezifische Übersichts- und Detailseiten zu seinem Angebot aus: Airlines, Restaurants, Bars, Shops, Brands, Events, Räumlichkeiten, Services, Treppen, Lifte, Geldautomaten und, und, und. Auch die Flugdetailseite des gemerkten Flugs kann mit solchen personalisierten Inhalten angereichert werden. Über die Karte und die Wayfinding-Funktionalität sind all diese Angebote ebenfalls verortet. So weiss unsere Familie, was sie alles noch erleben kann, bis die Gate- und Boarding-Informationen sie vom Verweilen am Flughafen hin zum Verreisen bewegen.

Ich arbeite am Flughafen – welche Möglichkeiten habe ich?

Mit der Eröffnung des neuen Zentrums Circle für Hotellerie, Büros, Brands, Medizin, Kunst und Kultur wird der Flughafen für noch mehr Menschen, als die bereits über 27'000 am Flughafen Beschäftigten, zum Arbeitsort. Die Mitarbeitenden gehören zur grössten Nutzerbasis der Multisite-Plattform. Diese bietet ihnen einerseits Orientierung, andererseits sehen sie in ihrem Login, von welchen Mitarbeitervergünstigungen und Spezialpromotionen sie profitieren können. Diese Bearbeitung wird über Sitecore gesteuert. Mit der Eröffnung des Circle werden sie zudem einen digitalen Flughafenausweis besitzen.

Um diesen und weiteren zukünftigen Anforderungen gewachsen zu sein, haben wir eine dedizierte, eigenständige und komplett neue Identity-Plattform entwickelt, die sich zwischen Sitecore und dem Identity Provider befindet. Damit können die bestehenden Benutzer- und Logindaten, die aus unterschiedlichen Systemen stammen, einheitlich gepflegt sowie die Berechtigungen, Rollen, Benutzerattribute gemäss den Datenschutzreglementierungen verwaltet werden.

Das ganze Flughafen-Erlebnis auf einen Blick

Für die Digital Experience Platform des Flughafens Zürich haben wir im Sinne eines zukunftsgerichteten Webauftritts ein Mobile-Navigation-Pattern entwickelt. Das App-Pattern ist in die Website-Navigation integriert, sodass das gesamte «Erlebnis Flughafen» auf einen Blick erfassbar ist. Die vier Hauptbereiche «Fliegen», «Praktisches», «Einkaufen & Geniessen» und «Erleben» sind mit Icons illustriert, die den Nutzerinnen und Nutzern helfen, sich schneller zu orientieren. Alle Inhalte sind immer sicht- und klickbar.

Mit dem Scroll-Prinzip navigieren

Neben der Navigation helfen Kontext-Navigationslinks auf der Startseite, so schnell wie möglich auf die gewünschte Seite zu kommen. User-Tests haben gezeigt, dass Nutzer:innen auf dem mobilen Endgerät nicht zuerst auf das Navigationsmenü klicken, sondern zu der Information scrollen, die sie benötigen: in 80% der Fälle sind dies «Ankunft» und «Abflug». Der Rettungsanker im Footer ist eine weitere Hilfe für die Scroll-gewöhnten Mobilenutzer:innen: Dort bieten wir die wichtigsten Navigationslinks nochmals an.

Eine moderne Single-Page Application

2019 frequentierten täglich durchschnittlich rund 80'000 Reisende den Flughafen Zürich. An Spitzentagen waren es 115'000. Die Verweildauer beträgt dabei oft mehr als anderthalb Stunden. Der Aufenthalt am Flughafen ist zwar zeitlich gesehen überschaubar, dennoch benötigen die Fluggäste während dieser Stunden eine Vielzahl gezielter Informationen in Echtzeit. Damit sie für diese kurze Zeit keine App installieren müssen, aber dennoch in den Genuss von erweiterten Funktionalitäten der Website kommen, entwickelten wir eine Progressive Web Application – kurz PWA: eine moderne, responsive Single-Page Application basierend auf React. Diese nutzt die Fähigkeiten der Browser für eine bessere User Experience. Die PWA ist funktional nahe an einer nativen App mit deren Vorteilen und erlaubt ein konsistentes Benutzererlebnis über alle Geräte hinweg. Die PWA bietet auch Vorteile bezüglich SEO und damit für den organischen Web-Traffic sowie einer vereinfachten Veröffentlichung gegenüber nativen Apps, da es keinen Store Approval braucht.

Flexibler Inhalt – wo und wann man will

Die Informationsvermittlung via Website ist nur ein Kanal, womit sich der Flughafen an seine Besucherinnen und Besucher wendet. Neben den Orientierungshilfen auf der Website informiert vor Ort am Flughafen ein riesiges Informationssystem mit über 3'000 Displays die Gäste in Echtzeit: von Abflug und Ankunft über Check-in-Schalter und Gepäckausgabe bis zu Shoppingmöglichkeiten und Restaurantangeboten. Für diese heterogenen Ausgabemedien bietet die von uns entwickelte Headless-Architektur mit JSS Sitecore zahlreiche Vorteile: Der Content wird mit Headless von der Präsentation getrennt. Die in Sitecore erstellten Inhalte können inhaltlich konsistent, jedoch unabhängig von ihrer Darstellung auf die unterschiedlichsten Geräte und Systeme ausgespielt werden.

Mehr zur Headless-Architektur beim Flughafen

Headless & PWA – ein Dreamteam

Die Headless-Architektur trennt das Frontend vom Backend. Dies bringt den Vorteil, dass Frontend und Backend unabhängig voneinander weiterentwickelt werden können. So können aufwendigere Applikationen, die für die Nutzer:innen interaktive und benutzerfreundliche Erlebnisse bieten, einfacher im Frontend umgesetzt werden. Durch das Sitecore Headless CMS können die Inhalte an verschiedene Endbezüger, wie Website oder PWA, implizit und explizit personalisiert gespielt werden.

Mehr zu Contract Driven Development

Die Flugdaten – persönlich zugeschnitten

Das Kernsystem für die Fluglisten kennt eine enorme Fülle an Informationen. Doch die Nutzer:innen brauchen nur die in ihrem Kontext relevanten Informationen zu ihrem Flug. Daraus entstand der Flugdatenservice als eigenständiger Microservice, der vielseitig eingesetzt werden kann. Er spielt die Fluginformationen personalisiert auf die jeweilige Situation der Fluggäste aus. Die Detailseite zum Flug wird beispielsweise anders angezeigt, wenn ein Passagier aus dem Schengenraum, als wenn er von ausserhalb des Schengenraums kommt – da er in diesem Fall auch andere Informationen braucht. Und passionierte Beobachterinnen und Beobachter von Flugobjekten erhalten mit dem Spotter-Modus zusätzliche Informationen zu den Flügen, wie zum Beispiel Flugzeugtypen, Immatrikulationsnummern oder Informationen zu nicht-kommerziellen Flügen.

Mehr zur Personalisierung beim Flughafen

Flexible und robuste Architektur für die Zukunft

Den Flugdatenservice haben wir mit Blick auf die Zukunft als Microservice entwickelt, der unabhängig von der Website weiterentwickelt werden kann. Die Architektur besitzt so eine hohe Robustheit, und der Service ist einzeln skalierbar und kann regelmässig und schnell aktualisiert werden – unabhängig von den Release-Zyklen. Ausserdem können die elementaren Flugdaten beliebig in weitere Anwendungen und Services integriert werden. So geschehen beispielsweise für das Conversational Interface «Airport AI» – einen Messenger-Dienst des Flughafens. Dort fragen die Nutzerinnen und Nutzer alle Informationen zu ihrem Flug sowie zu allen Services, Shops, Restaurants etc. des Flughafens dialogorientiert ab und erhalten Pushnachrichten über WhatsApp, Facebook Messenger und Google Assistant.

Voll automatisiertes Deployment mit Azure

Alles in der Cloud. Diesen Ansatz haben wir konsequent verfolgt. Dabei kommen diverse Azure Services wie Azure SignalR Service, Azure Application Gateway, Azure Web App, Azure App Service Environment, Azure Search und weitere zum Einsatz. Mit Unterstützung von den bereits bestehenden Möglichkeiten von Sitecore und Microsoft haben wir den Aufbau der Infrastruktur und das Deployment aller Applikationsteile voll automatisiert. So sind wir in der Lage, neue Versionen der Infrastruktur und der Applikation mittels Blue-Green-Deployment zur Verfügung zu stellen, wodurch die Stabilität bei neuen Releases massiv erhöht wird. Zwei Systemumgebungen dienen beim Blue-Green-Deployment wechselseitig als Produktiv- und Test-Umgebung.

Laufende Optimierungen am Gesamtsystem

Wir setzen konsequent Azure Pipelines für die Erstellung der Infrastruktur und das Deployment aller Services und Applikationen ein. So können wir neue Software-Releases automatisiert, effizient und insbesondere ohne Unterbrüche aufschalten. Azure Application Insights geben uns einen tiefen Einblick in die Applikationen und die Services zur Laufzeit. So können wir laufend weitere Optimierungen am gesamten System vornehmen.

Spannendes Whitepaper zum herunter laden

Headless-CMS für das digitale Marketing

Headless-CMS für das digitale Marketing

Mehr spannende Einblicke

Gerrit TaaksMai 2023

Wie B2B Unternehmen mit Composable DXP digitale Mehrwerte bieten

Wie B2B Unternehmen mit Composable DXP digitale Mehrwerte bieten

Gerrit Taaks

Peter KöllnerWebinaraufzeichnung

Digitale Mehrwerte schaffen mit einer Composable-Architektur

Digitale Mehrwerte schaffen mit einer Composable-Architektur

Peter Köllner

Zum Magazin

Kontakt für Ihre digitale ​Lösung mit Unic

projektanfragen.de@unic.com+49 89 43 77 80 90

Termin buchen

Sie möchten Ihre digitalen Aufgaben mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus.​

Wir sind da für Sie!

projektanfragen.ch@unic.com+41 31 560 16 16

Termin buchen

Sie möchten Ihr nächstes Projekt mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus.