This project was a compulsory part of the UX Design Institute course. Below, you will find the deliverables, together with some notes on my thought process.
1. Research
In this part of our project, I learned about a range of research techniques, with a strong focus on usability testing.
I gathered, processed and analyzed raw data in order to identify the problems users had with the flight ticket booking process.
- I performed a Competitive Benchmark analysis – analyzing multiple booking services (budget airlines, regular airlines and flight aggregators)
- I analyzed 2 already existing usability test session recordings provided by UX Design Institute to make notes on observations
- I performed a usability test on a frequent flyer (woman, Polish, flight paramedic)
Then, I created the Affinity Diagram
Based on all the raw information gathered, I created the Affinity Diagram using Miro:
In the process, I learned a lot about the importance of, among others:
AFFORDANCE OF CRITICAL “CONTINUE” BUTTONS
Users’s flow was not interrupted when they were faced with prominent, bright-colored buttons placed in the center or right side of the page. Users struggled with bad affordance buttons. One of the users was stuck for over 2 minutes due to low affordance of buttons with turquoise colors with unclear copy, not prompting them to action.
PRIORITIZATION
The more focus on the high-frequency use cases, the less cluttered the websites. With less complexity, users moved faster through the flow, and accomplished their task with better user experience. Flight search tool at the forefront of the site is an example of a good UX. Some websites approached it well – there the lower priority functionalities were deprioritized, but still clearly accessible. Others, made a bad decision to clutter their screens with edge cases (such as pictures of seats per class) resulting in users feeling overwhelmed and lost.
FEEDBACK
Most websites offered good feedback (in form of highlighted dates, choices, changes on the side summary or progress bars & animations) letting users move through the process with more certainty. When the feedback was insufficient during the rate selection, it resulted in an interrupted flow & user confusion.
HICK’S LAW REALLY MATTERS
The simpler the rate comparison tables, the easier it was for the user to maintain a good flow through the flight selection process. 3 rates turned out to be a good compromise.
CHUNKING & ALIGNMENT
Where a lot of data (flight options) needs to be presented, the right chunking & alignment helped users take decisions faster. Some users were confused by incorrect alignment, which impeded their flow.
“BEST PRICE” SEEKERS’ NEEDS
It was surprising to see, that while most users are price-sensitive, not all websites accommodated for the need to choose based on a price. On some websites, “lowest fare” marks were missing, and users could not easily control other dates to make a well-informed decision. Users responded well to the price information for alternative days and all sorts of “best choice” marks & tips.
as well as
CONVENTIONS
Where a certain site followed conventions for a typical booking site, users moved through the flow faster and with more confidence.
Then, I created the customer Journey Map
Miro was also used to create the detailed customer journey map, where I analyzed the steps from the moment of landing on the airline’s homepage, to finalizing a booking:
In the process, we noticed that some site’s UX is far more advanced than others.
While in general, mostly thanks to sticking to conventions, users flew naturally through stages such as:
- destination and dates selection
- entering the number of passengers
- flight selection
there were also stages, where customer experience differed greatly, for example:
- Class selection: LOT has failed in prioritization and chunking, resulting in “cramped” layout, a lot of noise, and caused the user to feel scared of committing an error.
- Sharing flight info: FLY EMIRATES was the only one to provide users with a dedicated “share” function. LOT was a striking opposite – user could not even generate a reliable summary to be manually shared. For the remaining websites – they did provide a summary, but no dedicated share buttons.
The above findings were crucial in creating a solution, and deciding where to follow conventions, and where to come with new functionalities to help solve users’ problems.
2. Solution
2.1. Flow diagram
After analyzing the finding, it was time to come up with my own design. I created the booking process flow diagram:
2.2. Low fidelity prototype
The flow diagram was a basis for creating the first low-fidelity wireframe:
In my first design, I focused on solving those user problems:
- not being able to share flight information easily with co-travelers, prior to final booking
- underrepresentation of budget travelers – not allowing them to change and review dates in the past or future looking for the best connections, system not highlighting the “best price” connections in any way
- poor affordability of critical CTA buttons
- difficulty adjusting currency and language
- lack of proper feedback
However, I also decided to follow conventions, where the proved to work well:
- calendar option for date selection
- button colors and placement
- comparison tables acc. to Hick’s Law principle
- static summaries & progress indicators
2.3. Medium fidelity prototype
The next step was the actual design of the med-fidelity, for which I used Figma. The prototype can be reviewed here:
2.3. Final wireframe
As last, I created a detailed wireframe file with instructions to developers.