Toronto Pearson Airport - Homepage & Navigation

Platform: Desktop Web Browser

Tools: Photoshop, Sketch

Scope: 3 weeks

Role: : UX and UI Designer

Overview: Toronto Pearson Airport is a personal daily challenge I took on for my portfolio. Using a recent redesign rollout by the digital team at Toronto Pearson, I hope to address a better use of their home page and navigation.  More details can be found on my blog series The UX Files

Problem

I recently needed to plan for a trip into Chicago, Illinois. I needed information on my major airport, in this case Pearson International Airport (YYZ). Finding information on which airlines flew out of certain terminals, connecting transportation was very cumbersome to find on the website.

 

Eventually my travel itinerary changed where I needed to fly out of Billy Bishop Airport. Upon my arrival back from Chicago, I became aware via Twitter that Pearson Airport had redesigned their website.

 

My first initial reaction was I felt the Pearson homepage focused too much on the new restaurants. As a traveler I feel amenities and things to do are lower on my immediate needs. I like to know my surroundings and travel times at a visiting airport.

Current Homepage Redesign of Pearson International Airport website as of May 1, 2019
Current Homepage Redesign of Pearson International Airport website as of May 1, 2019

Solution

My proposal is to change the layout of the homepage where emphasis is on:

  • local weather
  • flight departures & arrivals status updates
  • available transportation connections
  • featured amenities / restaurant spotlights

A retooling of the top navigation bar and resorting of pages are a necessity.  The restaurants should be highlighted as point of interest in the airport. However you can drive more interest, if you shine the spotlight on the chef’s themselves. From my first glimpse of the restaurants, I realized they are managed by some of the greatest chefs in Canadian television. Leveraging that aspect would generate more traffic and notoriety for travellers visiting Pearson.

Research & Process

Top Navigation & Weather Widget

My first observation was the top left corner of the links to “Travel” “Corporate” and “Community” . Travel was unnecessary as it linked to the home page. Where as the Pearson logo image right below it does the exact function. Corporate heading is already located below the fold. I feel having it at the top felt like would mislead people to thinking its corporate sales. Community while an important highlight to explain to the general public, it’s not a pressing issue for travelers. It can be grouped below the fold. 

For the purpose of bilingualism, I recommend offering a toggle between English and French (EN/FR) which allows more space. This space can be used for a search bar, versus the full screen search overlay currently being used.

With the increase of space on the top, I proposed a simple local weather ticker/widget. This would help travellers have an idea when they arrive or depart from Pearson what to anticipate for local weather. This plays a factor for connecting travel, or what to wear if you’re arriving from a warm destination during winter travel. 

The next change I proposed was shortening the amount of headings on the splash page.  I felt with the current information architecture, we could reduce it down. Flights would display both arrival and departures. Connections  pertaining to connect flights to catch would also be added into this tab. Transportation would detail all available incoming and outgoing modes of transport, passengers can take or make arrangements from Pearson. While You’re Here has been rebranded to @Pearson highlighting food and drink, shopping and other amenities available at the airport

Flight Board
Original Flight Information layout on Toronto Pearson

The next phase was to group together all flight information into one tab. Flights would be the default tab on loading of the homepage. As the user sees the Flights tab open, they’ll have the option to filter the board pertaining departures, arrivals and connections. The user can then filter flights for yesterday, today and tomorrow all flights on the board. While looking at the entire board of flights can be a lot to scroll through, utilizing a search filter can help highlight the flight the passenger whats details immediately on.

Proposed redesign of the Flight Board on Toronto Pearson.
Transportation
Toronto Pearson's highlight of Transportation and Parking services.

For the Transportation section, I wanted to keep an emphasis on showing a map of Toronto Pearson’s terminals. I noticed that with the current website, the map to Toronto Pearson is tucked away and hard to locate on the website. When you do find the terminal map, it is an interactive PDF file. Switching between sections and navigating the map, in general, was time-consuming and overwhelming with information. I can understand not posting a detailed map on the website for security reasons, but a generalized map and waypoint finding can make it easier for travellers new to the airport.

With passengers needing different options to get to Pearson and to connect with other transportation services, a need for quick access for times and locations filtered for each terminal would be beneficial. I kept the filtering of information to Terminals 1 and 3, as well as at the main parking facility Viscount. From there a sub-filter for the possible transportation methods would be shown. Time schedules and more detail information in terms of bookings and making arrangements can also be shown, with the map of the terminal for context. For the public transit time table, I colour-coded them to represent each individual service operator and their stop location.

Proposed redesign of Transportation page for Public Transit - Terminal 1
While You're Here / @Pearson
Original Toronto Pearson homepage showcasing restaurants

My first reaction with the Toronto Pearson homepage was this large image of food. If this image was in a carousel or slide show and it changed over time, I might have been ok with it. However, I felt it took away the focus of what Toronto Pearson is; an airport, not a restaurant. I also did not feel that were utilizing the buzz that should be associated with these fine cuisines. If the restaurants at Toronto Pearson featured top chefs from Canada, promote it upfront. 

Reworking the section of “While You’re Here” gives an opportunity to give Top Chefs section to be the feature for Eat & Drink. Changing the main section to @Pearson gives it more of a social aspect and travellers to be excited while waiting for a flight. Splitting the sections to Eat & Drink, Shops, and Services into their own sub-categories would help users concentrate on what their main concern would be when visiting Pearson.

Proposed redesign for @Pearson section focusing on Top Chefs in Eat & Drink

Top Chefs would be the default page on loading for @Pearson. I wanted to showcase the chefs by featuring their headshots because they are celebrities in their respected fields. For international travellers, this would be a great appeal, without the need to per se leave the airport, to visit downtown Toronto. A search bar for the Eat & Drink would help travellers find specific foods and styles, and show the results below.

Takeaways

While I only focused on redesigning the homepage for the Toronto Pearson website, I know this is not an easy thing that can be done in a short span of time. When it comes to travel, there is a lot of information that needs to be presented to the traveller. I addressed the issues that plague the usage of travel information that’s “above the fold”, this only applies to the desktop web version. Ideally, the responsive design would be beneficial for mobile devices. In my experience of travels, I have had to rely on third-party apps, versus browsing the airport’s own website. Ideally the next phase to continue with this re-design, would be to address the “Accessibility” section for Toronto Pearson. I have been learning more lately when it comes to design, to think about being inclusive and addressing all people would need to interact with website.