top of page

UX Design Institute

Design an Airline mobile app
through a UX process
ux institute.png

Challenge

 

 

Design a mobile App for an Airline company focusing on user needs and goals, following an accurate UX process, going through User research, design and building of a mid-fidelity prototype.  

My role

  • Learn users goals and context through User research.

  • Understand positive features and pain points of existing Airline mobile apps through Usability Tests. 

  • Design an efficient and user friendly flow of the app.

  • Build a mid-fidelity prototype that reflected the results of the previous steps. 

Project time

1 year

Background

Challenges I encountered during the process

  • Learning new research techniques involving users.

  • Gathering results after completing the research process. 

  • Deeply understand users' problems, create a user flow and design a solution. 

  • Learning how to sketch and create a prototype of the solution

  • Creating a wireframe to communicate with developers

The process

SCHEMA UX 2.png

The UX Design Institute is an excellent institution where students learn hands-on how to design great experiences for users. 

I chose to design an Airline mobile app after researching and understanding users' behaviours and goals. 

Research

Competitive benchmarking

I started the research process analysing and comparing three existing airline mobile apps and one travel aggregator app. 

​

My goal was to understand and learn conventions and how user-related problems are faced.

Schermata 2022-03-02 alle 11.58.54.png

Elements of Ryanair Home screen

Schermata 2022-03-02 alle 11.58.34.png

Elements of American Airlines  Home screen

Schermata 2022-03-02 alle 11.58.06.png

Elements of Alitalia Home screen

Schermata 2022-03-02 alle 11.59.24.png

Elements of Skyscanner Home screen

Online survey

My next step was to finally know more about users.  I sent out an online survey to find out about goals and context of users of airline websites or apps. 

From the survey questions I wanted to find out the following information:                        

                                

  • See which website/app were used the most                       

    and rough time frame of when users have used 

    them 

  • Understand what tasks they were trying to complete and if

    they were able to do it or not

  • Improvements users would like to see and possible changes they would prefer

  • What kind of devices they prefer to use to book a flight

​

Schermata 2022-03-02 alle 12.40.40.png

Example of the outcome of question #4 

Schermata 2022-03-02 alle 12.40.49.png

Example of the outcome of question #5 

Mobile Usability Test

This was my favourite part of the research process. Testing real apps with real users was very interesting and I learned how important is to be emphatic and open-minded. 

It was challenging at first, but I quickly learned how to be efficient and, more importantly, how to make the users feel comfortable during the tests.  

 

My goal was:

​

  • Observe the users’ behaviours during a booking experience.

  • Identify good and bad aspects of the user experience to help improve the usability of the mobile apps.

 

I interviewed three participants and I asked them to face two tasks during their booking process. 

​

​

IMG_2790.PNG

Snapshot of the Ryanair usability test

IMG_2789.PNG

Snapshot of the Alitalia usability test

After completing the usability tests and taking notes for each of them,

I summarised the GoalBehaviours and Context and identified from each test the Good features, Bad features and Expected features the users experienced.

Schermata 2022-03-02 alle 15.05.23.png

Example of Goals, Behaviours and Context

Schermata 2022-03-02 alle 15.18.36.png

Example of Good, Bad and Expected features

Affinity diagram

To gather and organise the insights of the user tests, I set up an affinity diagram. This would have given me a better understanding of the problems to solve.

 

Working with a team was exciting and challenging and I really enjoyed collaborating and getting to know other opinions.  

​

The goals were:

 

  • Review the research data obtained through competitive benchmark, survey, usability tests and organise them creating an affinity diagram.

  • Work with a team to pinpoint users’ goals, behaviours, context, mental models, positive feedback and pain points, in order to improve the quality of the Airline mobile app.

​

1.png
3.png
2.png
4a.png

Customer journey map

With a customer journey map I was able to gather together all the data, have a clear understanding of the problems to solve and build a strong base for the following design process. 

 

My goals were:

 

  • Review the high-level groupings from the affinity diagram and define the different steps in the users’ journey.

  • Understand the users’ point of view and pinpoint the priorities that need to be fixed.

CUSTOMER JOURNEY MAP SKETCH.png

Customer journey map sketch on iPad

Schermata 2022-03-02 alle 17.05.55.png

Customer journey map on Figma

What is the problem?

​

  • Home Screen:  immediately, users' mental model was different from reality. The screen was too cluttered, too much useless info, and some of the users couldn't even find the booking button at first. 

  • Add destinations and passengers:  users were expecting the option "All Airports" when more airports are available to avoid any confusion and waste of time during the booking process.

  • Calendar:  users were expecting to easily be able to book both outbound and inbound flights, but they got confused by the terminology used for outbound and inbound and they couldn't even understand how to book the return flight.

  • Price fares selection:  users were expecting a clear breakdown of the fares, but they were quite unhappy about the way this was presented to them. Very unclear prices breakdown, very hard to compare the different fares, useless showing unavailable fares.

  • Stopovers: this was definitely the worst pinfall of the all design process. For the entire test, users believed to have booked a direct flight. Only at the very last step of the booking they realised there was a stopover. This created lot of frustration and some of the users wanted to leave the app and book somewhere else.

