Rebuilding an airline app around the one job it was there for: booking.

Saudia's app was hard to read and harder to book with. Pale text sat on photographs of desert dunes, and the app got in the way at exactly the moments that matter: picking a flight, adding a passenger, choosing a date.

I led the redesign and its motion from the first review to the final screens, supported by a second designer. The redesign went live.

  • “It wasn't up to the expectations.”App Store review of the old app
  • RoleSenior Designer at Monitise
  • ClientSaudi Arabian Airlines
  • PlatformiOS and Android app

The problem

Hard to read, harder to book.

The work started with an expert review of the live iOS app, walking the main menu and the whole booking journey up to payment. Every screen sat on the same dusk photograph, with thin white text on pale gold, and the main button faded into the background it sat on.

Old home: a dusk photograph of desert dunes behind the Saudia logo and a list of features in thin white type.
Old Book A Trip: thin white text on pale gold over the same photograph, with the Search Flights button fading into the background.

The old app, before

In the flight list, opening a flight unfolded its fares in place. Change your mind and you had to scroll all the way back up to close it, and once it was closed, nothing showed what you had picked.

Old Saudia flight list, Istanbul to Abu Dhabi: a flight opened in place shows Guest, Business and First fares stacked under it.
Old flight list closed again: two flights with a Best Fare price and a chevron, and no sign of the fare that was picked.

The old flight list, before

The price always showed the best fare, even after another one was chosen. The plus and minus buttons for each passenger type sat too close together. The Hijri calendar was hard to tell apart from the Gregorian one, and the Hijri switch on the date-of-birth picker had no label at all. Adding a new passenger hid behind a small plus button.

Old calendar with Hijri dates switched on: Hijri and Gregorian month names run together in one heading.
Old date-of-birth picker: a switch next to the Next button with no label to say it changes the calendar.
Old Select passenger screen: one saved passenger and a small plus in the top corner as the only way to add someone new.

And one thing was missing altogether: Alfursan members couldn't reach their loyalty account in the app.

“Alfursan members should have access and easy reference…”

App Store review, quoted in the expert review

The brief

Change the experience, not the plumbing.

Saudia's own developers would build the new design on the platform they already had, and the backend and web services were to stay as close to untouched as possible so the build could move fast. Every improvement had to come from structure, layout and clarity.

Two directions

Two ways in, one app out.

The work opened with two directions, three screens each.

Direction A · Booking first

Direction B · Menu first

Direction A, main screen: the app opens on booking, IST to JED with dates and passengers above Search Flights, and a tab bar along the bottom.
Direction B, main screen: a photo header above a feature list, Alfursan, Book a Trip, Check In, My Bookings, Flight Schedule, Flight Info and Feedback.
Direction A, side menu: a welcome with a sample member's photo and name, then Flight Schedule, Flight Info, Contact Us, Feedback, About, Settings and Log Out.
Direction B, Book a Trip: one way or round trip, big IST and JED codes on a card with a swap button, large dates and passenger details.
Direction A, Alfursan main screen: a gold card with reward and tier miles, then My Activities, My Statements, My Family and My Profile.
Direction B, Alfursan main screen: the gold card above a band of reward and tier miles, then My Activities, My Statements, My Family and My Profile.

Booking first opened the app straight onto Book a Trip, with Alfursan, check-in and bookings in a tab bar. Menu first kept a familiar feature list on the home screen and gave booking its own page.

Booking first made the app's purpose obvious from the first screen. Menu first had the stronger route card, with airport codes big enough to read in passing. The final app took the structure of one and the card of the other.

Decisions

Six changes that did most of the work.

Each change answers a finding from the review.

Decision 01

Book first.

The app opens on Book a Trip. Alfursan, check-in and bookings sit in the tab bar, and everything else lives under More.

Old home: a desert photo and the Saudia logo above a list of features, Book a Trip, Check In, My Bookings, Flight Info, Settings, About.
Before
New home opens on Book a Trip: round trip, IST to JED, dates, passengers and Search Flights, with Alfursan, Check In, Book a Trip, My Bookings and More in the tab bar.
After

Decision 02

Read the route at a glance.

