Redesigning flight booking flow on VietJet Air’s website
🕔 12 thg 4, 2023
🧑🎓 Nhật Duy, Tô Mỳ, Khánh Hoàng
Bối cảnh dự án
Đây là đồ án tốt nghiệp khóa học Psychology in UX Design của Nhật Duy, Tô Mỳ, Hoàng Khánh thực hiện từ tháng 1-4/2023. Khóa học được hướng dẫn với Giảng viên Vũ Tuyên Hoàng. Những nghiên cứu về Persona được trích dẫn từ bài tập của lớp UX Foundation K02 thực hiện vào năm 202.
Những phần việc liên quan đến UI & Visual Design được các học viên tự làm, nằm ngoài nội dung của khóa học Psychology in UX Design. Mọi người muốn tìm hiểu thêm để làm tốt về Ui & Visual Design có thể tham khảo khóa học UI Foundation.
Video được trích từ buổi bảo vệ tốt nghiệp của lớp. Nội dung bài viết được trích từ Case study do bạn Khánh Hoàng viết lại sau khóa học. Nội dung sẽ giữ nguyên nội dung Tiếng Anh như trong case study gốc.
Trình bày bảo vệ tốt nghiệp
Let’s talk about VietJet Air
These conclusions were drawn after we reviewed VietjetAir's annual reports over the past few years:
VietJet Air is the first private airline in Vietnam, targeting customers who need to travel at a low cost.
VietjJet Air’s long-term goal is to become a multinational airline group with a wide network of flights throughout the region and the world, and to be a brand loved and trusted by customers.
So what happened with this “beloved” airline
Despite its great vision and a cool mascot, this brand is receiving no mercy from the market:
Many competitors: The airline is facing stiff competition from new domestic airlines like Bamboo Airways and Vietravel Airlines, as well as foreign airlines such as Turkish Airlines, Malaysia AirAsia, Edelweiss Air, and Air Seoul Inc. This has made price competition no longer viable.
Inefficient resources spent for sale campaign: Being a low-cost carrier brand, VietJet Air runs several major sales campaigns throughout the year, such as during Tet holiday and summer travel. However, the expenses associated with these discount activities consume a significant portion of the budget.
Difficult sale on additional services: Additional services such as purchasing luggage, seats, meals, and priority check-in can provide a significant source of revenue for the airline. However, the percentage of customers opting for these services is relatively small.
Limited search results: The "look-to-book" ratio is limited on the search results page, which makes it difficult for users to compare the results and make informed booking decisions.
Given the airline's significant investment in sales campaigns and price competition with competitors, we were in need of a cost-effective solution that would satisfy the business needs and be simple to implement.
Before delving into the airline's issues, let's take a moment to examine the target audience persona for VietJet Air.
Research - Discovery
“What wrong with the current booking process in the Website?”
To answer this question, we will be applying various design research methods.
👆🏻 We experienced the booking process on the website ourselves, taking screenshots and identifying usability issues using Nielsen Norman’s 10 Usability Heuristics for User Interface Design.
Based on our research, we have identified some critical usability problems, such as:
Too many decorative elements, which causes distraction for users when performing the main action.
Sneak-into-basket dark pattern
Misleading UI components
And approximately 50+ more…
How we planned the Usability Testing (UT)
By mapping down the major concern problems from the Heuristic Evaluation session, we define some specific goals for each attribute follow by:
Discoverability: The ability that user can find the information they needed
Can users find the information they need?
Can users find information about the cheapest fares?
Can users easily find where to book tickets?
Can users find a way to sign up for a SkyJoy Membership?
Can users find the cheapest ticket?
Can users find the airline's offers (during the booking process)?
Can users compare flight prices between flight times? (Same day or between dates) 6. Are users aware that the time-out time is 15 minutes?
Comprehension: The ability to understand the context, meaning of the screen and able to moving forward on the flow.
Guide: Do users understand the meaning of the screen, the context in it, and what will need to be done next?
Do users understand what surcharges they are facing?
Do users understand meal, baggage options and insurance are optional?
Does the user understand the context and operation on the flight selection screen? (date transfer, forward price, flight status/return)
Are users aware of the missing information (departure date, return date)?
Do users understand the information requirements in the personal information input screen?
Learnability: The ability to adapt and learn new usage.
Guide: With a new experience, do users learn/remember how to use it?
Goals: Can the user remember the time-out time is 15 minutes?
Orientation: The ability to navigate on the system, to moving forward and return.
Can users navigate where they are?
Do they know how to go forward/backward?
Do users know if he or she is choosing a ticket for a single trip or a return trip?
Do users know which step they are in in the booking process?
Can the users easily navigate back away from the ad?
Task success: Did users complete the task?
Satisfaction: Do users feel satisfied after using it?
After complete define the research goal, we create some scenarios for user to interact on the website that can help answer our concern.
Scenario 1: Suppose you have a need to travel from Hanoi to Saigon next month with the cheapest fares on Vietjet Air's website system. You can decide for yourself the date of departure and return to Hanoi. Please go to Vietjet Air's website to book tickets.
Scenario 2: Suppose you need to book a return ticket from Hanoi to Dalat for a family trip next month. You need to book tickets for yourself and 2 family members (including 1 small member under 2 years old). How do you find and book flight tickets to get the cheapest fares with additional services?
To get some practical data of user behavior on the VietJet Air website, we conduct Usability Testing with 5 participants that match our persona.
How we conduct the UT session
Due to the distance across team members as well as interviewees, we decided to conduct Remote Moderated Usability Tests through Google Meet.
In each session, one of us worked as the facilitator, while the other two took notes on users’ struggles and feedback for the facilitator.
Uh oh, it seems that users didn't have a good experience with the current website. Here are a few quotes from our participants:
Research - Define
Analyze research data
After collecting all the research findings, we analyzed them using Affinity Diagramming, a collaborative method in which we placed all the observations, findings, etc. on sticky notes in FigJam and grouped them accordingly.
Each group represents the problems that users are experiencing when using the VietJet Air website.
Users don't know how to filter for low-cost tickets
Features are not clearly explained.
Access to this feature is limited.
UI design makes it likely for users to ignore this feature.
Users are forced to use a lot of memory load when choosing between numerous different options.
🧠 Memory load
Can be called Cognitive Load, just like computers, human brains have a limited amount of processing power. When the amount of information coming in exceeds our ability to handle it, our performance suffers. We may take longer to understand information, miss important details, or even get overwhelmed and abandon the task.
Users don't understand why the fare increases with each step
Service fees and taxes are not clearly explained.
Through the steps, the change in the invoice is not highlighted, causing users to often ignore it.
Users don’t know they can customize the additional services
Users hardly realize that they can customize the service options that come with it.
UI design makes it difficult for users to interact with options.
Some additional services are selected by default, this could cause Reactance effect.
The Uncheck option is hidden.
If user feel something is taking away their choices or limiting the range of alternatives. It'll trigger an opposite response to what was intended, and also increases resistance to persuasion, this could lead to abandon the process or even abandon the brand.
Improving the ticket booking experience on the website
Increasing the need to purchase additional services.
Design - Develop
n Rounds Improvement
Usability Testing with Prototype
Users find it easy to interact
Just press “Continue” to go through the steps
Users can find the cheapest fares
Understand how to use the “Cheapest” filter
Get the cheapest price based on the date picker tab
Users realize the benefits of upgrading
Users misunderstand seat purchase
Do not understand the types of seats
Misunderstand as ads (Banner blindness effect)
🧠 Banner blindness
People’s tendency to ignore page elements that they perceive (correctly or incorrectly) to be ads. Modern human cognitive already suffocate with high-quality picture on many advertise and banner.
Users misunderstand luggage purchase
Misunderstand icons as the number of pieces of luggage to be carried
Users don't know how to change tabs to choose services for other passengers
The selection suggestions are not easy to recognize
Users may find it time-consuming going through all the steps
Is it time-consuming to divide additional services into different steps for the user to go through?
Do users misunderstand that these services are required to be purchased before proceeding?
Users misunderstand seat purchase
Use icons & colors to categorize chairs, reducing distractions caused by images
Clearly distinguish 2 options "Quick select" & "Manual select”
Users misunderstand luggage purchase: Change the illustrations of luggage types to be more consistent and easy to read
Users don't know how to change tabs to choose services for other passengers: Divide the selection for each passenger into scrollable sections
The selection suggestions are not easy to recognize: Change the display of suggestions to a more personalized format by incorporating the brand mascot as a highlight
Users may find it time-consuming going through all the steps: Inform users that they have the option to skip to checkout
We have gained valuable insights throughout this project, and this knowledge motivates us to continue exploring and practicing in the field of UX.
🧠 Applying psychological and behavioral models creates a meaningful user experience.
🗨️ Conducting usability testing in the right way can reveal limitless insights and opportunities for improvement.
🧑⚖️ Even the most promising solution is just a hypothesis, and it is vital to take into account the facts, options, and emotional state in every argument.
🌄 When the design team follows a correct UX method and process, the outcome can be implemented more efficiently and with less ambiguity.
❄️ Small experiences matter.
💡 Creativity is not limited to anything; it can be applied to even the most technical aspects of UX design.
Design is a never ending process, there still many things we want to continue with this project.
📐 Define the key metrics that can be used to measure the impact of the new design.
☝️ New features: Notification for price changes and services.
👀 Expand the research to include other personas to explore more comprehensive solutions.
and more from UX Foundation’s Psychology of UX Design course document.