01

02

03

04

05

06

07

08

Case Study

Psychology in UX Design

Redesigning flight booking flow on VietJet Air’s website

🕔 12 thg 4, 2023

🧑‍🎓 Nhật Duy, Tô Mỳ, Khánh Hoàng

Chapter 0

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.

Chapter 01

Trình bày bảo vệ tốt nghiệp

Học gì mà làm hay vậy?

Đây là đồ án tốt nghiệp của lớp Psychology in UX Design. Khóa học tập trung để trả lời câu hỏi: Chúng ta nên thiết kế thế nào để thuận tiện cho người dùng?

Xem khóa học

Học gì mà làm hay vậy?

Đây là đồ án tốt nghiệp của lớp Psychology in UX Design. Khóa học tập trung để trả lời câu hỏi: Chúng ta nên thiết kế thế nào để thuận tiện cho người dùng?

Tìm lớp phù hợp

Học gì mà làm hay vậy?

Đây là đồ án tốt nghiệp của lớp Psychology in UX Design. Khóa học tập trung để trả lời câu hỏi: Chúng ta nên thiết kế thế nào để thuận tiện cho người dùng?

Xem khóa học

Chapter 02

Project Overview

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.

Our goal

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.


Chapter 03

Research - Discovery

“What wrong with the current booking process in the Website?”

To answer this question, we will be applying various design research methods.

Heuristic Evaluation

👆🏻 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.


Image resource

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

  • Unnotified errors

  • And approximately 50+ more…

Usability Testing

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:

  1. Discoverability: The ability that user can find the information they needed

    • Guide

      • Can users find the information they need?

      • Can users find information about the cheapest fares?

    • Goals

      • 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?

  2. 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?

    • Goals:

      • 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?

  3. 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?

  4. Orientation: The ability to navigate on the system, to moving forward and return.

    • Guide:

      • Can users navigate where they are?

      • Do they know how to go forward/backward?

    • Goals:

      • 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?

  5. Task success: Did users complete the task?

  6. 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?

Participants

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.



Results

Uh oh, it seems that users didn't have a good experience with the current website. Here are a few quotes from our participants:


Chapter 04

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.



Key problems

Users don't know how to filter for low-cost tickets

  1. Features are not clearly explained.

  2. Access to this feature is limited.

  3. UI design makes it likely for users to ignore this feature.



  1. 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

  1. Service fees and taxes are not clearly explained.

  2. 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

  1. Users hardly realize that they can customize the service options that come with it.

  2. UI design makes it difficult for users to interact with options.



  1. Some additional services are selected by default, this could cause Reactance effect.

  2. The Uncheck option is hidden.

🧠 Reactance

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.

Main objectives

  1. Improving the ticket booking experience on the website

  2. Increasing the need to purchase additional services.

Chapter 05

Design - Develop

Competitive analysis

Here is the list of our competitors, including domestic and foreign airlines, as well as third-party booking services.

  1. Vietnam Airlines

  2. Jetstar Pacific Airlines

  3. Bamboo Airways

  4. Vietravel Airlines

  5. Traveloka

  6. Turkis Airlines

  7. Malaysia Airline

  8. Edweiss Airline



🌕 Full version available here: Competitive Analysis

Recommendations

For features

  1. The collapsible/expanding footer that shows ticket information.

  2. The calendar view that includes the lowest ticket price on each day.

  3. Allow users to choose their desired ticket class from the beginning to help them filter their search and find the best option to suit their needs.

  4. Allow sorting the order of flights according to users' needs.

For Design

  1. Provide a clear indication of price changes and updates throughout the booking process.

  2. Clear status between Outbound and Inbound screens.

  3. Highlight low-price tickets.

Behavioral Mapping

We applied the method based on the Fogg Behavior Model to address the factors that affect motivation and ability to purchase additional services

And these factors are:

  1. Users don't understand why they have to pay extra for choosing a seat on an airplane.

  2. There is a concern among users that the food on the airplane is not of good quality, yet the price is high.

  3. Users have difficulty estimating the appropriate weight limit for their family's luggage.

  4. Some users believe that they have already brought enough 7kg of hand luggage and do not need to purchase more.

  5. Choosing services for each member when traveling in a group is quite time-consuming.

Recommendations

  1. Provide some statistics on the number of people purchasing services.

  2. Use promotional images of people enjoying meals on the plane to create a sense of excitement.

  3. Display food quality testimonials

  4. Send service purchase reminders based on actual needs.

  5. Inform users about the prices of luggage purchased directly before the flight, so that they can compare prices when buying in advance versus buying at the airport.

Mockup & Prototype

Highlight flow

We make a major tweak to the flow, to sell more services, instead of just letting the user choose which service suits them, we walk them through all the service purchase screens of Vietjet Air for promotion opportunities. Of course, we still allow user to Skip through.

