Client/Company
The Fly UX brief is part of my UX diploma at The Institute of UX Design
Project Duration
The UX Course ran remotely over 6 months September to March
My Role
My role as lead UX Designer, information architecture (AI), user research, prototyping and testing.
Project Summary
The brief for this project was to design a mobile booking app for a pseudo-start-up airline company. I was asked to develop an app to provide users with a simple, intuitive and fast booking process.
The end goal was to have enough research and user understanding to develop in-depth research to base my design on, along with detailed wireframes ready to handover to a develop
The challenge
Today, the majority of ticket bookings are carried out by the customer. It’s crucial that the booking app can allow the user to complete the process with a streamlined flow, that is intuitive and user-friendly.
For less familiar users, the booking process can be stressful and daunting. I aim to design a product that lets the user feel in control and eliminate any steps the user may find confusing, frustrating, or irrelevant.
The Research
I started my research by looking at our main competitors to identify what elements of their design worked well and what steps could have been removed to streamline their booking process.
The first objective of the project was to fully understand the user's goal and interaction patterns when it comes to this type of booking process. By doing the research techniques listed below, I was able to gather raw data/research that I used to determine the most important aspects to include or omit from my final design.
Competitive Analysis
Online Survey
Usability tests
Customer Journey Map
Competitive Analysis
OBJECTIVE
Learn about the competition and gain a strong understanding of the booking process and key patterns to the process
See how and what the competition is doing and if it’s successful.
Find out the competitors’ strengths and weaknesses aiming to incorporate the good and avoid the bad practices.
Familiarise me with the UX, AI and UI design of styles for such apps.
DISCOVERIES
During the initial stages of research, I benchmarked 3 of Fly UXs main competitors. This gave me an insight into the strengths and weaknesses of well-established airlines. For this research did a competitive analysis on 4 Travel companies, 3 of which are airlines Ryanair, British Airways, Air France.
*Travel companies with an app will get 60% of their bookings via mobile devices
Online Survey
OBJECTIVE
Gain high-quality qualitative feedback
Gain information from a large, varied group of people, with a broad age range
Ask very targeted questions
DISCOVERIES
The questionnaire results told me that most people travelled for pleasure
Most of them do not travel more than once a month
Ryanair is the more popular airline for the people who answered the survey
Price was the leading motivator in going to their preferred airline
By running this online survey and posting on Facebook, I gained the details from 40 people, which was the limit to the Survey Monkeys free account. Letting people know how long the questionnaire would take them and how many questions were in the survey encouraged more people to engage as they knew upfront the questionnaire would late no more than 3 minutes.
Please see questions and results in the link below…..
Usability Test
One of the best ways to understand how the user interacts with your product is to conduct some usability tests. These tests provide recorded research and feedback from the user's facial expression and body language.
TASK
For this usability test, the participant was given the task to book a flight for two people for two weeks. The airline used in this test were British Airways and Aer Lingus. Below is a clip of the video that was a total of 60 minutes.
OBJECTIVE
Satisfaction levels
The ability to complete the task
How long it took
User suggestions are often insightful
If testers words are matching their actions
Strong qualitative data
DISCOVERIES
Advertising and moving banners are confusing
Auto-fill for of information already known by the app would help the user along
Simplifying customer detail forms
Clear CTAs on homepages
The lack of clarity on fare pricing creates a lack of trust
Too much information is a turn off for the user
WATCH THE CLIP OF THE TEST BELOW
*148.3 million travel bookings are made online every year.
Customer Journey Map (CJM)
OBJECTIVE
By looking at each step the user needs to take during the booking process I was able to observe the users behaviour, expectations, confusions and repeated issues that occurred during the booking process.
Any unnecessary steps and pain points the user experienced were highlighted. This process gave me a good insight into how the user interacted with the apps during the process.
By mapping the user’s interactions with the process I was able to highlight many repeated issues for the user and take note of functions the users found useful and intuitive, thus letting the user feel in control during the booking process.
DISCOVERIES
Things that caused users to lose trust
Not being offered the best deals straight away
Booking dates on the calendar confusing
The fare pricing is not displayed
Not automatically being put in a seat next to your travel companion
Not having connecting flight details and times more clearly highlighted
Things that users found helpful
The scrollable carousel with the dates along with the top is useful for seeing different prices on different days
Minimal layouts easier to navigate
Pop-up window offering user the option to reserve the same seat for the return journey
*30% of users highlight the app functionality, boarding passes, check-in, passbook as their reason for using an app
The Design
After analysing the data generated from the research process, I started the design process, elements of the app, such as screen order, mental models, information architecture (AI) etc. Using the techniques listed below, I developed a picture of what flow would work best for navigating the booking process. I paid attention to reducing how much friction the user is faced with during booking.
Flow chart
Affinity Diagram
Interactive sketches
Wireframing
Prototype
Flow Chart
By making a flow chart I was able to produce a clear visual aid for myself, decide the best option for the order of the screens and have reference material that could be shared with developers and stakeholders.
OBJECTIVE
Define the IA (Information Architecture) for the app
Produce a visual aid for stakeholders
Identify the steps taken to complete the booking process
DISCOVERIES
Most efficient process
Finalise the IA
Visual layout
Any problems with user flow
*39% of travellers preferred how quick it was to book via an app
Affinity Diagram
In order to organise and analyse the qualitive data I needed the help of volunteer to go over all the data and contribute observations and ideas.
OBJECTIVE
Analysing and sharing of information
Sort large amounts of data into organised groups
Brainstorming
DISCOVERIES
Trust and clarity being repeated as a concern for users
Issues user have with the Interfaces of the apps
Felling that their times was being wasted
Grouping that we would not have associated with each fitting into the same pile
*Nearly 8 in 10 customers would stop engaging with content that doesn’t display well on their device
Interactive Sketches
By sketching out my plans for the app I was able to brainstorm, try out alternative options and look closer at the more detailed functions of the design.
OBJECTIVE
Create a reference map for UI designer to start their design process.
Clarifying IA layout (Information Architecture) and the order of the screens
Visual aid for stakeholder
It can be used to base prototype design on
Define how various features of the app will support each other
DISCOVERIES
Most efficient process
Finalise the IA
Visual layout
Wireframes
The final part of the project was to produce a set of wireframes as a visual representation, detailed enough to hand over to developers and stakeholders.
OBJECTIVE
Create a reference map for UI designer to start their design process.
Clarifying IA layout
Visual aid for stakeholder
It can be used to base prototype design on
Define how various features of the app will support each other
DISCOVERIES
Most efficient process
Finalise the IA
Visual layout
Fly UX Prototype
With all the research analysis and design being finalised it was time to prototype the design. Using Figma I designed a mid-fi prototype to test the effectiveness of my design and how it may look in the real world.
OBJECTIVE
Run a usability test on volunteers to get their feedback and review how they interacted with the product
User feedback
Discover any major issues before handing the design over to the developers
The opportunity to how the user works with the interacts
DISCOVERIES
Most efficient process
Finalise the IA
Visual layout
Confusion of screens
The Conclusion
The decisions I made throughout the app development process, were informed by the research I gathered. I wanted the app to provide users with accessibility, transparency and simplicity without lacking any facility a user may expect or require.
Keeping these three key objectives in mind, I designed an app with a simple homepage and fare details and kept the forms simple by only asking for information that was relevant to the process.
Clarity - Trust was an issue for many users. Not highlighting stop-overs, transparency overtime allowed for connecting flight, added extras to the ticket prices, luggage, reserving seats etc. Once the user feels the product is working against them, they lose trust. This can potentially result in the loss of a customer.
By adding an individual fare button to the individual flights, the user can access all the information about that fare.
Using only male/female buttons on the payment forms instead of insisting customers declare their marital status felt more modern and less fussy.
The progress bar reassures the users of where they are in the processes and what steps they have left to complete.