• My Work
  • About
Elaine Ng
  • My Work
  • About

Air Canada assembled a new team to optimize their digital platforms. Tests on existing and new product features were conducted to:

  • Track drop-offs and pain points in any user journey

  • Measure the success rates of new ideas

  • Reach significant lifts of enhancements to generate more revenue

Our strategy was:

  • Discuss targeted goals with Product Owners and Designers to create tests involved in certain scenarios for new components/features that are to be launched on the Air Canada website. Share results and suggest new ideas to test if necessary.

  • Design and test new ideas for improving non-successful components/features.

  • Analyze data and customer feedback of existing components/features, and generate new ideas to test to reach a lift in results.

 

Digital Test Lab (DTL team)

Director Doha Al-Dujaili
Optimizing & Digital Testing Manager Bianca Adorante
Optimization Analytics Manager Christine Lim
Front-end Developer Archana Kumari Yadav
QA Shalini Tripathi & Lavanya Selvaraj
Adobe Target Developer Bhargav Vadapally

AirCanada.com


Projects

Vertical flight block for mobile web view project thumbnail

Vertical flight block

Mobile viewport


Notification Wireframes for Air Canada app thumbnail

Notifications feature

Mobile app


Heatmap calendar project thumbnail image

Calendar heat map

Web platform


 

Vertical flight block brief

Data collected from Air Canada’s Analytics team showed a major drop-off rate on mobile devices when users reach the Search Results page. Customers weren’t taking the next steps when looking to book a flight.

Question

How might we get users to tap to the next step?

KPI’s to measure:

  1. Click-throughs on Search Results page when tapping on a flight block to open the fare tray and view price options.

  2. Page conversion rates from Search Results to Review Travel Itinerary page.

Homepage in mobile viewport

Air Canada homepage in mobile view

Step 1: The user enters Air Canada’s homepage to search for a flight.

Original Search Results page listing flight options

Search Results page displaying relevant flights to choose from.

Step 2: Relevant flights are presented on the Search Results page for a user to choose from.

Original fare tray of flight details and price options

Fare tray displaying cabin fare options.

Step 3: When a chosen flight is selected, the fare tray opens and reveals fare options under a cabin class.

 

Possible solution

The hypothesis is to display cabin fare options vertically rather than horizontally to minimize cognitive load and for easier interaction on a smaller device. The goal is to have users find the desired flight they’re looking for and choose which fare to purchase easily.

Test report

A 5.53% lift on click-throughs from selecting a flight to open the fare tray.

A 2.52% lift page conversion from Search Results page to Review Travel Itinerary page.

The tests show a positive lift of the vertical design concept and concluded to launch this as a permanent experience on the website.

Air Canada homepage in mobile view.

Step 1: The user enters Air Canada’s homepage to search for a flight.

Search Results page lists flight options and their prices.

Step 2: A list of flights are displayed vertically on the Search Results page to scroll and select..

Fare Tray expanded to view cabin price options of a selected flight.

Step 3: When tapping on a cabin class, the fare tray expands revealing fare options of that cabin.

 

Notifications feature brief

At the time of briefing, the IT team was working to build the notifications back-end infrastructure. Our team took the chance to explore how we could integrate the notifications feature on the Air Canada app and web platform. This feature would carry all notifications pertaining to a user’s flight reservations, loyalty program account, marketing promotions, and other services linked through the airline (car rentals, hotel reservations, etc.).

Collaborative ideation

Mapping out preliminary concepts of a notification centre through wireframes. This project was put on hold to wait for the completion of the back-end infrastructure.

Screens shown in wireframes to map out the notifications feature on the mobile app..

Calendar heat map brief

Our team generated the idea to introduce a heat map to the homepage date picker calendar.

Question

How might we get more click-throughs from the calendar date picker phase to the Search Results page and possibly convert look to book visits into actual revenue?

KPI’s to measure:

  1. If the current prices on the calendar dates deter a user from looking into booking a flight.

  2. If showing no prices and only colours that indicate high, medium and low prices will affect a user’s choice to click through to the Search Results page.

  3. Generate revenue through to Confirmation page.

Original design of the calendar date picker showing flight prices on the dates.

Original design of the calendar date picker on Air Canada’s homepage.

 

Hypothesis

Colour code the calendar dates with a legend to see if it would increase look to book visits, and possibly motivate users to purchase a flight.

Experience A: Colour coded dates with a legend and no price display.

Experience A of newly design calendar with a heat map and legend for price range.

Experience B: Colour coded dates with price display.

Experience B of calendar with price displayed in the date along with a heat map.

Test report

Experience A sustained 82.16% in visits clicking on the calendar.

Experience A produced a click-through rate of 64.75% to the Search Results page.

Experience A held a conversion rate of 3.34% of visits to purchase a flight.

Experience B brought 78.36% in visits.

Experience B reached 60.79%.

Experience B reached 3.32%, overall on average making Experience B a drop of -0.6% over Experience A. In conclusion, Experience A was the winner and became a permanent experience on the website.

Elaine Ng © 2024