A renewed focus on passenger experience
With a new passenger-focussed design, the Brussels Airport platform informs, inspires and assists every visitor.
With more than 25 million passengers in 2018, Brussels Airport is the main airport in Belgium, and one of the largest airports in Europe. As Belgium’s second most important economic growth engine, Brussels Airport has developed a long-term vision and strategy to anticipate the challenges and opportunities that lie ahead.
A key point in that overarching strategy is to take pole position amidst competing hubs, by placing passengers front and center and improving the overall passenger experience.
During an ongoing visual rebranding, November Five was brought in to define how the website could meet that ambition. Throughout a nine-month process, we advised and supported the Brussels Airport teams in extending the strategic vision to a digital platform, together with its roadmap, UX and UI design, and front-end development.
To make a substantial improvement to the passenger experience, we focused on analysing how, and where Brussels Airport can offer extra relevance. This means the website needs to effectively capture and facilitate every visitor’s intent; the reason they end up on the website.
With a mobile-first mindset — meaning a change of attitude in the way content and functionality is presented — we focussed on what’s essential, less but better.
This approach avoids overwhelming visitors with choices and options. Once we effectively capture and facilitate the visitor’s intent, we can identify commercial opportunities to promote products and services from the airport and its partners. This includes being aware of the role played by its many partners — airlines, shops, luggage handlers, and others — and synchronising with them.
DESIGN WITH SIMPLICITY, EVOKE CLARITY
The new Brussels Airport homepage embraces a lot of whitespace, creating a clear and calm first impression. Driven by a thorough information architecture (IA) exercise, we were able to reduce the number of navigation items to five, whilst grouping (and cutting) subpages in a more logical structure for the user.
Putting the passengers front and centre also meant focussing on the passenger portal. We chose to relocate all other subsites (cargo, business, …) from the main navigation to a typical site-switcher in the top right corner.
To define the content for the home page, user research and analytics showed three main intents for visiting the site: finding a flight, getting to the airport, and finding/booking a parking spot.
Additionally, we took the opportunity to highlight the shopping & dining facilities right in our storefront. Our focus on just four intents reduced the cognitive load and restored balance in the viewport.
The ongoing rebranding exercise gave more weight and prominence to the logo shape, which we embedded in our design in a very bold way, giving the landing page an iconic look.
On scrolling down, we reveal the other key intents for visiting the Brussels Airport website, and go in-depth on the experience at the airport. We then conclude our page with a solid search, allowing users to always find a solution.
FACILITATE FINDING OVER SEARCHING
Now, users can easily find a flight from the home page, searching by destination/origin airport or by flight number. But with search engines being a specific point of entry, “every page is a landing page”, so the flight overview remains an important way in.
Once again, we started from research: arriving flights are the most looked-after info, that’s why we show them first. To ensure we do cover all intents, we designed big clear tabs to switch to departing flights. As with the home page, we again added a drastic amount of whitespace to make the page scannable — the first step to finding a flight!
To do so, we remapped flight data to the most logical scanning pattern: scheduled time, origin/destination, flight number & airline, status. More importantly, the number of flights that appear in the viewport has been drastically reduced, by combining coach flights (one flight catered by multiple airlines) in one row instead of showing them in different rows.
This decision did lead to unevenly sized table rows, because we wanted to show all different flight numbers and airlines for the same flight. But for the sake of findability, that’s a design trade-off we were happy to make.
EMPOWER THE JOURNEY
As part of the project, we introduced a new type of page: the flight detail page. Based on Brussels Airport’s ambition to put more focus on an end-to-end passenger journey, this page delivers the environment to inform and assist a very specific visitor intent: “I want to know the details of this flight”.
Because Brussels Airport can fully facilitate the journey of its visitors, we plot these steps into a visual timeline to assist them throughout their visit to the airport. Dividing the considerable amount of information into these recognisable steps reduces the cognitive load and gives the visitor control over his/her journey.
Within the created contextuality of each step, Brussels Airport has the understanding of possible sub-intents, questions, and — last but not least — upsell opportunities.
From preparing your travel to boarding; each step briefly explains the essentials, points the user in the right direction, and showcases relevant airport services ranging from parking to shops & bars.
Finally, we looked beyond the passenger (remember that arriving flights are mostly looked-for) and mapped timelines for another large group of users: people picking up or dropping off passengers.
THE RIGHT TOOLS FOR THE RIGHT EXPERIENCE
Defining a new, clearer Information Architecture (IA), and creating new templates, components, and pages to facilitate that IA is only half the challenge. We specifically wanted to focus on safeguarding the IA in the future. The content writer team at Brussels Airport is growing — and as people come and go, the site could again grow into a massive resource that is hard for a visitor to navigate, if the right tools aren’t in place to enforce the structure.
To avoid this scenario, we prioritise a larger set of stricter but purposeful templates, over a small set of flexible templates with lots of creative freedom.
We built the templating system to not only assist our content writing colleagues in maintaining the website navigation principles, but also to constrain our engineers within the same best practices.
All templates follow a carefully designed hierarchy to push the same principles to engineering and force ourselves to remain consistent.
By extending the templates, we succeed in two important goals. Firstly, we can reuse components and code on the front-end, reducing development cost and increasing maintainability. And secondly, we create an easy to navigate and repeating structure for our end user.
RESULTS
Our close collaboration with the dedicated team of Brussels Airport Company allowed us to fully understand their company ambitions. Our end-to-end methodology enabled us to translate them into a future-proof solution, substantiated by a strategic framework, a template-driven user interface, and a solid product architecture.
Curious to know more on how we strategise, define and build digital products?
Head over to novemberfive.co to read our case studies. You can find more on:
- De Tijd: Balancing push and pull with content
- Spencer: How we build Start-up of the Year
- How to boost digital customer care
