by Peace Ojemeh (Perrie)

A UX case study: Building a better experience (Re-designing the Air Peace Airline website)

Traveling by air is always an awesome experience, but I think the stress of booking flights should be looked into. In today’s digital world, we value speed and simplicity, so it is very important to have a good Online Booking System to save time.

For this reason, I picked Air Peace Airline, a Nigerian airline, as a case study for an effective User Experience (UX) design. To find ways to improve their booking systems, stay with me as we get out the solutions to our booking system.

The Design Process

Following the design process, I started with usability testing and ended with validation:

Research

After several discussions and interviews with friends, I found out the following:

  • Most people book their flights on their way to the airport
  • Some others in the middle of a business meeting
  • For some, they book theirs while seeing a movie
  • People wanted a section where they could get a cab, book a hotel, and see places they could visit, because some of them might not be familiar with the environment

We validated the idea that most people book their flights while doing other things. In the end, users would prefer a nice, fast, and easy-to-use method to book their flights while continuing with their day-to-day activities.

Objectives

  • Payment processes should be made faster. Users should be able to make payments as quickly as possible, and then return to their various activities
  • Implement a platform where all payments should be made on the site. Do this by collecting credit card details on the site instead of redirecting users. This would help with customer retention and reduce steps as well.
  • Being able to book a cab to take you to your destination would be another awesome experience

Prerequisites

  • Back up all design decisions with data.
  • Understand the payment flow, and devise a way to solve this issue.
  • Propose design solutions and validate them.

Personas

I created a persona for a typical user of the Air Peace website who wants to book a flight. I am using “Mr. Sammie Gold” as our user for today, but of course there are many other scenarios other than his.

Storyboard

I moved a step further to create a storyboard for Mr. Sammie, who just wants to book a flight quickly and continue with his meeting.

Storyboard for Mr. Sammie Gold.

Designing a prototype

Check out the design on Bēhance.

The booking process

Searching for the flight:

The current booking process

Mr sammie would appreciate a more simplified form:

The new booking experinece

Having less complex forms would actually lead to a better experience. This way, it gets easier moving from “booking” to “check in” to “my trip” with just “one click” and boom, you can start booking.

Booking the flight, before and after redesign:

Current experience.

The form looks a lot easier and user friendly now right?

Selecting your preferred flight and type of seat:

Current personal info page:

Current personal info form

This is a bit too crowded, so lets simplify it:

New personal info form

Now it looks straight to the point? Yeah!

The current payment flow page:

Old checkout flow

The old flow redirects user to “PayGate” and “Webpay,” which isn’t necessary at all. You can actually do all your payment on the Air Peace website. So, let’s fix that:

Oh wait!

Did you notice that on the payment flow, you have to select a payment method three times? This can put doubt and fear into a users mind, so let’s change that. Now let’s see:

New payment flow.

First of all, every payment is made on the Air Peace website itself. The user doesn’t have to stress himself out selecting a payment method — the system does that for you. And now, the steps have been cut down to two.

Voila! The user is done, a ticket is sent to his email, and Mr Sammie is happy — so he goes back to paying full attention to the meeting!

Other features:

Oh yes! Now, a user can plan his trip. If he clicks on the “plan travel” button:

  • He gets options to a book cab. Here he can see various ratings of cab companies, selects the one with the highest rating, and he’s done.
  • He can also get options to make hotel reservations. Hotels with different ratings are displayed clearly.

A user could look up beautiful places to visit in this new environment.

Validation

After the prototyping, I conducted a validation test with some users and discovered that:

  • The website became much easier to use, as it is easy for the users to see what they want to do at first glance
  • It’s now easier to book flights, forms are simpler and faster to fill out, the payment flow has been shortened, and all activities are done on the Air Peace website instead of redirecting users elsewhere.
  • The UI looks a lot more friendly and appealing to the eyes of the users

Generally, people loved the end results! And now, more people want to use Air Peace for booking their flights.

Thank you so much for reading through! I would love to get your feedback. And don’t forget to share if you think it made sense you.

I’m Perrie Fidelis — I am a Product Designer. You can connect with me on Twitter, LinkedIn, and Bēhance.