Project overview
The primary aim of this project was to develop a Desktop Web application that helps users feel in control of their decisions when booking an airplane ticket.
The primary aim of this project was to develop a Desktop Web application that helps users feel in control of their decisions when booking an airplane ticket.
Project constraints
This project was develop over six months as part of my UX Diploma course. All interviews, research and prototypes were done by me and evaluated and reviewed by tutors. 2 usability tests were provided by the UX Institute as a research aid.
This project was develop over six months as part of my UX Diploma course. All interviews, research and prototypes were done by me and evaluated and reviewed by tutors. 2 usability tests were provided by the UX Institute as a research aid.
As I did not have access to an existing product, initial testing and relevant research was done on existing applications. When prototypes were developed, usability tests were preformed on these. All interviewing and testing was facilitated remotely via Zoom due to COVID-19 restrictions.
The project stops at high fidelity prototyping stage, as it was not the aim of the course to build the product.
The project stops at high fidelity prototyping stage, as it was not the aim of the course to build the product.
Online survey
The questionnaire was created to understand users' behaviour and attitudes towards air travel and booking. 15 male and female individuals between 20 and 50 years old answered 5 questions that provided qualitative and quantitative research. All respondents had access to broadband and desktop/mobile devices. The most significant findings were:
The questionnaire was created to understand users' behaviour and attitudes towards air travel and booking. 15 male and female individuals between 20 and 50 years old answered 5 questions that provided qualitative and quantitative research. All respondents had access to broadband and desktop/mobile devices. The most significant findings were:
- Users preferred booking on tablets or desktop, as larger screen size gave sense of security and reduced mistakes
- Most users researched deals and best flight prices before making the final purchase
- The majority flew for leisure
- Found booking process logic
- Thought they were asked to upgrade too often
- Pre-ticked boxes were seen as intrusive
- Most users researched deals and best flight prices before making the final purchase
- The majority flew for leisure
- Found booking process logic
- Thought they were asked to upgrade too often
- Pre-ticked boxes were seen as intrusive
Benchmarking web based applications
To understand UX best practices, common user flows and needs, I benchmarked five travel (Alaska airlines, British airways, TAP and last minute) and one wellness (Treatwell) desktop web applications. I chose to research products from different industries, to understand how different sectors design their booking experiences. The secondary aim of this research was to understand how market demands influence UX and UI.
Below is a summary of industry practices and how pages are most commonly structured.
Desktop web applications best practices and issues
Homepage
Good practices:
- Booking form above fold and in centre
- Application recognises user IP
- Booking flight and flight + hotel options are common
- Drop down menu for less common user cases
- Booking form above fold and in centre
- Application recognises user IP
- Booking flight and flight + hotel options are common
- Drop down menu for less common user cases
Issues:
- Screen nudges up/down to accommodate forms but user is not brought back to initial screen state
- Small type is used frequently – not accessible
- Overwhelming amount information on drop down menu
- Menu titles not always clear
- Screen nudges up/down to accommodate forms but user is not brought back to initial screen state
- Small type is used frequently – not accessible
- Overwhelming amount information on drop down menu
- Menu titles not always clear
Booking page
Good practices:
- Different dates and prices shown on top banner – allows user to chose cheaper prices
- Progress trackers, breadcrumbs and back button are helpful to let users know they can make mistakes
- Most important information highlighted: country, date and price
- Different dates and prices shown on top banner – allows user to chose cheaper prices
- Progress trackers, breadcrumbs and back button are helpful to let users know they can make mistakes
- Most important information highlighted: country, date and price
Issues:
- Small text makes information not accessible
- If users select a date with no flights available they are not offered an alternative date. The user needs to go back to the homepage and find a flight through trial and error.
- Unclear when user transitions from destination to return page
- Small text makes information not accessible
- If users select a date with no flights available they are not offered an alternative date. The user needs to go back to the homepage and find a flight through trial and error.
- Unclear when user transitions from destination to return page
Review flight
Good practice:
- Flights details are displayed in a clear format
- Visual focus on important information – airport, date and price
- Use of text and icons to increase legibility
- Drop down option to include non-essential information (ie airplane model)
- Flights details are displayed in a clear format
- Visual focus on important information – airport, date and price
- Use of text and icons to increase legibility
- Drop down option to include non-essential information (ie airplane model)
Issues:
- Use of airline jargon
- Pop-ups asking if user wants to upgrade flight or hire a car
- Some airlines added too much information at this stage
- Use of airline jargon
- Pop-ups asking if user wants to upgrade flight or hire a car
- Some airlines added too much information at this stage
Registration
Good practices:
- Flight details always present in page
- Use of colour to show user when input is filled correctly/incorrectly
- Use form conventions
- Flight details always present in page
- Use of colour to show user when input is filled correctly/incorrectly
- Use form conventions
Issues:
- Not enough contrasts between labels and form fields
- Small text makes forms not accessible
- Not all fields have the options for user to type and scroll
Payment
Good practices:
- Payment form convention
- Use of text and icons to increase legibility
- Security icons to ensure user trusts website
- Button contrast and text – easy to understand ask
- Payment form convention
- Use of text and icons to increase legibility
- Security icons to ensure user trusts website
- Button contrast and text – easy to understand ask
Issues:
- Form type and scroll option not always available
- Form type and scroll option not always available
Overall brand benchmarking notes
From this exercise, I understood that legibility and accessibility are still elements that need better implementation. This is specially relevant in destination and returning flights booking pages, where an overwhelming amount of information is displayed, oftentimes in small type.
Businesses that market themselves as high end, tend to be more aware of this issue. However, travel aggregators focus on giving users maximum information, focusing on showing cheaper prices. Deals and destination photography is still prevalent on homepages, which makes companies relegate important information such as COVID-19 related question or T&Cs to the bottom of the page. Overall, websites are geared towards people who are familiar with booking processes and those that look for cheaper flight prices.
User testing
User testing was facilitated to understand users’ mental models, expectations and paint points when using airline desktop web based applications. The first part of the interviews focused on understanding the user’s demographics, social context and attitude towards flight booking and travelling. Aftwerwards, the interviewees were asked to book a return flight for two passengers, to a holiday destination in two different applications. All test were preformed on desktop devices. Two users were interviewed by me and 2 additional users were interviewed by UX Institute staff.
Social context
- Users used web based applications daily for entertainment (Netflix, Youtube) and for general home administration (Online grocery shopping, banking)
- All individuals had access to broadband and desktop devices.
- Mobile phones were used to stay in touch with family and friends, social networking and read news.
- Users used web based applications daily for entertainment (Netflix, Youtube) and for general home administration (Online grocery shopping, banking)
- All individuals had access to broadband and desktop devices.
- Mobile phones were used to stay in touch with family and friends, social networking and read news.
Behaviour before booking
- Users searched for best deals on airline and travel aggregators on a desktop.
- All interviewed discussed with friends and/or partner regarding best ticket prices, time and dates. Communication was done face to face or via text and email.
- Users used screenshots to show flight options.
- Users wanted a quick and straightforward experience.
- Users searched for best deals on airline and travel aggregators on a desktop.
- All interviewed discussed with friends and/or partner regarding best ticket prices, time and dates. Communication was done face to face or via text and email.
- Users used screenshots to show flight options.
- Users wanted a quick and straightforward experience.
Homepage
Mental model
- Users filled booking form as follows:
- Destination country> Return country>Destination and return date>Passenger nr
- Users focused on booking the correct airport and date
- Users filled booking form as follows:
- Destination country> Return country>Destination and return date>Passenger nr
- Users focused on booking the correct airport and date
Positive feedback
- Homepage booking form was clear
- Calendar is very useful, as it helped visualise dates and avoid mistakes
- “3 letter” country field prompt helpful
- Passenger icon helpful
- Homepage booking form was clear
- Calendar is very useful, as it helped visualise dates and avoid mistakes
- “3 letter” country field prompt helpful
- Passenger icon helpful
Pain point
- None at this point
- None at this point
Booking page:
Mental model
- Users focused on flight availability and price
- Users focused on adding the correct baggage to the booking – to avoid extra fees at airport
- Users focused on flight availability and price
- Users focused on adding the correct baggage to the booking – to avoid extra fees at airport
Positive feedback
- Separate page for booking return or destination flight useful
- Booking page’s comparison banner useful
- Separate page for booking return or destination flight useful
- Booking page’s comparison banner useful
Pain point
- When booking, destination page and return page are not separate, users had difficulty understanding which flight was being booked
- Too much information and small text – not legible
- Not always clear when flight is not direct
- When booking, destination page and return page are not separate, users had difficulty understanding which flight was being booked
- Too much information and small text – not legible
- Not always clear when flight is not direct
Review
Mental model
- Users read most information available – avoid expensive mistakes
- Users read ticket conditions highlighted due to being charged hidden fees in the past
- User confidence decreased when small text was seen in this page. Users thought the airline was trying to overcharge them.
- Users read most information available – avoid expensive mistakes
- Users read ticket conditions highlighted due to being charged hidden fees in the past
- User confidence decreased when small text was seen in this page. Users thought the airline was trying to overcharge them.
Positive feedback
- Useful to confirm the flight was booked correctly
- Drop down menu “flight details” is helpful – users do not necessarily want to read this information but know they have the option to do it
- Upgrades prompt can be useful but only when these are not intrusive
- Weight restrictions reminder very helpful
- Useful to confirm the flight was booked correctly
- Drop down menu “flight details” is helpful – users do not necessarily want to read this information but know they have the option to do it
- Upgrades prompt can be useful but only when these are not intrusive
- Weight restrictions reminder very helpful
Pain point
- Jargon
- Small print
- Jargon
- Small print
Affinity map
The affinity map was created to make sense of the data gathered and to highlight the most important user needs, pain points and inform ideation stage. The most important findings were:
User’s mental model
- Users visit travel aggregators and airline applications multiple times before making a purchase
- The best day and prices are chosen in collaboration with friends and family and communicated mainly via text and screenshots
- Flights are seen high value purchase
- Users visit travel aggregators and airline applications multiple times before making a purchase
- The best day and prices are chosen in collaboration with friends and family and communicated mainly via text and screenshots
- Flights are seen high value purchase
Conventions to observe
- Booking form conventions are expected even when using different types of applications
- Form is filled as follows: Destination country> Return country> Destination and return date> Passenger nr
- Flexible date and/or direct flight options
- Comparison tool is important for users to find best prices
- Legibility needs to be a priority, as users feel overwhelmed with information
- Breadcrumbs and process trackers are reassuring to users
- Marketing upgrades should be incorporated in the layout – pop-ups are seen as an annoyance and cheap
- Booking form conventions are expected even when using different types of applications
- Form is filled as follows: Destination country> Return country> Destination and return date> Passenger nr
- Flexible date and/or direct flight options
- Comparison tool is important for users to find best prices
- Legibility needs to be a priority, as users feel overwhelmed with information
- Breadcrumbs and process trackers are reassuring to users
- Marketing upgrades should be incorporated in the layout – pop-ups are seen as an annoyance and cheap
User needs
- Overall product needs to help users feel in control and that the application is safe
- Increase legibility to make information accessible
- No intrusive pop-ups or warnings. If possible incorporate these in the layout.
- Progress bars and prompts
- Overall product needs to help users feel in control and that the application is safe
- Increase legibility to make information accessible
- No intrusive pop-ups or warnings. If possible incorporate these in the layout.
- Progress bars and prompts
Costumer journey map
Personas
Primary persona: Sophie Smith, 30yr, full time content editor
- Travels once a year for leisure with friends and/or partner and books her flights of a desktop
- Uses mobile daily to communicate with family and friends, manage daily tasks (train booking, banking, groceries) and social networking
- Sophie is familiar with booking flights and looks for cheapest prices before purchase. She feels somewhat nervous when booking her flights, as she has had bad experiences due to airline hidden costs and aggressive marketing
- Sophie is on a limited budget and her holiday is the most expensive purchase of the year and the longest she will be able to rest. She sees her flights as a high value investment
- Uses mobile daily to communicate with family and friends, manage daily tasks (train booking, banking, groceries) and social networking
- Sophie is familiar with booking flights and looks for cheapest prices before purchase. She feels somewhat nervous when booking her flights, as she has had bad experiences due to airline hidden costs and aggressive marketing
- Sophie is on a limited budget and her holiday is the most expensive purchase of the year and the longest she will be able to rest. She sees her flights as a high value investment
- Sophie needs a product that makes her feel in control of her experience and provides information in a clear, straightforward format
Secondary persona: Mark Wilson, 48yr, full time teacher
- Travels once/twice per year with family and/or friends and uses a desktop to book tickets
- Uses mobile to stay in touch with friends and family, to help with administrative tasks such as banking, reading the news and social networking
- Mark likes to travel and is familiar with online booking. He purchases flights on large screens because he often finds the amount of information and small text overwhelming. This also causes Mark to dislike the overall experience of booking a flight
- Mark likes to pay as little as possible for his flights but prefers to travel in comfort, so he prioritises options that will make his trip more pleasurable, for example in-flight food and ability to choose seats
- He needs a product that makes the booking experience feel like the beginning of his holiday, which he is looking forward to. Mark wants an experience that is simple and helps him select and pay for the correct flight quickly
- Travels once/twice per year with family and/or friends and uses a desktop to book tickets
- Uses mobile to stay in touch with friends and family, to help with administrative tasks such as banking, reading the news and social networking
- Mark likes to travel and is familiar with online booking. He purchases flights on large screens because he often finds the amount of information and small text overwhelming. This also causes Mark to dislike the overall experience of booking a flight
- Mark likes to pay as little as possible for his flights but prefers to travel in comfort, so he prioritises options that will make his trip more pleasurable, for example in-flight food and ability to choose seats
- He needs a product that makes the booking experience feel like the beginning of his holiday, which he is looking forward to. Mark wants an experience that is simple and helps him select and pay for the correct flight quickly
Primary user flow
Ideation and low res prototyping
From the insights gathered, I understood:
- The focus should be on creating an accessible experience
- The website structure and forms needed to follow conventions, as this can help reduce anxiety
- The copy needed to be descriptive and concise to speed the purchasing process
- The website structure and forms needed to follow conventions, as this can help reduce anxiety
- The copy needed to be descriptive and concise to speed the purchasing process
Visually:
- The look and feel needed to promote calm and safety
- Small copy size needed to be avoided and be accessible (following British Dyslexia guidelines)
- High contrasting elements and clear transitions needed to be used to help purchasing process
- Small copy size needed to be avoided and be accessible (following British Dyslexia guidelines)
- High contrasting elements and clear transitions needed to be used to help purchasing process
Low and mid fidelity prototyping
To find the best solutions for the application, I created wireframes of all pages. Once these were finalised, I developed the mid fi prototype to test if the primary use case journey (book a return flight) was well implemented. This was facilitated by me on Zoom and one test was preformed on a desktop.
After this exercise, I understood that the application’s flow was working correctly but the following needed improvement:
- Homepage form needed more space for inputs
- Layout needed to be simplified
- More contrast between buttons and different types of information (ie destination country and airport) needed to be increased
- Layout needed to be simplified
- More contrast between buttons and different types of information (ie destination country and airport) needed to be increased
Concept
As a result of testing and further research on colour, accessibility and best practices, the overall look and feel was developed. The aim was to create a desktop web application that allowed the user to enjoy their booking experience due to the environment's simplicity and accessibility. With this in mind, the website was developed with the characteristics below:
As a result of testing and further research on colour, accessibility and best practices, the overall look and feel was developed. The aim was to create a desktop web application that allowed the user to enjoy their booking experience due to the environment's simplicity and accessibility. With this in mind, the website was developed with the characteristics below:
Copy: The copy should be descriptive and written for an individual with a 9 year old reading age, to increase accessibility
Design and Layout: Minimal look and feel to help users make correct decisions and reduce anxiety. Use interactions, feedback and prompts to provide a quick and effective booking experience
Colour: Contrasting and calming blues and yellows palette, mirroring the sky and sun, seen from an airplane. These colours were tested against WebAim colour contrast checker and attained AA standards
High fidelity prototyping
From the medium fidelity prototyping testing, I understood the application’s flow was working correctly but the layout was still too busy. The main tweaks made, focused on targeting the most common pain points – legibility and streamlining the booking experience, specially when the primary use case was booking flights only. The main changes were:
- Moving the log in button from the side to he form's bottom to increase text size
- Adding a minimal progress tracker to reduce visual clutter
- Include non-essential information behind clear drop down menus
- Adding a minimal progress tracker to reduce visual clutter
- Include non-essential information behind clear drop down menus
High fidelity prototyping was used to visualise and test the desktop web application. Due to hand-in time constraints and course brief, I was able to test this prototype but not implement further changes.
The final project task was to annotate the prototype for building stage. I focused on the elements below:
1- “Manage” and “Deals” drop down menus and search option –
Drop down menus - On button click, activate drop down menu with sub categories. On subcategory click, take user to selected category page.
Search option - On magnifiying glass or input field click, activate search field by adding a stroke and blinking cursor. Search activated by pressing enter on keyboard. When keyboard not connected add chevron pointing right for this purpose.
2- Sign in option – On button click, activate drop down form with username and password input field. Activate username field by adding a stroke and blinking cursor.
3- Language selection – On chevron click, activate language drop down menu. Default language set by IP. Follow chevron interaction convention
4- From and To destinations form input – On “From” field click, activate drop down menu with list of countries associated with first three letters input by the user. Limit selection to 4 entries and add scroll bar if more are available.
On hoover, shade country in drop down list, to show user where cursor is. On click, accept selection and add country to input field. Activate “To” form input by adding a stroke and blinking cursor. Repeat interaction for “To” field. On destination selection, activate Departure date field.
On hoover, shade country in drop down list, to show user where cursor is. On click, accept selection and add country to input field. Activate “To” form input by adding a stroke and blinking cursor. Repeat interaction for “To” field. On destination selection, activate Departure date field.
5- Departure and Return dates – On “Departure date” field click, activate drop down calendar, showing present and following month. Additionally, activate blinking cursor for manual input. Shade present date and disable past days selection. On click of desired departure date, change that calendar day’s shape to indicate start of journey and activate return date input field. Do not remove calendar from view. On click of desired return date, change calendar day’s shape to indicate end of journey. Shade days between start and end of journey, to indicate length of trip. Add “Done” button to calendar once return date is selected. On “Done” click, add date to input field and remove calendar from view.
6- Flexi dates and direct flights only – On click add a checkmark to the square.
7- Passenger – Add 1 adult to the form by default. On click, activate drop down menu with all options set to 0
except adult category. When it is possible to subtract or add passengers, make “minus” and “plus” buttons active, otherwise disable these. On “Done” click, accept selection and add information to input field. Highlight “find flights” button.
except adult category. When it is possible to subtract or add passengers, make “minus” and “plus” buttons active, otherwise disable these. On “Done” click, accept selection and add information to input field. Highlight “find flights” button.
8- Small print links – On click, open pages on separate tab.
Error message - When user inputs invalid information show error message below input field in red and add a red stroke to the field.
9 - Bread crumbs graphic – Show bar on all pages throughout the process. On click take user to corresponding previous page. Make future page graphics inactive to show user progress.
10 - back chevron – On click, take user to previous page.
11 - Price banner – On click, take user to selected new flight date. On hoover, change colour to show interaction.
12 - Price banner navigation chevron – On click of left chevron, show previous week’s best price. On right chevron click, show following week’s best prices.
13- Select flight options – On click show flight class selection menu.
14 - Flight details options – On chevron click reveal flight details drop down menu. On second Click minimise menu. Follow chevron interaction convention.
15- Payment method – On field or chevron click, drop down payment options menu. On menu option hoover, shade country in drop down list the cursor is interacting with. On selection, minimise menu and add green stroke to field. Follow chevron interaction convention.
16- Card number – On click, add blinking cursor and activate field by adding dark blue stroke. On enter accept data.
17- Card start and expiry dates – On field or chevron click, drop down menu and add blinking cursor for manual input. Follow menu interaction on note 15.
