Plane flying overhead

Melbourne Airport

Melbourne Airport is the primary airport serving the city of Melbourne, and the second busiest airport in Australia. Its new website, built on headless CMS Kontent.ai, delivers an industry-leading experience for visitors to the airport and provides a solid foundation for future innovation and scalability.

After a redesign and build by Luminary and Hardhat in 2016, Melbourne Airport’s website was due for a refresh – both from an aesthetic and a technological perspective. 

Quick stats

The challenge

A visual redesign was needed, in part, to bring the site into line with the airport’s new branding. In terms of the technology, Melbourne Airport wanted to be able to re-utilise content from its website across multiple touchpoints – including kiosks and signage within the airport, as well as a mobile app. 

Following on from the success of the earlier project, Melbourne Airport again teamed up with Luminary and Hardhat to deliver the new site.

What we did

The rebuild project began with Hardhat conducting a discovery project to plan the new website. This process resulted in a detailed list of features and requirements. Luminary and Hardhat then worked together with Melbourne Airport to develop a roadmap based on the desired features and requirements. 

At the same time, Luminary worked closely with the Melbourne Airport team to determine the preferred content management system. Headless CMS Kontent.ai was ultimately chosen as the platform for the new site for its ability to accommodate omnichannel content delivery, as well as its speed, security and scalability. A headless CMS also facilitated a microservices architecture approach inline with MACH and Jamstack principles, allowing for integration of the site with best-of-breed tools including Algolia for search, Auth0 for authentication for gated content, Dynamics 365 for customer service forms, and Airport.ai for the chatbot.

The site also utilises state-of-the-art security and infrastructure platforms Azure and Cloudflare, which enabled it to successfully stand up to a spate of DDoS (Distributed Denial-of-Service) attacks affecting airports in the early weeks following the site’s launch. The use of NextJS for the front end facilitates extremely fast site loading, while from a content editor perspective, modularised content has made pages easy and quick to create.

For users, some of the key improvements include the directory, arrival and departure info, streamlined bookings for airport parking, and multi-language capability. 

Melbourne Airport website home page

Directory

The directory covers shopping, eating and drinking options within the airport terminals. While the directory was part of the old site, it now contains much richer information and is far easier to use. Visitors can now easily find what’s open in each terminal and quickly work out which retailers are close to their departure gate. Information is structured to enable detailed filtering – including Restaurant, Quick Bites, Health, Vegan, and Gifts and Souvenirs – with search powered by Algolia.

Melbourne Airport directory

Arrivals and departures 

Arrival and departure information is now available in real time, allowing users to search by flight number, destination, airline, terminal, time, day and flight status. Search results are presented in a table listing format with icons that direct the user to specific flight detail pages. 

The flight detail page includes information about the services near the flight’s assigned gate. Users can pin the flight they are interested in to the navigation bar to continue to see real-time updates while they continue to browse the website. The site also allows users to sign up to notifications across their browser or FB Messenger or WhatsApp so that flight status alerts can be delivered even when the user is no longer on the Melbourne Airport website.

Arrivals and departures - Melbourne Airport
Melbourne airport website


Parking widget 

The experience of booking airport parking has been streamlined through the use of an interactive multi-step form that allows users to choose the right parking product for their needs from anywhere on the website. While users are still taken to an external site to complete their booking, the experience is now far more seamless, with a transition screen between the website and booking engine to reduce friction and reassure the user that something is happening behind the scenes. 

The parking booking widget has also been reskinned so that it reflects the styling of the airport website and feels like a more consistent experience, engendering more trust in the external site. Enhanced business logic built into the platform also facilitates a smoother experience, for example preventing users from asking for parking dates that are in the past. Once the user gets to the confirmation screen they can also edit any of the fields without having to go all the way back through the process. 

parking widget

Multi-language

The site now allows users to switch from English to Hindi, Mandarin, Italian or French. When a new page gets published or changed on the site, a fresh version of the translations gets delivered to the site automatically, via Azure Cognitive Services. If required, pages can be edited with an alternative translation for a specific language. 

Multi-language
Melbourne Airport website
I cannot thank you enough for the work you have done in building this incredible website in the timeframe. I understand that I’ve put significant pressure on all of you at times to make sure we could get here but it’s such a great feeling knowing that we are now live. The vibe around the business has been fantastic and everyone is excited for the first step in our improved digital journey and the rest we can now achieve.
- Maddison Steel, Manager of Digital Experience, Melbourne Airport

Keep reading

Want more? Here are some other examples of our work that you might be interested in.