Cutting-edge Multisite Platform

A Cutting-edge Multisite Platform Capable of Meeting Every Need

To ensure that various target groups receive relevant information about the airport, we developed an innovative multisite platform equipped with cutting-edge technology. We incorporated the Sitecore Experience Platform and headless architecture, as well as a progressive web application based on React, microservice architecture for the flight data, which is continually pushed in real time by SignalR, and a specialised identity platform. Our approach was to use technological innovation to integrate the airport’s entire system landscape and meet the pressing need for real-time information head-on.By applying qualitative and quantitative data collection methods, we focused on meeting user needs. A bold design, newly developed features and the innovative mobile navigation pattern are setting new benchmarks in human-centred design. After all, Zurich Airport is much more than “just” an airport.

The project wins Gold in the Best of Swiss Web category Technology 2021 and the World Travel Tech Award in the category Europe's Best Airport Website 2022.

A Journey Through Zurich Airport

The new website is designed around the flight data and flight information. Passengers are interested in knowing different things depending on the situation they find themselves in. They might be packing their bags, getting out of their cars three hours before their flight takes off from Zurich Airport or looking for the right gate 30 minutes before take-off. They might be travelling alone, with children, with a lot of luggage. All these passengers need up-to-date, personalised and contextualised flight information.Get on board! Let us take you on a journey.

My Flight is Leaving – Tomorrow

A family with children are packing their bags the day before they go on holiday and need the most relevant information about their flight. The mother goes on flughafen-zuerich.ch and immediately sees the flight search, which is visually prominent and exceptionally smart. Upon entering her flight number, she is immediately shown a clear overview of the flight information she is looking for. The most important hand luggage regulations are listed, alongside the check-in desk and the departure time. As soon as she has indicated that she is travelling with children, the information is adapted accordingly.She can save the flight. The saved flight is then always visible and available on the website. This means that the airport can provide the user with up-to-date and contextualised information at all times.

My Flight is Leaving – in 3 Hours

The family gets to Zurich Airport three hours before take-off. The saved flight is still visible on the display. If the user has an account, the flight is saved in the login session and automatically synchronised across various devices. The Save Parking Location function enables her to save her car park and floor using a QR code and retrieve the information when she returns from holiday.A few hours before take-off, the family needs ongoing access to up-to-date information. Which check-in desk do they need to go to? Is the flight delayed? The website ensures that the flight plan is continuously updated. It is usually the client that is required to regularly retrieve data from the server. In developing the application, we wanted the inverse to be true. Thanks to SignalR, we can push updates from the server to the browser. This means that our family always has the most up-to-date information about their flight without needing to reload the page.

My Flight is Leaving – Where Do I Have to Go?

The family want to go through security. How far do they have to walk and how long will they have to wait? The family turn to the new airport map, a key element of our new website, for help. Like the maps provided on site, this digital map is also isometric. The family find it easy to determine where they are.The family can use the wayfinding system to plan their route from A to B. The intelligent indoor navigation system even takes typos into account. The map covers the entire airport: restaurants and bars, services and shops, security check, customs and much more. The family can easily find where they are and where they want to go and are shown the quickest route to get there and how long it will take.

My Flight is Leaving – but There’s Still Some Time Left

The family now know how much time they have left. Now the question is what they can still do in this time. Do they have enough time to go to a restaurant or will they have to get a sandwich? Do they still have time to buy a gift for their hosts?The new website brings the airport’s whole world to life and reveals the many possibilities open to visitors. The airport displays its content on thematic overview and detail pages, providing information on airlines, restaurants, bars, shops, brands, events, venues, services, stairs, lifts, ATMs and much more besides. This kind of personalised content can even be added to the flight details page where the flight has been saved. The information is also visible on the map and the wayfinding system. This means that our family know what else they can experience before the gate and boarding information drags them away from the airport and onto the plane.

I Work at the Airport – What Opportunities Are Open to Me?

Once the new Circle Centre for hotels, offices, brands, medicine, art and culture has opened, the number of people working at the airport will shoot up, far exceeding the 27,000 currently working there. Taken together, employees at the airport constitute the multisite platform’s largest user base. The platform offers them a clear overview of the airport, while also providing information on employee benefits and special discounts when they log in. This version is managed through Sitecore. When the Circle opens, they will also be given a digital airport ID.To meet these and other future requirements, we have developed a dedicated, independent and completely new identity platform, which is located between Sitecore and the identity provider. This makes it possible for existing user and login data originating from different systems to be maintained in a standardised manner and for the permissions, roles and user attributes to be managed in accordance with data protection regulations.

The Entire Airport Experience at a Glance

