Zurich Airport is one of the most important transport hubs in Europe. The new digital platform combines all three areas of the airport into one seamless experience: the Airport Centre (the public area), the Airside Centre (the passenger area) and the Circle, the new, interconnected and diverse service centre, covering an expanse of 180,000 m2.
The platform functions as a digital navigation system for the real world: my flight is leaving, I’m picking somebody up, I’m changing flights, I work at the airport, I want to go shopping on a Sunday or I have a meeting in the Circle. The new platform meets these needs by helping users get their bearings in an environment where they are frequently up against the clock and require extensive information, usually location-based.
Unic’s services: analysis, concept development, design and implementation, as well as infrastructure setup and consulting.
- A full circle of emotions due to external circumstances
- Endless hours of wanderlust
- 45 employees in the team
- 3 months of exclusively working remotely before and during the go-live
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.
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.
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.
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.
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.
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.
Give your customers pleasure with a good User Experience.
We are the number one in the category Usability!
We know the requirements of your customers before we implement your web project.
We create a design for you that works on all devices.
We orchestrate your channels and messages into a powerful marketing mix.
We build a flexible, barrier-free, performant and responsive frontend for you.
We develop accessible websites according to WCAG standards.
When you implement your e-business strategy – go for our technical expertise.
With Sitecore you put content, experience and e-commerce at the centre of your digital presence.
Your web application in safe hands.
The new Zurich Airport website combines physical touchpoints with digital presence to create an integrated, personalised experience. What approaches and methods did we use to create a convincing user experience? Let me show you how a user-centric approach and an experimental mix of methods enabled us to do justice to both worlds.
We would like show how we have developed a state-of-the-art platform for Zurich Airport that opens many doors. We present the technologically innovative approaches of this interconnected multisite platform and try to shed light on the question of how decoupled Sitecore Headless really is.
The collaboration on the Zurich Airport project brought an unprecedented level of communication. Marta Imos-Merska, senior software engineer in Poland, speaks about the international collaboration and technical challenges on the project from a back-end developer’s perspective.
Two time zones, three countries, three native languages, none of which is English. In the interview, our test manager Romy Maurer-Wysseier talks about the experiences of working together in an international testing team to prepare for the relaunch of the Zurich Airport platform.