Flughafen Zürich Hochmoderne Multisite-Plattform

Der Flughafen Zürich ist einer der wichtigsten Verkehrsknotenpunkte in Europa. Die neue digitale Plattform verbindet die drei Bereiche des Flughafens zu einem durchgängigen Erlebnis: das Airport Shopping (öffentlicher Bereich), das Airside Center (Passagierbereich) sowie den Circle, das neue, eng vernetzte und vielfältige Dienstleistungszentrum auf 180'000m2 Fläche.

Die Plattform dient als digitales Navigationssystem für den realen Raum: Ich fliege ab, ich hole jemanden ab, ich steige um, ich arbeite am Flughafen, ich will am Sonntag einkaufen oder ich habe eine Sitzung im Circle. Für all diese Bedürfnisse bietet die neue Plattform Orientierung in einem oft zeitkritischen Umfeld mit hohem, oft ortsbezogenem Informationsbedarf.

Leistungen von Unic: Analyse, Konzeption, Design und Umsetzung sowie Aufbau Infrastruktur und Beratung.

Kunde
Flughafen Zürich AG
Kunde seit
2019
Go-Live
April 2020
Website
https://www.flughafen-zuerich.ch/
  • 360 Grad Gefühlsänderungen durch äussere Umstände
  • Unendlich viele Stunden des Fernwehs
  • 45 Mitarbeiter*innen im Team
  • 3 Monate vor & mit Go-live ausschliesslich remote gearbeitet

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.

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 Nutzerinnen und Nutzer 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 Mobilenutzerinnen und -nutzer: 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.

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 Nutzerinnen und Nutzer 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.

Die Flugdaten – persönlich zugeschnitten

Das Kernsystem für die Fluglisten kennt eine enorme Fülle an Informationen. Doch die Nutzerinnen und Nutzer 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.

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.

Mehr Einblick ins Flughafen-Projekt erhalten – Webinar, 29. Oktober 2020, 11 Uhr

Usability

Wir sind die Nummer 1 in der Kategorie Usability.

User Research

Wir kennen die Bedürfnisse Ihrer Kunden, bevor wir Ihr Webprojekt umsetzen.

Digital Marketing

Wir orchestrieren Ihre Kanäle und Botschaften zu einem schlagkräftigen Marketing-Mix.

Frontend-Entwicklung

Wir bauen für Sie ein flexibles, barrierefreies, performantes und responsives Frontend.

Sitecore

Mit Sitecore setzen Sie Content, Experience und E-Commerce gebündelt ins Zentrum Ihres digitalen Auftritts.