by Peace Ojemeh (Perrie)

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

PKamahaZMURf5aqJjEu7EkKw9vwZshIgBMCx

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:

qQ6pLpzFplChGpoHI9RnVkT1jt9ATFlZogMI

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.

4zuLXusug5EB--K973PwqjcNQ5l0eJ-vOZWp

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.

8cSpclWOcx--mscyZKtgloyxEInyyCB0tyVW
Storyboard for Mr. Sammie Gold.

Designing a prototype

Check out the design on Bēhance.

nNDwCgoG4yHRVx0T1lePHdq3Ijc1HUfYYGZ0

The booking process

Searching for the flight:

5CcFrNviwnyPJnH29LhF7QUtTq-0Rluqy57c
The current booking process

Mr sammie would appreciate a more simplified form:

m5N0NhHakFx1bWGzW8YdgbM7YYzl9q9yCSVy
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:

uwvDxQDKfwHgfOjxu9kxLecq9DVOvJbfl9Rm
Current experience.
JejutsMNKVNp2rDun-enEG5fYyM-SZhP0mh0

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

mdroxkFJ99Cvu4DxGYYOfA1jiyF9zmZ5ASfP

Selecting your preferred flight and type of seat:

Current personal info page:

-mtmRqFMZtIRfy-AQKMDri-WRrfQo3dTThXN
IfNtk52MVCmhVpEvfTM8Ye2C-9CJB6uoR8dW
Current personal info form

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

GmbZZANnQnPvuhuGLloZkh1uLynthy7uAXum
New personal info form

Now it looks straight to the point? Yeah!

The current payment flow page:

ILlGyCiFF06fbfNbsXDpIQkMeZkJKYo0iroU
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:

vdTvMZniJ8xX-1yUq0KTaQTRFs5GbJ1lLK8E

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:

3OTQlCgphuqf1XDXAE90C-2AgjJ2JMBtB7ck
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:

9D5mpUcFCg11eiMUGdfUFsnlke1q4dVTml0J

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.
26G8GWih97iTJzrCdqae2Ajz-uk4AiAspQMp

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.