Big airport codes with a swap button, dates in large type, passengers in one line.

Close crop of the booking card: Departing from IST Istanbul, Turkey, and Arriving at JED Jeddah, Saudi Arabia, with a round swap button between them.

Decision 03

One flight, one decision.

The flight list stays a clean list, with a date strip showing each day's lowest price. Picking a flight opens its own screen for the fare, so there's no accordion to scroll back through and the chosen fare stays ticked.

Old flight list with a flight's fares unfolded in place.
Before
New Select Outbound Flight list: a date strip with each day's lowest price, then flights with times, stops and price.
After
New Select Flight Class screen for the chosen flight: Guest, Business and First fares, with Premium Business ticked.
After

Decision 04

Two calendars, one clear rule.

Hijri dates sit smaller above the Gregorian ones, both month names are shown, and the toggle says what it does: the Gregorian date is used for booking.

New calendar with Hijri on: small Hijri numbers above each Gregorian date, both month names in the heading, and a toggle reading Display Hijri Calendar, Gregorian date will be used for booking.
Old calendar with Hijri on: the two calendars are hard to tell apart.

Decision 05

Passengers in their own space.

Counting passengers moved into a sheet with well-spaced buttons and the age range under each type. A new passenger form opens straight away, with saved guests one tap away.

Old Select passenger screen: one saved passenger and a small plus in the top corner as the only way to add someone new.
Before
New passenger sheet: Adult, Child and Infant rows, each with its age range underneath and well-spaced minus and plus buttons.
After
After

Decision 06

Bookings you can act on.

Find a booking with its reference and surname, keep it, share it, check in from it.

My Bookings search: booking reference and last name filled in, above a Search Booking button.
My Bookings: saved bookings with route, departure date, booking reference, payment status, boarding pass and a Check In button.

Alfursan

Loyalty you can see.

Members had been asking for it, so Alfursan got its own tab. The card shows up in the member's tier colour, Regular, Elite or Elite Plus, and the top of the screen takes on the same colour.

Alfursan tab, Regular member: a blue-grey card and a header in the same colour, miles below.
Regular
Alfursan tab, Elite member: a silver card and a matching header.
Elite
Alfursan tab, Elite Plus member: a gold card and a matching header.
Elite Plus

A virtual card with a QR code is one tap away, and under the card sit flight, partner and redeem activity.

Regular virtual card: the card turned upright with a QR code, member name and member ID.
Regular
Elite virtual card with a QR code.
Elite
Elite Plus virtual card with a QR code.
Elite Plus

A progress dial shows how far the next tier is, with a small plane on the arc marking where you are.

Regular progress dial: Upgrade to Elite, a ring with a small plane on the arc, and a tier line from Regular to Elite Plus.
Regular
Elite progress dial: Upgrade to Elite Plus, the plane further round the ring.
Elite
Elite Plus dial: Elite Plus Member, the ring with the plane at the top tier.
Elite Plus

Card artwork by Saudia

Lessons

What I took away.

A fixed backend still leaves a lot to fix: most of what the review found was layout and flow.

And a review is not a test. This work was measured against an expert review, not against travellers. Today a rough prototype would go in front of a few passengers before the first screens were final.

The final screens

The whole trip, from search to seat.

Booking, passenger details, seats and payment, Alfursan, check-in, flight information and schedules, and bookings, all drawn from one shared library of parts, from icons and buttons to the tier cards.

Book a Trip: round trip from IST Istanbul to JED Jeddah, dates and passengers, Search Flights.
Book a Trip
Select flight class
Passenger count sheet with Adult, Child and Infant.
Passenger count
Calendar with Hijri dates shown small above the Gregorian ones.
Hijri calendar
Seat Selection: a seat map with a legend for available, chargeable, selected, taken, exit and wing, and a prompt to assign seat 5D to a guest.
Seat selection
Check-in confirmation: You are now checked in, with an option to add the boarding pass to Wallet and the flight details.
Check-in success
Alfursan tab with a gold Elite Plus card, reward and tier miles, and links to activities, family and profile.
Alfursan card
My Bookings with two saved bookings and a Check In button.
My Bookings
Flight search loading

Next project

All projects

İşCep

Banking