Design

Flow diagram

The next step was to define a high-level flow for the mobile app.

The diagram was focused on one flow, that was, one primary use case.

This helped me to understand how users flowed through the design 

 

I sketched out the user flow representing each screen or state by a box. Each interaction, such as choosing a date

was represented by a circle.

​

My goals are:

 

  • Define the high-level booking flow for the mobile app.

  • Address all the issues highlighted in the customer journey map

  • Lay the groundwork on which I’ll build the designs in upcoming steps

Schermata 2022-03-02 alle 21.34.42.png

Sketching out the solution

This was the core of the design process. I used sketching to design the solution to the problems users encountered.  

​

The challenge was to get a final design that was nice, clear and easy. This process took a while and, after different attempts, I was happy with the result. 

My goals were:

​

  • Build on the flow diagram previously created, to sketch the screens and screen states for users flowing through the mobile app

  • Address all the issues and user goals identified in the research and analysis

  • Use sketching as a tool for problem-solving

​

1.png

Home Screen and "Book a Flight" main screen

3.png

Outbound - Inbound calendar

2.png

Departure location - Arrival location

4.png

Complete "Book a flight" screen

Insert screen "Add children"

5.png

Fly out - Fly back screens 
Insert Fare explanation and booking 

7.png

Passengers details screen

9.png

Extra bags - bag info and confirmation -

complete screen

8.png

Select Outbound and Inbound seats

10.png

Flight Summary - Fare Info 

# Home screen and main booking screen

HOME - MAIN.png

The home screen and main booking screen are very simple and intuitive. 

I focused on avoiding any clutter and useless features or information. 

# Select location out and in 

INBOUND.png

This simple layout will allows users to use a typical search bar or their location to find a town or airport to travel from and to. 

The smart defaults Recent and Suggested will help users start a faster search.

Very important to use the option All Airports for a city like London, where we have multiple choices.

# Calendar out and in 

CALENDAR.png

The calendar has a very clean and simple layout reflecting the users' feedback

# Complete main booking screen 

COMPLETE MAIN.png

The complete main booking screen will allow users to also add minor passengers to the booking

# Fares comparison 

FARES.png

Fares comparison was one of the main pain points users found during the usability tests.

With this design, I wanted to highlight the different fares and give a clear breakdown of times, duration and prices. 

To select a fare, users will have to go through another screen with the explanation of the fare itself, so that any confusion is avoided.

# Passengers details 

PASSENGER FORM.png

The design of the form to enter passenger details is very intuitive and allows users to

log-in if already have an account or to add their details as new users

# Select seats 

SEATS.png
PRICE BREAKDOWN SEATS.png

The select seats screen is very simple and introduces a drop-down screen that shows a clear and detailed price breakdown 

# Extra bags or services 

EXTRA BAGS.png

This screen will allow users to add any extra bag or service. 

As expressed by the users during the usability tests, the design is very clear and shows only the essential features. 

To add a bag, users will go through another screen that will give any useful information that will avoid any confusion. 

# Extra bags or services 

SUMMARY.png

The summary page gives users the chance to check the final details before the payment. Locations, times and duration are shown clearly and an info button gives the chance to double-check the booking. 

A menu on the top of the screen gives users the chance to go back to the other sections of the booking in case any amendment is needed. 

# Interactions 

INTERACTIONS.png

To make the mid-fidelity prototype as realistic as possible, I created an interactive prototype on Figma, accurately connecting each screen to obtain a high fidelity flow to be tested with users. 

# Wireframe 

WIREFRAME.png

The very final step is creating a wireframe with annotations to hand over to developers, where I included any extra details they will need to build the app. 

Prototype

Conclusions and takeaways 

Airline mobile apps are probably between the most used apps by people in general and at the beginning of the project I believed it would have been very hard to do something better or different.

I have to say, approaching the design through the UX process, made me understand the good things but above all the many mistakes and inaccuracies that also big companies did when building their apps.

Thanks to the research process, the following ones, design and prototyping, seemed much easier and more fluent to complete. All the elements I didn't even notice at the beginning looked obvious after the research process. 

 

As UX designer, my main focus was to keep the user experience at the core of the process.

Sometimes, this was the challenging part too, trying to avoid self-referential design choices or skip any step with the risk of rushed solutions.

​

Working most of the time by myself was positive because I was able to take my time on aspects that I wanted to examine more in depth and the decision process was all on me. 

At the same time though, I would love to redesign the same app with a team of people and discussing ideas, problem-solving solutions and of course having a drink together at the end!

 

  

bottom of page