Highlight screens

  1. Searching for flights

    • Low fare calendar

    • Flight filter

    • Tags (e.g: “5 seats left”, “Best price”) - Scarcity effect

🧠 Scarcity effect

When people think that something is rare or only available for a limited time, they will tend to act fast to secure that scarce item.



  1. Entering passengers’ information

  • Separating section of contact information

  • Optimizing options and placeholders

  • Auto updating contact information



  1. Transparent fare changes



  1. Seat purchasing

  • Weather-based suggestion

  • Using icons to separate types of seat

  • Quick select & Manual select option


  • Multi-select

  • Quick move between airbus’s sections

  • Auto-select based on user’s preference



  1. Luggage purchasing

  • Removing default dark pattern

  • Suggesting baggage based on trip length with statistical number, create Social Proof effect

🧠 Social Proof

People may influence by the choice of other. The greater the number of people, the more appropriate the action seems.



  1. Meal purchasing

  • Allowing users to choose for multiple people, multiple meals, multiple flights, at the same time

  • Suggesting special meals

  • Suggesting meals based on flight time (show user that the Airline is cared for their health)



  1. Insurance purchasing

  • Removing default dark pattern

  • Highlighting the benefits of insurance (consequences will be covered by insurance) - Lost aversion

  • Transparent insurance price

🧠 Lost aversion

Loss aversion refers to an individual’s tendency to prefer avoiding losses. In the case of insurance, the loss is time, health, money,…



  1. Premium upgrading

  • Upsell by highlighting low extra fares with high benefits



  1. Booking successfully

  • Suggestions for additional purchases after the user has completed the main task


Competitive analysis

Here is the list of our competitors, including domestic and foreign airlines, as well as third-party booking services.

  1. Vietnam Airlines

  2. Jetstar Pacific Airlines

  3. Bamboo Airways

  4. Vietravel Airlines

  5. Traveloka

  6. Turkis Airlines

  7. Malaysia Airline

  8. Edweiss Airline



🌕 Full version available here: Competitive Analysis

Recommendations

For features

  1. The collapsible/expanding footer that shows ticket information.

  2. The calendar view that includes the lowest ticket price on each day.

  3. Allow users to choose their desired ticket class from the beginning to help them filter their search and find the best option to suit their needs.

  4. Allow sorting the order of flights according to users' needs.

For Design

  1. Provide a clear indication of price changes and updates throughout the booking process.

  2. Clear status between Outbound and Inbound screens.

  3. Highlight low-price tickets.

Behavioral Mapping

We applied the method based on the Fogg Behavior Model to address the factors that affect motivation and ability to purchase additional services

And these factors are:

  1. Users don't understand why they have to pay extra for choosing a seat on an airplane.

  2. There is a concern among users that the food on the airplane is not of good quality, yet the price is high.

  3. Users have difficulty estimating the appropriate weight limit for their family's luggage.

  4. Some users believe that they have already brought enough 7kg of hand luggage and do not need to purchase more.

  5. Choosing services for each member when traveling in a group is quite time-consuming.

Recommendations

  1. Provide some statistics on the number of people purchasing services.

  2. Use promotional images of people enjoying meals on the plane to create a sense of excitement.

  3. Display food quality testimonials

  4. Send service purchase reminders based on actual needs.

  5. Inform users about the prices of luggage purchased directly before the flight, so that they can compare prices when buying in advance versus buying at the airport.

Mockup & Prototype

Highlight flow

We make a major tweak to the flow, to sell more services, instead of just letting the user choose which service suits them, we walk them through all the service purchase screens of Vietjet Air for promotion opportunities. Of course, we still allow user to Skip through.

Highlight screens

  1. Searching for flights

    • Low fare calendar

    • Flight filter

    • Tags (e.g: “5 seats left”, “Best price”) - Scarcity effect

🧠 Scarcity effect

When people think that something is rare or only available for a limited time, they will tend to act fast to secure that scarce item.



  1. Entering passengers’ information

  • Separating section of contact information

  • Optimizing options and placeholders

  • Auto updating contact information



  1. Transparent fare changes



  1. Seat purchasing

  • Weather-based suggestion

  • Using icons to separate types of seat

  • Quick select & Manual select option


  • Multi-select

  • Quick move between airbus’s sections

  • Auto-select based on user’s preference



  1. Luggage purchasing

  • Removing default dark pattern

  • Suggesting baggage based on trip length with statistical number, create Social Proof effect

🧠 Social Proof

People may influence by the choice of other. The greater the number of people, the more appropriate the action seems.



  1. Meal purchasing

  • Allowing users to choose for multiple people, multiple meals, multiple flights, at the same time

  • Suggesting special meals

  • Suggesting meals based on flight time (show user that the Airline is cared for their health)



  1. Insurance purchasing

  • Removing default dark pattern

  • Highlighting the benefits of insurance (consequences will be covered by insurance) - Lost aversion

  • Transparent insurance price

