Fly UX

Overview

Fly UX is an individual project for UX Design Institute Professional Diploma. My mission was to design a native mobile app for a start-up airline company.

During the research, it came to me that one of the biggest problems of airline apps is that users are not confident enough to complete flight booking on mobile devices.

How might we improve users' confidence over booking flights on native airline apps? I tried to solve this problem by focusing on optimising the booking process.

Tasks

UX research, UX design, UI design

Skills

Usability test, Persona, Affinity map, Competitive study,
Information architecture, User flow, Wireframe, Prototype

Tools

Figma, Whimsical, Photoshop, InDesign

Outcome

Comment from one high-fidelity prototype tester:
"This app looks simple and neat. I have all the essential information I would like to know, and there is no unnecessary step or functionality, which allows me to search and book the flights efficiently and confidently."

Try it out!

Play with the interactive prototype below, and try to book a trip for 2 adults from London Gatwick to Amsterdam, 19 September to 27 September, preferably in early mornings.

Define the problem

How can we encourage people to book flights on mobile?

To understand the current ecosystem of mobile airline apps, I conducted a series of user interviews about their mobile flight booking experiences. Most interviewees said they use the airline apps mainly for check-in and boarding, and would prefer to search and book flights on websites.

This fact made me start thinking: how can I encourage them to book flights on their mobile phones?

Why booking process matters

I tried to find out what is actually stopping people from booking flights on mobile devices. In the interviews, 60% of the users felt that it takes more effort to find the right flight on mobile apps, while 75% of them thought that unnecessary information shown and requested (add-ons and personal details) makes the mobile booking process more demanding and time-consuming.

These findings led to my initial design consideration:

Would a clear, smooth and intuitive process improve users' confidence of booking flights on mobile app?

User research

User groups

While the needs and pain points are different, all user groups share the same task and goal: to find and book the best flight easily and quickly.

As a business traveller, I want to quickly find the flight that suits my calendar best and share the flight information. It would be good to see fare scheme benefits and switch cabin classes easily.

As a holiday maker, I want to keep an eye on the flights that interest me and find the best deal. I hope I can save all the flights I like and easily go back and compare the prices.

As a busy parent, I want to sit together with my family and make the trip easy and convenient. Filling everyone's passenger details has always been a hassle in my flight booking experiences.

As a passenger who requires special assistance, I want to have easy access and get support from airline crew. However, most of the time I cannot find the direct way to inform my requirements.

User journey

Competitive analysis

Then I did usability testing and competitive research on several market-leading peer products to see what they have done well, and what pitfalls they failed to avoid regarding the booking process.

Flight Booking Access on Home Screen


Key take-aways:


1. remove unnecessary functionality and have strong flight booking CTA button on home screen;

2. stopover is a deal-breaker, make sure users are aware of it when no direct flights available and give them alternative options when possible;

3. use shortcuts and animated loading screen to make the booking process feel less demanding and time-consuming;

4. make it possible to check the flight details on payment screen, so people can feel more confident about what they are paying for.

See full competitive study →

Ideation

How might we - design strategy

Based on the user research and competitive analysis, I did affinity mapping to organise and prioritise the information I collected from earlier studies.

The summarised design strategy include:

1. Use simple and coherent interface design with only essential information and function;

2. Flight searching can be circular, make it easy for users to come back;

3. Flight booking should be linear, make it simple, smooth and intuitive;

4. Have clear error feedback, but don't make it look frustrating;

5. if possible, let users complete similar micro-tasks on one screen.

Information architecture

Based on the design approaches, I created an information architecture diagram as below.

User flows

Then I designed detailed user flows which focus on flight booking process. Although the process can be clear and well structured, it has to involve a long sequence of actions due to the required amount of information to complete the task.

Iteration

Sketches

Once having the clearly structured information architecture and user flows, I started to sketch out the screens and visualise my initial ideas reflecting earlier research and design.

Mid-fidelity prototype

After sketching out the basic screens, I created an interactive mid-fidelity prototype in Figma and performed usability tests to validate my design.

I collected several insightful feedback from usability testing of the mid-fidelity prototype:

1. "What is the Covid policy here? Can I get a refund if I can't make the trip due to Covid?";

2. Instead of giving 2 options of Sign In and Continue As Guest, add Sign Up option in the booking process to encourage new customer to create new accounts;

3. Use pop-up screens instead of redirecting users to new screens for See Details buttons for better data entry.

4. Clear boundary of text field can help to prevent mis tapping.

Below are some examples of the changes made to mid-fidelity prototype based on the feedback from usability testing:

Style Guide

Before moving into high-fidelity prototype, I created a mood board to find inspiration for visual design. The concept was to use a dark primary colour to create a calm and cosy atmosphere, and a bright, strong secondary colour for CTA to encourage users to book their next adventure.

Outcome

High-fidelity prototype

Empty states & loading screen

I used simple design for empty states and loading screen in order to have minimum distraction of users' attentions from the booking process.

Edge search result cases

Stopovers are deal-breakers to most users for booking flights. Give warnings when there are no direct flights available.

For cities that have multiple airports like London, when direct flights were not available from the chosen airport but other airports in the same city, let users know and show them the direct flights from other airports first, then the non-direct ones from the chosen airport.

Error States

As red looks close to the brand colour which could make users hard to identify the errors, I used lighter blue to colour alerts.

Design feedback

I shared this high-fidelity prototype with my family and friends. Here are some of the comments and feedback I received from them:

1. "This app looks simple and neat. I have all the essential information I would like to know, and there is no unnecessary step or functionality, which allows me to search and book the flights efficiently and confidently."

2. "It looks very modern and easy to use as well! Everything seems to be super clear and having the Covid policy makes it quite reliable. I would definitely be happy to book my flights on this app!"

3. "This looks nice and does the job! It is awesome that I can complete the booking without the hassle of creating an account. I also like the date calendar and it is easy to find the best price. It could be better to have an option to see prices in other currencies too."

Reflection

Further steps

1. Conduct accessibility tests for the design, such as colour blind testing, alt text, responsive design for smaller screens and limited internet speed conditions;

2. A/B test if showing direct flights from other airports in the same city when direct flights are not available from the chosen airport could enhance the conversion rate;

3. Continue further research on how people plan and book their holidays, and develop Explore feature to help users make the decisions.

Further thoughts

1. This project is an individual school work, hence, the quantitative data I could collect could be very limited comparing to the actual required amount of data. How could I define success if this was a real project? If the bigger data conflicted with my assumption here, how would I adjust the design?

2. Remote user interview and usability test would be the new normal way of work after Covid-19. I conducted a few remote interviews and tests for this project, which were not as smooth as face-to-face conversation. Besides updating the tools, how could UX professionals improve the user experience of remote UX research?

3. The airline and tourism industry has been hugely affected by Covid-19. I gave users the Covid policy access on home screen and after completing the booking. But how does Covid have changed people's habits of booking flights in long term, and how would those changes be reflected in the market trend of airline products?

Kaixi Sun © 2021