Project overview
The primary aim of this project is to develop a mobile application that helps users experience a stress free and efficient flight booking experience, that enables them to feel in control of their decision throughout the process.
The primary aim of this project is to develop a mobile application that helps users experience a stress free and efficient flight booking experience, that enables them to feel in control of their decision throughout the process.
Project constraints
The project was develop over six months, as a part of a UX Diploma course. Interviews, tests, research and prototypes were done by me and evaluated and reviewed by tutors. Two usability test was provided by the UX Institute as a research aid.
The project was develop over six months, as a part of a UX Diploma course. Interviews, tests, research and prototypes were done by me and evaluated and reviewed by tutors. Two usability test was provided by the UX Institute as a research aid.
As I did not have access to an existing product, usability tests and relevant research were done on existing air travel mobile applications. Wireframes and their usability tests interviews were created and facilitated by me. Due to COVID-19 restrictions all discussions with users were made via Zoom.
The project ends at high fidelity protoyping stage, as it was not the aim of the course to build this product.
Project process
Online survey
The online survey was created to understand user behaviour and attitudes towards booking flights online. It was composed of 5 qualitative and quantitative questions. 15 male and female individuals, between 20 and 50 years old completed the survey. All had access to broadband and desktop and/or mobile devices. The findings were:
The online survey was created to understand user behaviour and attitudes towards booking flights online. It was composed of 5 qualitative and quantitative questions. 15 male and female individuals, between 20 and 50 years old completed the survey. All had access to broadband and desktop and/or mobile devices. The findings were:
- most respondents distrusted apps security
- users searched for best prices before making a purchase
- all respondents booked holiday flights and flew once to twice per year
- overall sense that there is too much information for screen size (too small). Users took more time to book flights on mobile to pay more attention to details
- users searched for best prices before making a purchase
- all respondents booked holiday flights and flew once to twice per year
- overall sense that there is too much information for screen size (too small). Users took more time to book flights on mobile to pay more attention to details
Benchmarking
Benchmarking exercise was made on four air travel (Alaska airlines, British airways, TAP and Last Minute) and one wellness (Treatwell) mobile applications, to understand common practices, user flows and problems. The secondary research goal was to understand how companies position themselves in the market and how brand and corporate goals dictate UX and UI.
Below is a summary of good and bad industry practices and how screens are most commonly structured.
Homescreen
Good practice
- Users see booking form without scrolling
- Good button contrast (primary colours)
- “Booking flight” and “Sign in” buttons on home screen – simple ask
- Users see booking form without scrolling
- Good button contrast (primary colours)
- “Booking flight” and “Sign in” buttons on home screen – simple ask
Issues
- Intrusive pop-ups
- Repeating navigation options (bar and form button)
- Busy layout, not legible on small screens
- Photos can overwhelm user
- Intrusive pop-ups
- Repeating navigation options (bar and form button)
- Busy layout, not legible on small screens
- Photos can overwhelm user
Booking form
Good practice
- Use of icons and text to increase legibility
- Destination and calendar options occupy full screen – helps user to focus
- User can scroll and type on forms
- Use of icons and text to increase legibility
- Destination and calendar options occupy full screen – helps user to focus
- User can scroll and type on forms
Issues
- Forms not accessible – branding is prioritised in place of legibility by using stylised typeface and small text
- Forms are not static – some apps nudge the form up/down the screen, which can cause confusion
- No progress tracker
- Forms not accessible – branding is prioritised in place of legibility by using stylised typeface and small text
- Forms are not static – some apps nudge the form up/down the screen, which can cause confusion
- No progress tracker
Destination/return pages
Good practice
- Most important information visible
- Information grouped to increase legibility
- High button contrast
- Prices are highlighted
- Most important information visible
- Information grouped to increase legibility
- High button contrast
- Prices are highlighted
Issues
- Unclear transition from Destination flight to Return flight pages – more contrast needed
- No progress tracker
- Unclear transition from Destination flight to Return flight pages – more contrast needed
- No progress tracker
Review
Good practice
- Flight price and airport name highlighted
- Clear visual hierarchy and layout
- Option to save the flight
- Flight price and airport name highlighted
- Clear visual hierarchy and layout
- Option to save the flight
Issues
- Overwhelming amount of information for screen size
- Small text areas
- No progress tracker
- Overwhelming amount of information for screen size
- Small text areas
- No progress tracker
Registration
Good practice
- Option to write or scroll
- Prompts guide user to fill form accurately
- Good button contrast - clear instructions
- Option to write or scroll
- Prompts guide user to fill form accurately
- Good button contrast - clear instructions
Issues
- Overwhelming amount of information for screen size – more prevalent on low budget airlines
- No progress tracker
- Overwhelming amount of information for screen size – more prevalent on low budget airlines
- No progress tracker
Payment
Good practice:
- Clear layout
- Follows payment form convention
- Icons and text used to increase legibility
- Appropriate keypads for task
- Clear layout
- Follows payment form convention
- Icons and text used to increase legibility
- Appropriate keypads for task
Issues:
- Copy legibility
- Large amount of information for screen size
- Copy legibility
- Large amount of information for screen size
Overall brand benchmarking
Companies that position themselves at the lower end of air travelling (Last Minute) tend to use layouts with more information and colour. These companies also have more prompts for users to select deals and add-ons. A smooth user experience is not always a priority, which can sometimes make the use of these applications feel overwhelming.
Companies that position themselves at the lower end of air travelling (Last Minute) tend to use layouts with more information and colour. These companies also have more prompts for users to select deals and add-ons. A smooth user experience is not always a priority, which can sometimes make the use of these applications feel overwhelming.
Companies targeting higher end markets (British Airways), chose streamlined layouts and use drop down menus to hide secondary information and create a more efficient booking experience. Colours are used sparingly and according to conventions.
Overall, air travel mobile applications are designed for users that have some booking experience, as first time users may require more reading and exploring time before purchasing a ticket.
Usability testing
User testing was done to understand users’ thought process, expectations and paint points when using airline mobile applications. These interviews were also conducted to understand individual’s social context and behaviours prior to interacting with these products.
User testing was done to understand users’ thought process, expectations and paint points when using airline mobile applications. These interviews were also conducted to understand individual’s social context and behaviours prior to interacting with these products.
One users was interviewed by myself and an additional 2 users were interviewed by the UX Institute staff. The first section of the test focused on understanding the user’s demographics and behaviours, for example profession and what type of mobile applications were used. In the second part, interviewees were asked to book a return flight for two passengers, to a holiday destination in two different mobile applications. All tests were preformed on smart phones.
Social context
- The interviewees were familiar with mobile devices and used them to communicate with friends and family.
- Most popular applications were social media (Instagram and Facebook), news, productivity and banking.
- Users had access to broadband and tablet/desktop devices.
- The interviewees were familiar with mobile devices and used them to communicate with friends and family.
- Most popular applications were social media (Instagram and Facebook), news, productivity and banking.
- Users had access to broadband and tablet/desktop devices.
Behaviour before booking
- Users looked for best prices on multiple airlines and travel aggregators but often opted to purchase ticket on airlines applications due to hidden fees of the latter.
- Users shared flight dates and price options with family and partners. This was done via messaging application like WhatsApp and screenshots.
-Some users started the flight research on a mobile application and purchased the ticket on a desktop due to small screen size and fear or making an expensive mistake.
- Users looked for best prices on multiple airlines and travel aggregators but often opted to purchase ticket on airlines applications due to hidden fees of the latter.
- Users shared flight dates and price options with family and partners. This was done via messaging application like WhatsApp and screenshots.
-Some users started the flight research on a mobile application and purchased the ticket on a desktop due to small screen size and fear or making an expensive mistake.
Homescreen
Mental model
- Users focus on filing all booking form inputs accurately and follow instructions from prompts
- Users were familiar with booking forms, as the majority of airlines applications follow conventions
Mental model
- Users focus on filing all booking form inputs accurately and follow instructions from prompts
- Users were familiar with booking forms, as the majority of airlines applications follow conventions
Positive feedback
- Form is straightforward
- Users preferred to type rather than scroll to input country information
- Calendar was seen as useful, as it helps users visualise dates and avoid mistakes
- Form is straightforward
- Users preferred to type rather than scroll to input country information
- Calendar was seen as useful, as it helps users visualise dates and avoid mistakes
Pain point
- None at this point
- None at this point
Booking page
Mental model
- Users main goal is to select the cheapest price and correct airport
- Users paid more attention to task, due to small print and screen
Mental model
- Users main goal is to select the cheapest price and correct airport
- Users paid more attention to task, due to small print and screen
Positive feedback
- Price comparison is useful as it helps users select cheaper ticket option
- Price comparison is useful as it helps users select cheaper ticket option
Pain points
- Not clear when users have been directed to return flight page – hierarchy not contrasting enough
- Visual hierarchy needs more contrast, as users had difficulties distinguishing destination airport with other flight details.
- Colours used not corresponding to conventions, which confused users. For example, use of red in “confirm” button
- Not clear when users have been directed to return flight page – hierarchy not contrasting enough
- Visual hierarchy needs more contrast, as users had difficulties distinguishing destination airport with other flight details.
- Colours used not corresponding to conventions, which confused users. For example, use of red in “confirm” button
Review page
Mental model
- Users expect that this step is the last opportunity to make sure the booking is correct
- Users expect that this step is the last opportunity to make sure the booking is correct
Positive feedback
- User found very helpful to see all ticket information in one place
- Opportunity to final check purchase and if additional fees are within budget
- User found very helpful to see all ticket information in one place
- Opportunity to final check purchase and if additional fees are within budget
Paint points
- Repetition – information seen previously is repeated at this stage, which some users found unnecessary
- Repetition – information seen previously is repeated at this stage, which some users found unnecessary
Affinity map
The affinity map was created to group research findings and highlight important data, in order to inform ideation stage.
The main findings were:
User’s mental model
- Average 1 to 3 visits to travel aggregators or airline websites before purchase
- Users communicate via text and screenshots with friends and/or partners to choose right price and date
- Whilst booking, users focus on making correct booking due to high value purchase
- Screen size is linked with user’s pain point, as they felt more comfortable booking on a larger screen due to legibility issues
Design conventions to observe
- Booking form conventions are expected, even if app’s UI is different. Users fill form as follows: destination>return>date>passenger>direct flight/flexible dates
- Users rely on prompts (colour and animation) to complete the booking process
- Less steps are more likely to result in a purchase
- Apps are seen as not user friendly, due to screen size and small type. Legibility needs to be increased.
- Deals in separate area or within a page are not seen as intrusive
User needs
- To be able to read relevant information
- To be guided throughout the purchasing process via copy or prompts
- To be able to understand where they are in their purchasing process
- To have control of the experience and feel application is safe
Solutions
- Create a mobile app environment that reduces anxiety and helps users feel in control of their purchase process
- Increase legibility
- Clear visual hierarchy
- Reduce excess graphics or decorative visual elements (ie. repeated logos)
- Destination and return flight page separated by animation, graphic or look different
- Use of legible and self explanatory buttons
The main findings were:
User’s mental model
- Average 1 to 3 visits to travel aggregators or airline websites before purchase
- Users communicate via text and screenshots with friends and/or partners to choose right price and date
- Whilst booking, users focus on making correct booking due to high value purchase
- Screen size is linked with user’s pain point, as they felt more comfortable booking on a larger screen due to legibility issues
Design conventions to observe
- Booking form conventions are expected, even if app’s UI is different. Users fill form as follows: destination>return>date>passenger>direct flight/flexible dates
- Users rely on prompts (colour and animation) to complete the booking process
- Less steps are more likely to result in a purchase
- Apps are seen as not user friendly, due to screen size and small type. Legibility needs to be increased.
- Deals in separate area or within a page are not seen as intrusive
User needs
- To be able to read relevant information
- To be guided throughout the purchasing process via copy or prompts
- To be able to understand where they are in their purchasing process
- To have control of the experience and feel application is safe
Solutions
- Create a mobile app environment that reduces anxiety and helps users feel in control of their purchase process
- Increase legibility
- Clear visual hierarchy
- Reduce excess graphics or decorative visual elements (ie. repeated logos)
- Destination and return flight page separated by animation, graphic or look different
- Use of legible and self explanatory buttons
Costumer journey map
Primary user flow
Personas
Primary user: Martin Jones, 35yrs, Full-time nurse
- Travels once a year with friends or partner
- Uses phone and mobile applications daily to communicate with friends and family on messaging and social media applications. He reads the news and uses apps daily.
- John has a restricted budget. His holiday travel is the most expensive leisure related purchase he will make in the year. He has a demanding job and will use this period to rest and recover.
- John thinks this holiday is important and due to his budget constraints, airline tickets are seen as a high value buy. He is not confident in booking tickets using a mobile app because he is afraid he will make an expensive mistake, since he cannot read everything well due to the small screen size and small text/buttons.
- John needs a product that is legible and helps him fully understand the steps he needs to take to purchase a ticket. John also needs reassurance that the tickets he is buying are the best he can get.
- Travels once a year with friends or partner
- Uses phone and mobile applications daily to communicate with friends and family on messaging and social media applications. He reads the news and uses apps daily.
- John has a restricted budget. His holiday travel is the most expensive leisure related purchase he will make in the year. He has a demanding job and will use this period to rest and recover.
- John thinks this holiday is important and due to his budget constraints, airline tickets are seen as a high value buy. He is not confident in booking tickets using a mobile app because he is afraid he will make an expensive mistake, since he cannot read everything well due to the small screen size and small text/buttons.
- John needs a product that is legible and helps him fully understand the steps he needs to take to purchase a ticket. John also needs reassurance that the tickets he is buying are the best he can get.
Secondary user: Ali North, 40yrs, Full-time Administrator
- Travels once a year with family or friends
-Uses her phone and mobile applications daily to communicate with family and friends via text and social media. Ali uses her phone to book various appointments for health and leisure.
- Ali doesn’t use mobile applications for flight booking because she finds them overwhelming due to small text and screen size. She doesn’t think apps are trustworthy because she thinks airlines use small copy to overcharge or hide fees. She prefers using a large screen that allows her to read all information and understand if she is being unfairly charged.
- Ali needs a product that is clear and not visually overwhelming. She would like to be guided by friendly prompts throughout her purchasing process. Ali also needs a product that will make her feel that her money is being handled safely.
Ideation and prototyping:
From the data gathered I understood that the new airline application needs to:
- Prioritise copy describing security and user safety on download page/store
- Follow convention, as users expect the standard booking experience process
- Be legible and accessible and guide the user through the booking with prompts and animations
- Have a visual identity and written tone of voice that is clear and inspires calm
- Follow convention, as users expect the standard booking experience process
- Be legible and accessible and guide the user through the booking with prompts and animations
- Have a visual identity and written tone of voice that is clear and inspires calm
Visually:
- The typeface used needs to be accessible (following British Dyslexia guidelines)
- The layout needs to have white space and be legible to encourage trust and accessibility
- Colours needed to be contrasting for ease of use and inspire calm
- The layout needs to have white space and be legible to encourage trust and accessibility
- Colours needed to be contrasting for ease of use and inspire calm
Low and mid fidelity prototypes
To visualise and find the best solutions for the application, I created low fidelity prototypes of all screens. These were converted into a mid fi prototype for testing. This test was preformed by one user via Zoom and focused on understanding if the product allowed the individual to book a flight (primary use case).
From this testing, I understood that the application’s flow was working correctly but the layout was too busy. To solve this, I change the following:
- price comparison banner contrast was increased
- log in button from the home screen was deleted
- discreet progress tracker was added
- non essential information was placed behind clear drop down menus
- log in button from the home screen was deleted
- discreet progress tracker was added
- non essential information was placed behind clear drop down menus
Concept
The primary aim of the app is to create an experience that is accessible and allows users to feel safe and in control of their experience. With this in mind, the application was developed with the following characteristics:
Copy: The copy should be written for the reading age of 9, to increase accessibility. All buttons, links and other elements should be descriptive. Typeface should meet British Dyslexia guidelines.
Design and Layout: Minimal look and feel to help users focus on selecting the right flights.
Interactions, feedback and prompts will be an important element to implement, as users thought these could make the booking process more effective.
Interactions, feedback and prompts will be an important element to implement, as users thought these could make the booking process more effective.
Colour: Contrasting and calming blues and yellows palette, mirroring the sky and sun. These colours were tested against WebAim colour contrast checker and attained AA standards.
High fidelity prototype
High fidelity prototyping was used to visualise and test the mobile application close to completion.
Unfortunately due to hand-in time constraints and course brief, I was not able to test this prototype or expand on the product’s specificity and design characteristics.
Unfortunately due to hand-in time constraints and course brief, I was not able to test this prototype or expand on the product’s specificity and design characteristics.
The final project exercise was to annotate the prototype for building stage. I focused on the elements below:
1- Find flights – On tap, take user to flight search page
2- Hamburger menu – On tap, activate hamburger menu.
3- From and To destination – On “From” field tap and user typing first three country letters, activate country menu list. Allow scroll. On “done” tap, accept selection and add country to input field. Activate “To” input by adding a dark blue stroke.
4- Departure and Return dates – On “Departure date” field tap, activate calendar, showing present month. Shade present date and disable past days selection. On tap of desired departure date, change that calendar day’s shape to indicate start of journey and activate return date input field by adding a dark blue stroke. Do not remove calendar from screen view. On click of desired return date, change that calendar day’s shape to indicate end of journey. Shade days between start and end of journey, to indicate trip’s duration. Add “Done” button to calendar once return date is selected. On “Done” tap, add date to input field and remove calendar from view.
5- Passenger information – On chevron tap, activate passenger menu. When possible to add or subtract passengers, activate “plus” and/or “minus” button, otherwise disable these. Add 1 adult by default. On “done” button tap, add selection to input field. Highlight “find flights” button.
6- Find flights – On tap, take user to booking page.
7- price banner – On left chevron tap show previous three days’ ticket prices. On right chevron tap show next three days’ ticket prices.
8- flight information – On “From…” tap show flight class information and selection.
9- Registration form drop down menus – On chevron tap, drop down title or gender menu. On tap of menu option, add information to form field. Once completed change field stroke to green.
10- Name input field – On tap, activate mobile keyboard (qwerty). On “done” tap add green stroke to field if information filled correctly, otherwise change this stroke to red.
11- Phone number field – On chevron tap, drop down country menu. On tap of country, change blue section to selected country code. On input field tap, activate numeric keyboard. On “done” tap, add number to field.
11- Phone number field – On chevron tap, drop down country menu. On tap of country, change blue section to selected country code. On input field tap, activate numeric keyboard. On “done” tap, add number to field.
