A renewedfocus onpassengerexperience
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.
DESIGN WITH SIMPLICITYEVOKE 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 center 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 FINDINGOVER 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.
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 toolsfor 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.
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.