This project was part of my UX Professional Diploma Certification. The “FLY UX” is an imaginary airline company for which I had to design a booking website.
My mission was to make research using several techniques like “Competitive Benchmarking“, “Online Surveys” and “Usability Tests” which gives both quantitative and qualitative data.
Next, I had to analyze this data in order to clearly articulate the problems I’m attempting to solve for the user.
The next step was to design and validate the solution by creating a medium-fidelity prototype and make a usability test again. The whole process and the outcome are listed below.
Client:
Fly UX
Role:
UX Researcher, UX Designer
Time span:
21/06/2020 – 21/12/2020
Research
Competitive Benchmarking
Competitive benchmarking is an extremely useful research technique that allows you to identify what your competitors are doing right, and learn from what they are doing wrong.
Objectives
- Learn how best-in-class websites and apps solve the problems we are trying to solve
- Understand the conventions we should follow
- Highlight best practice that we should emulate
KEY CONSIDERATIONS
- Homepage
- Searching and selecting the flight process
- Booking
- Payment
Summary
Do’s:
- Clear search feature for airports using IATA code
- Calendar with selected dates highlighted in a different colour
- Set clear indicators for available dates
- A progress bar that tells the user where they are in the bookings process
- Flight options that are easily distinguished from each other
- Option to change flight
- Minimize the number of inputs – if you are asking about sensitive information explain why. Don’t put Asterisk on mandatory inputs, they all have to be mandatory, alternatively mark only the optional input if you really must have them
- Minimize the number of clicks required e.g member sign in to auto-populate name, country of residence
- Up to date information regarding COVID
- Allow the user to book as a guest, don’t force registration
- Clear information about the luggage policy
Don‘ts:
- Too many ads encouraging extra things like car hire at every booking step
- Unclear price policy reduces the reservoir of goodwill
- Allow the user to get stuck in the process due to lack of good affordance
Online Survey
This is the easiest way to gather user requirements and depending on the question you put in the survey you can get both quantitative and qualitative data.
Objectives
- Learn more about the goals of people that use airline websites and apps: what they are trying to do, whether anything is preventing them from doing it, and what other features they would like to see
Summary
The answers in the survey clearly show that the main priority in the search for flights is the price, this is even stated as the number one reason to visit the site – to “Check prices”. The second conclusion we can make of the data gathered is that the steps in the process must be minimized and the user shouldn’t be forced to go through unnecessary steps like “Add-ons”. In addition, here are some of the answers to the question “What would you change or you think could be improved on the website or app that you were using for the booking process?”
Usability Test
Since there was no existing product I made a usability test on competitors websites. In the beginning, I explain the setup and how the session will be held. The first part includes a few personal questions and questions about travel website usage. I was trying to understand the context, user’s goals and user’s behaviour. In the second part, I ask the user to perform a few tasks on Qatar and Aer Lingus websites.
Objectives
- Learn about the context of the use of people that use airline websites or apps: what are they trying to do, who are they with, where are they, what devices are they using?
- Learn about the goals and behaviours of airline customers when booking flights
Pain Points
- Confusing price breakdown
- Couldn’t find the difference between the given fares
- Unclear labelling
- There was confusion in the user due to the speed of the site
- No option to change dates
Positive Experience
- Seeing the prices for other dates
- Easy to navigate
Analize
Affinity Diagram
It’s only through analysing all the data you can clearly articulate the problems you’re attempting to solve for the user. In order to create an affinity diagram, I reviewed all of the research from my previous work plus two more usability tests provided by the UX Design Institute. I wrote notes about anything I find relevant to describing the current user experience: goals, behaviours, pain points, mental models, and contextual information. After that, I organized the Post-its into relevant groups. Here is the result:
- Find the best connection
- Find the best deal
- Choose an airline
- Find flights for particular dates
- Goes straight to the “Search a flight” form
- Looking for “Book a flight” in the navigation
- Ignore all advertisement
- Prefer aggregators for comparing prices
- Mainly uses laptop
- Communicates the booking process with friends by sending screenshots and messages
- “Search a flight” form is not visible
- The carousel is taking too much space
- “I expected the search button to be below the form”
- “Selecting dates from the calendar is easier because you see the whole month”
- Can’t make the connection between the field and the suggestions given below
- It’s clear which dates are available and which are not
- “I don’t like that I can’t see the results for outbound and inbound flight in one place”
- “I want to have an easy way to refine the search parameters”
- “I don’t know how to sort the results by price”
- “I want to see only ‘Direct flights’”
- “Is this the outbound or the return flight?”
- Unclear labelling
- The need for selecting a fare must have a strong affordance
- Provide an easier way to compare the fares
- Don’t show fares that are not available
- “I need an easier way to add more baggage”
- “What will happen if I can’t take my hand luggage on board?”
- “I want to see more baggage options with the price”
- Can’t understand the baggage policy
- “I can’t book as a guest”
- “Is there a way to save my search?”
- I have no idea what ‘From £4 save your price‘ mean”
- I don’t understand what is ‘Adult1 – £0‘ in the breakdown
- “Why the ‘Admin fee‘ is not added to the total price?”
- “I can’t find the total price”
- “I’m not sure if the price is per person”
- “I want to see more clearly what’s included in the price and (what’s) not.”
- “The overview of flights and prices sometimes require additional clicking, going back and forth etc. The overview should be an overview.”
- “The site is running too slow”
- “Too much advertisement”
- “Got irritated with all the suggested extras”
- “I want to book in fewer steps”
- “When you are booking a ticket you want the process to be fast. The airline will always try to push other services on you. So you will spend more money. I just find it annoying as I want to be done quickly and don’t want to be clicking pass 4 different pages with services that I am not interested in.”
- “The mobile version is not optimized. They are just showing everything from the desktop version.”
- Confirmation dialogue for the home country is annoying
- “I like this earlier/later dates with the arrows because I don’t have to go back and fill in the search form again”.
- “I like that the airports were lister so I don’t have to type in the field”
Customer Journey Map
I build on the work I did in the affinity diagram by putting even more structure on the analysis of my research data. I defined the high-level steps in the journey which correspond to the high-level groupings (more or less) from my affinity diagram and assess whether each step of the experience was positive or negative. This image represents the user’s experience during the process.
User Flow
To highlight all the issues from the Customer Journey Map and the Affinity Diagram, a high-level flow needed to be defined for the new flight booking website. First, I sketched the flow diagram by hand before recreating the final document in a digital format. In the diagram, each screen is represented by a rectangular while the actions (such as clicking a button) are represented by a hexagon. The flow diagram will be a helpful guide for sketching the screens in the next stage.
Objectives
- Define the high-level flow for booking flights on the new airline website
- Address all the issues highlighted in the customer journey map
- Understand how users will flow through the design before starting to design
User Flow Diagram
Design
Interaction design
Now that I have researched and stated the problem, it is time to start designing the solution and sketching is a vital step before prototyping or digital wireframing.
Objectives
- Build on the flow diagram and sketch the screens and screen states for
users flowing through the Fly UX website - Address all the issues and user goals identified in research and analysis phases
Prototype
Medium-fidelity prototype
After the creation of the user flow diagram and the initial sketches of the screens, I felt more confident to start designing a medium level fidelity prototype. I took the time to design each screen with detail and made the prototype interactive so that I could have users use the prototype and get a realistic portrayal of how the flight booking experience would be.
Objectives
- Make sure the prototype contains enough detail and interactivity to test the high-level flow, screen layouts, text, and basic interactions
Prototype
Develop
Wireframes
Part of the transition from design to development is to communicate clearly to the developers what exactly we are going to build. It includes annotated notes or system rules. Without this blueprint key parts of the product may fail to be developed properly.
Objectives
- Make sure the wireframes contain all the necessary detail a developer would need to build the application accurately
Wireframe
Conclusion
Although it was just an imaginary company the Fly UX was a huge opportunity for me to go through the whole UX process. I learnt about the importance of doing the research before starting to design, otherwise, you will work with nothing else than your own (or someone else) assumptions. All design and product decisions have to be based on research.
Organizing and analyzing a big amount of data was a challenge but thanks to some highly effective techniques like Affinity Diagram and Customer Journey Map it was easy to give a structure and see the user’s pain points in the process clearly.
I really enjoy the sketching and prototyping phase, I realize that my fine arts education and front-end experience are a valuable addition to this step of the UX process.
I’m sure that I didn’t solve all the issues that I address in the research phase, but hopefully, this project is just the beginning of many other opportunities.
If you have any comments I’d love to hear from you!