🧠 Lost aversion

Loss aversion refers to an individual’s tendency to prefer avoiding losses. In the case of insurance, the loss is time, health, money,…



  1. Premium upgrading

  • Upsell by highlighting low extra fares with high benefits



  1. Booking successfully

  • Suggestions for additional purchases after the user has completed the main task


Chapter 06

n Rounds Improvement

Testing

Usability Testing with Prototype

  1. Users find it easy to interact

  • Just press “Continue” to go through the steps



  1. Users can find the cheapest fares

  • Understand how to use the “Cheapest” filter

  • Get the cheapest price based on the date picker tab



  1. Users realize the benefits of upgrading



  1. 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.



  1. Users misunderstand luggage purchase

  • Misunderstand icons as the number of pieces of luggage to be carried



  1. Users don't know how to change tabs to choose services for other passengers



  1. The selection suggestions are not easy to recognize



Design Critique

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?



Design revamp

  1. Users misunderstand seat purchase

  • Use icons & colors to categorize chairs, reducing distractions caused by images

  • Clearly distinguish 2 options "Quick select" & "Manual select”



  1. Users misunderstand luggage purchase: Change the illustrations of luggage types to be more consistent and easy to read



  1. Users don't know how to change tabs to choose services for other passengers: Divide the selection for each passenger into scrollable sections



  1. 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



  1. Users may find it time-consuming going through all the steps: Inform users that they have the option to skip to checkout



Chapter 07

Conclusion

Key Learning

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.

Next Steps

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.

Reference

https://growth.design/psychology

https://behaviormodel.org/

https://thedecisionlab.com/biases

and more from UX Foundation’s Psychology of UX Design course document.

Học gì mà làm hay vậy?

Đây là đồ án tốt nghiệp của lớp Psychology in UX Design. Khóa học tập trung để trả lời câu hỏi: Chúng ta nên thiết kế thế nào để thuận tiện cho người dùng?

Xem khóa học

Học gì mà làm hay vậy?

Đây là đồ án tốt nghiệp của lớp Psychology in UX Design. Khóa học tập trung để trả lời câu hỏi: Chúng ta nên thiết kế thế nào để thuận tiện cho người dùng?

Tìm lớp phù hợp

Học gì mà làm hay vậy?

Đây là đồ án tốt nghiệp của lớp Psychology in UX Design. Khóa học tập trung để trả lời câu hỏi: Chúng ta nên thiết kế thế nào để thuận tiện cho người dùng?

Xem khóa học

Thông tin liên hệ

Địa chỉ: Tầng 3, số 297 Trần Đại Nghĩa, quận Hai Bà Trưng, thành phố Hà Nội

Email: hello@uxfoundation.vn

Hotline: 098 3311 490

Tổng quan

Giới thiệu

Nhận xét học viên

Cái giá phải trả

Case Study

Các khóa học

UI Foundation

Psychology in UX Design

UX Foundation

Mạng xã hội

Facebook

Linkedin

Youtube

Copyright © 2023 UX Foundation. All Rights Reserved

Điều khoản dịch vụ

Thông tin liên hệ

Địa chỉ: Tầng 3, số 297 Trần Đại Nghĩa, quận Hai Bà Trưng, thành phố Hà Nội

Email: hello@uxfoundation.vn

Hotline: 098 3311 490

Tổng quan

Giới thiệu

Cái giá phải trả

Case Study

Các khóa học

UI Foundation

Psychology in UX Design

UX Foundation

Mạng xã hội

Facebook

Linkedin

Youtube

Copyright © 2023 UX Foundation. All Rights Reserved

Điều khoản dịch vụ

Thông tin liên hệ

Địa chỉ: Tầng 3, số 297 Trần Đại Nghĩa, quận Hai Bà Trưng, thành phố Hà Nội

Email: hello@uxfoundation.vn

Hotline: 098 3311 490

Tổng quan

Giới thiệu

Cái giá phải trả

Case Study

Các khóa học

UI Foundation

Psychology in UX Design

UX Foundation

Mạng xã hội

Facebook

Linkedin

Youtube

Copyright © 2023 UX Foundation. All Rights Reserved

Điều khoản dịch vụ

Trang chủ

Giới thiệu

Case Study

Truyện tranh

Lịch khai giảng

Giới thiệu

Case Study

Truyện tranh

Lịch học

Trang chủ
Về chúng tôi
Danh sách khóa học

UI Foundation

For Start 🐣

Psychology in UX Design

For Growth 🦊

UX Foundation

For Everyone 🦁

Case Study
Bài viết
🏃‍♂️ Tìm lối thoát

Lịch học