Overview
TobUX is a fictional aggregator company providing customers with services to book flights, hotels and cars. The challenge is to build an online experience to book flights to help TobUX customers book their flights without any frictions and enjoy planning their trips.
My task was to apply the user-centered design approach to design the fast and intuitive web application for customers.
The project was a part of Professional Diploma in UX Design course with UX Design Institute and Glasgow Caledonian University.
Role
UX/UI Designer
UX Researcher
Timeline
November 2021 - March 2022
Design Process
User-centered design approach
Research
I targeted frequent travelers and conducted depth interviews and usability tests with them. In addition, in order to grasp the landscape in the flight booking industry, I benchmarked 4 competitor web applications.
The goal for this research phase was to gather qualitative materials for analysis in order to understand the goal, context and behavior as well as pain points of the frequent travelers when they book flights online.
Before booking, I compare available options
Right price, time, and baggage allowance are the decisive factors for booking
Analysis
With the gathered research data, I started analyzing the data together with a collaborator by clustering it into categories such as goals, context, behaviors, pain points, and mental models, in an affinity diagram.
To better understand where problems lie, I translated the affinity diagram into a customer journey map and visualized how the frequent travelers experience each step on the flight booking process.
The goal here was to understand the design target and define problems by finding out where frustrations live.
Defined Problems
Many customers would like to skip the page as soon as possible, but some actions are required to proceed with the booking process.
Unnecessary clicks are demotivating for customers, such as when they select dates on a calendar and compare tickets.
Customers get frustrated and struggle to use UI elements and functionalities when those are not working as they expect.
Design Concept
Once the problems were defined, I moved onto designing a solution. First, I created a user flow diagram, which consists of screens, screen states, and user actions, for the primary use case; booking flights. Based on the user flow diagram, I started sketching an interaction design.
The goal was to create a friction free and efficient flight booking flow with an intuitive user interface, so I considered the mental models carefully.
Regarding the user flow, the Add-on page and the lengthy clickstream were one of the major areas of frustration highlighted in research and analysis. Therefore I designed a smooth flow by eliminating unnecessary clicks and a more efficient flow by combining the flight itinerary and the passenger information input page into one page. I also paid attention to quickly reflect user’s selection, as well as pre-populating information where possible, yet adding some steps where expected.
Sketch examples to design interactions for TobUX customers to input data to search for flights. The intuitive interaction design solution was created after some iterations.
Prototype
Based on the sketched interaction design, I started creating a mid-fidelity prototype.
The goal for this phase was to create a clickable mid-fidelity prototype for my design solution for usability tests afterwards.
Validate
With the mid-fidelity prototype I created, I conducted usability tests in order to validate my design solutions. Below are the main feedbacks from users for improvements.
The goal for this phase was to discover any frictions and counterintuitive interactions and to provide the final design solution.
① Some interactions on Add-ons are too “careful”
When selecting additional baggages, it was confusing for users that the additional price was reflected only after they confirmed.
② Price for selecting seats should be shown before choosing
Despite the selected seat price was shown, users preferred to see the price before clicking.
③ Text in the button is hard to see
User need to look into the screen to see what is written on the button, which leads low accessibility.
Design Solution
Considering the feedbacks from the usability tests, I refined the design and provided the final design solution. My aim was to solidify my design solution that is fast and intuitive.
Based on the final design solution, I provided a wireframe with annotations, and it was ready for developers to smoothly start developing the web application.
Homepage & Search Fields
As research showed that many frequent travelers have a travel destination or dates in mind, search fields are prominently presented before best deals and trending travel destinations. The language & currency setting is on top for accessibility.
Result Page
First results could be compared without scrolling, and the Best tab (cheapest × fastest) is selected by default, responding to the desire for “right price and right time”. A number of baggage allowance is also displayed for each result, for comparing the results without any further clicks.
Passenger Detail Page
Usability tests during the research phase revealed that many users scroll the itinerary page to see the flight itinerary. By placing the passenger detail input fields below the itinerary, the booking process could start efficiently with less clicking.
Add-ons Page
No add-ons are selected by default for those who would like to skip the page as soon as possible. Prices for each add-ons can be seen when hovering, so that customers can know before choosing.
