Redesigning Cathay Pacific App
UX/UI design over a weekend
Summary
Sometimes, we have a limited bandwidth on a project, and may not have the budget or time for initial user research. Working individually, I made decisions based on data we gathered from a related project, and my own understanding of UI design.
Despite having an extremely short timeframe of 3 days, 2 iterations of the app was born. I first improved the navigation, but later decided to have a complete visual overhaul. I evaluated the relationship between a user and an airline app, and came up with a homepage that solves problems.
Outcomes
- Simplified and reorganised the information architecture
- Addressed business needs by keeping featured deals easily accessible
- Amplified brand identity
- Improved app aesthetics
Backstory
We finished a 2-week service design project, adding a SIM card service directly from Cathay Pacific to smoothen the process of passengers getting connected throughout their journeys.
Besides including the SIM add-on during and after ticket booking, we tested a SIM button on the homepage. 100% of participants missed that button after a brief scroll and went for the hamburger menu. Their feedback is that the homepage is not useful at all.
After that project concluded, I used a weekend’s time to redesign the app’s homepage, turning it into a beautiful and useful home for passengers.
Case study contents
1: The hamburger
2: Building a better home
3: Home for passengers, not business
4: Branding beautifully
5: Next steps
6: Self-evaluation
Chapter 1: The hamburger
The homepage is simply a collage of featured deals, hence 100% of usability testers went for the menu when looking for a feature. There are ongoing debates on the use of hamburger menus, but to me on this project, the answer is very clear: They don’t need it.
What do users do on an airline app?
I recalled my own experiences as a traveller. I took a look at the features offered by Cathay Pacific and other airline apps — Emirates, United Airlines, and EasyJet. They all are addressing either one of these actions:
(1) Book flights. (2) Manage flights.
After identifying the umbrella categories, I recategorised the existing hamburger menu and replaced it with a bottom tab bar.
Chapter 2 — Building a better home
The original homepage:
- a banner which is actually a button for booking a trip
- featured promotions (e.g. for Father’s Day) in small boxes
- endless scroll of featured deals
Promote the promotions
These elements all remained in the “Explore” tab. However, I felt that users are not invited to click on them. To call for action, I replaced the banner/button with a search bar, making space for an expanded promotional card.
Offers are also arranged in a horizontal scroll, so vertical space is available for service add-ons e.g. baggage, SIM card, insurance.
The most important information: my flight
I imagined a scenario: Being a passenger of a flight in 2 hours and checking the app at the airport. The landing page is entirely useless and I need an extra tap to check my flights.
To make the home more useful, I expanded the top app bar and put a flight status card there if a user is logged in and has an upcoming flight. The difference in background colour signifies the different usage of information displayed.
Useful information is now available at a glance, especially when a user is worrying about many other things before boarding.
Chapter 3 — Home for passengers, not business
I could have moved on to some lower level screens like flight searching or boarding passes. However, I challenged the home screen once again.
Solving problems on the move
Even with the addition of the flight status card, the home still sent a message: “Spend money on us” — Is that what a user wants to see?
This is not the case on Cathay’s mobile website, though:
“Prepare for your flights” features were displayed with a primary accent colour before “Book a trip”. Solving problems is prioritised on web, but promotions are prioritised on the app.
An app is more than a link.
It is our privilege to have people install it.
It occupies their storage, gains access to their sensors, acquires the freedom to run in the background, etc. It is an investment from users and they install it to solve problems and get questions answered.
Thus, I decided to make “Flights” the primary landing page — a functional home to help passengers. “Explore” tab is now secondary.
Chapter 4 — Branding beautifully
Finally, I noticed that without the hamburger button, the top app bar is occupying unnecessary space. Meanwhile, the Cathay logo is not serving any purpose except branding, but it is too small for that.
I decided to brand the entire background with the primary colour, and blended in a big Cathay logo. A big welcome / sign in message filled the extra space gained to emphasise hospitality.
I also anticipated that check-in is the feature people would use the most, so I made it a primary action button.
Utilising background colours
“Flights” has a green background — it amplifies brand identity as a landing page, and provides contrast to white cards — the primary element used.
“Explore” keeps the light grey background — it allows colourful pictures to stand out, and minimise distractions.
Further simplification — Removal of bottom tab bar
With the help of colours, the bottom tab bar is less important, so I removed it to maximise screen estate, and users can swipe to change tabs.
This is a big decision that will heavily affect later designs. I made sure there is no horizontal swiping elements on the landing page, so users will not be confused.
I will also need to minimise page hierarchy as much as possible, to reduce the no. of taps on “back” when users want to return home or switch tabs.
The properties of cards will help me on this — they expand to display information on the same screen, rather than going into a new page.
Outcome
Before: Hamburger menu with 10 items.
After: 2 swiping-tabs with all features.
Chapter 5 — Next Steps
A usability test should be carried out to validate the initial overhaul.
Objectives
- Navigation: To test whether top pagination indicators can replace bottom tab bar
- “Flights” page: To test whether users understand every section
- “Book” page: To test whether the simplified search bar is enough to indicate the first step to book a flight, as well as subsequent flows
Self-Evaluation
- Backwards navigation may be difficult without bottom tab bar
- Lack of brand identity on flight booking page
- Empty states of landing page need to be taken care of
- Colour consistency of top pagination indicators needs to be improved
