Philippine Airlines Website

Increasing PAL's online revenue by improving content discovery and accessibility

Mockup of PAL's new website design
Problem
Improve the website so PAL increases online revenue by 20%
Solution
Improve content discovery and overall accessibility especially on mobile
Impact
15% more mobile sessions, 12% more new users, 28% more visits to other pages, 100% more traffic from home page to booking flow
Role
Sole designer, conducted benchmark studies, sitemap evaluations, information re-architecture, interface design, and prototyping

Philippine Airlines is the flag carrier of the Philippines. It flies approximately 15 million passengers per year.

In 2018, PAL wanted to increase their online revenue by 20%. Their digital marketing team decided that improving the website can help achieve this.

How can we improve the website so PAL increases online revenue by 20%?

I joined the project when the research was already completed. The project team needed support to complete the interaction and visual designs. I joined as the second designer but eventually took over as the lead designer.

Philippine Airlines' site design before the revamp
This was Philippine Airlines' homepage before the redesign

Issues

The heuristic evaluation identified several issues, most of which were related to website navigation and accessibility. These issues affected how customers discovered content.

Issue #3: Inconsistent tab behaviorIssue #2: Fixed navigation is not maximized for wayfindingIssue #3: Inconsistent tab behaviorIssue #7: Call to action is difficult to identify in bannersIssue #5: Banner images embed text and don't use alternative textIssue #6: Redundant branding elements on banner imagesIssue #7: Call to action is difficult to identify in bannersIssue #8: Content structure does not enhance engagement and discovery of services

We also analyzed and benchmarked PAL's sitemap against those of other airlines. By analyzing the sitemap, we learned that:

  • Key revenue-generating content—like baggage information or seat upgrade information—were buried deep within the site.
  • Content wasn't always found where customers expect to find it.
  • Some pages were repeated redundantly through out the website. This was information overload for the website's users.
Philippine Airlines' sitemap
Philippine Airlines' sitemap

Design Solutions

Restructure the information architecture

In reconstructing PAL’s information architecture, we minimized redundancies—like About Us information—in both main and footer navigations.

We finalized a sitemap that focused in providing logical and intuitive paths to accomplishing user tasks.

In some cases, finding information still takes a user deeper into the site but, now, the website is structured to make it easier to locate information from the home page.

New PAL sitemap. Key actions and information are easier to find.
New PAL sitemap. Key actions and information are easier to find.

Make important travel information more discoverable

The new main navigation focuses on providing everything that a customer might need in a more intuitive location. Travel Information is also organized in a way that makes sense to customers. The new design provides quick access to previously underexposed self-service content.

The new PAL website
The new website's top navigation contains virtually all information that a customer may need during their customer journey with Philippine Airlines

3. Place primary actions in an accessible location

Four key customer jobs-to-be-done when the user visits the website are:

  • Booking a flight
  • Checking in
  • Managing a booking
  • Checking flight status

These four key customer jobs-to-be-done are now accessible from a single location which is always visible above the fold.

I cross-referenced what we currently had in the app with what we had in the website and benchmarked it against Help content from other commonly used financial apps
In the new website design, the four key Jobs-to-be-Done (Book Flight, Check In, Manage Booking, and Flight Status) are accessible from a form that is always above the fold

Increase contrast of flight deals vs other promos

We split the current design’s all-the-promos-are-here section into two distinct sections, Flight Promotions and Travel Extras.

Grouping information in this manner makes it easier for customers to identify and understand it.

Flight Promotions offers an easy way to discover cheap trips.

Travel Extras include promotions for travel insurance and lounges. These provide added revenue for the airlines.

Improve visibility of revenue-generating airline products

The new design puts an emphasis on purchasing extra baggage allowance, getting seat upgrades, and buying travel insurances.

At the time, these three comprised about 20% of PAL's current online revenue.

By placing these options in an area that is consistently above the fold in most devices, we hope to increase its accessibility to customers who need it.

Asynchronous chat allows customers to move in and out of their chats without the session getting disconnected or timing out
The new philippineairlines.com website

Design for mobile-first

During the study, we learned that a huge percentage of customers viewed the website using their mobile phones.

The new design makes sure that the website is accessible—and beautiful —from a mobile view.

Key actions (booking a flight, checking in, etc) are within reach of the customers thumbs and provide a quick way to complete key tasks. And below these key actions are the revenue-generating content like baggage allowance, seat upgrades, and travel insurance.

Lastly, the navigation sticks to the top to provide quick access to more travel information.

Asynchronous chat allows customers to move in and out of their chats without the session getting disconnected or timing out
The new philippineairlines.com website when viewed from a mobile browser

Impact

Comparing 3 months before and after the redesign (n=2.9M):

  • Increase in monthly sessions (+15% mobile, +1% desktop, +4% tablet)
  • Increase in new users (+12% mobile, +5% desktop, +5% tablet)
  • Decrease in monthly avg. bounce rate (-2% mobile, -4% desktop)
  • Increase in monthly avg. pages visited per session (+8% mobile, +8% desktop)
  • Increase in monthly avg. session duration (+6% mobile, +6% desktop)
  • Decrease in monthly avg. home page dropoff (-13%)
  • Increase in monthly avg. traffic from landing page to booking flow (+100%, from average of 4.3K to 9.3K)
  • Increase in monthly avg. visits to other pages (+28%, from 462K to 595K)

And, according to Sitecore:

  • 122% increase in organic search conversions
  • 80% increase in web users
  • 205% increase in direct search conversions
  • 93% increase in web sessions
  • 110% increase in social traffic conversions