In keeping with our mission to create an innovative website, we developed a mobile navigation pattern for Zurich Airport’s digital experience platform. The app pattern is integrated into the website navigation bar, ensuring that users are given an excellent overview of the entire “airport experience”. The four main areas of “Fly”, “Practical”, “Shopping and Enjoy” and “Experience” are illustrated using icons, helping users to get their bearings more quickly. All content is always visible and clickable.

Navigate by Scrolling

In addition to the navigation bar, contextualised navigation links on the homepage help users access the information they’re looking for as quickly as possible. User tests have shown that users operating on a mobile device don’t start by clicking the navigation bar. Instead, they scroll to the information they need, which in 80% of cases is under “Arrivals” and “Departures”. The sticky footer is also aimed at helping mobile users who are more likely to scroll, by displaying the most relevant navigation links again.

A Modern Single-page Application

In 2019, approximately 80,000 travellers passed through Zurich Airport every day, on average. On peak days, this figure reached 115,000. The amount of time these travellers spend waiting for their flight frequently exceeds one and a half hours. Although passengers spend a relatively small amount of time at the airport, for the few hours they are there, they require a wide range of targeted information in real time.We wanted passengers to enjoy the extended features of the website without having to download an app for the short time they spend at the airport. This is why we developed a progressive web application or PWA, a modern, responsive single-page application based on React. The application uses browser capabilities to provide a better user experience. PWAs function much like native apps, offering similar benefits, and ensure the user experience remains consistent across all devices. PWAs are also advantageous when it comes to SEO and organic web traffic, as well as being easier to publish than native apps, as they don’t require store approval.

Flexible Content – Wherever and Whenever You Want It

The website is just one channel the airport uses to provide its visitors with information. In addition to the overview the website gives, a giant information system with over 3,000 displays on site at the airport provides the guests with real-time information about arrivals, departures, check-in desks, baggage claim, as well as shopping and restaurants. The headless architecture with JSS Sitecore we developed offers considerable advantages for dealing with this heterogeneous display media. Headless separates the content from the presentation. The content created in Sitecore can be displayed on a large range of devices and systems and remains consistent regardless of how it is presented.

More about Headless at the airport

Headless & PWA – a Dream Team

The headless architecture separates the frontend from the backend. The advantage here is that the frontend and backend can be developed independently. This means that more complex applications offering users interactive and user-friendly experiences can be more easily implemented in the frontend. The Sitecore Headless CMS enables the content to be shown to various end users, such as a website or PWA, with implicit and explicit personalisation.

More about Contract Driven Development

The Flight Data – Tailored to Each Passenger

The core system for the flight lists handles an enormous amount of information. Users, however, only need the information relevant to their context and their flight. This is why we developed the flight data service as an independent microservice, which can be used in a variety of ways. The service displays personalised flight information tailored to each passenger’s individual situation. For example, the flight details are displayed differently depending on whether passengers are flying from the Schengen Area or not, because different information is required in both cases. And passionate plane spotters can use the Spotter Mode to receive additional information about the flights, such as aircraft types, aircraft registration or information about non-commercial flights.

More about personalised experiences

Flexible and Robust Architecture for the Future

We were looking ahead when we developed the flight data service as a microservice, as it can be continuously developed independently from the website. This means that the architecture is robust, while the service can be scaled individually and updated quickly and regularly, independently of the release cycles. Moreover, the basic flight data can be integrated into other applications and services, if required. This was the case for the “Airport AI” conversational interface, a messenger service provided by the airport. Users can converse with the interface to ask questions about their flight, as well as request information about all services, shops, restaurants, etc. within the airport. They can receive push messages via WhatsApp, Facebook Messenger or Google Assistant.

Fully Automated Deployment With Azure

Everything should be in the cloud. This is the approach that we have systematically pursued. We use various Azure services to make this a reality, including Azure SignalR Service, Azure Application Gateway, Azure Web App, Azure App Service Environment, Azure Search and others. Supported by the possibilities Sitecore and Microsoft already have to offer, we fully automated the infrastructure setup and the deployment of all application components. This means we are able to provide new versions of the infrastructure and application using blue-green deployment, which greatly increases stability when there are any new releases. Blue-green deployment uses two system environments to alternate between a production and a testing environment.

Continual Optimisation of the Whole System

We consistently use Azure Pipelines to create infrastructure and deploy all services and applications. This means we can publish new software releases automatically, efficiently and without interruptions. Azure Application Insights gives us considerable insight into the applications and the services in real time. As a result, we are able to continuously optimise the entire system.

Contact for your Digital Solution with Unic

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

Book an appointment

Are you keen too discuss your digital tasks with us? We would be happy to exchange ideas with you.

Contact for your Digital Solution

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

Book an appointment

Are you keen to talk about your next project? We will be happy exchange ideas with you.