Online Travel App Product Feature Competitive Analysis and UX Case Study

18 min readOct 8, 2020

Part 02, will be about the Online Travel Agent App.

At first, I will do research for 2 global apps, and 1 from local. Expedia, KAYAK, and Skyscanner are on the top of the list for online travel agent global app. And I try to do the searching, booking, and payment for those 3, but I found something not really different from the Airline app we discuss before.

Why I do not continue research with Expedia, KAYAK, and Skyscanner?

Couple of reasons that I decided to drop it off and continue with the local app.

Web-View (Not Fully Native Experience)
When you choose a flight in KAYAK, you will do a booking on the airline website but wrapping in the KAYAK app. They provide button View Deals and you will finish your transaction on the website.
In Expedia, for the payment, you will get a web-view for the Expedia website.
Third-Party Website
Skyscanner list all the offer from the third-party website and you continue your booking on the website.

3. One Payment Method
All of them mostly from one payment method, and it is a credit card only.

So, in the end, we will go with the top 3 online travel app in Indonesia, Traveloka, Tiket.com, and PegiPegi.

Read it here why we choose those 3 local players.

Traveloka

Let’s start with the biggest one. Traveloka, a local app with silicon valley taste in technology and design. Let’s explore the booking process.

Notes we can take of this Traveloka app

Since I am using Traveloka a lot, this noted taking will be a huge long list, because I would like to go deep into the tiny detail of this app.

1. Home Page
Traveloka offers a lot of different kinds of services. Flight, Hotel, Car Rentals, Data plans, etc. And below that, there are Ongoing Promos, Events, Traveloka news, popular attractions, theater locations, and any other listing that they hope you stay longer in the app. But while you scrolling, scrolling, scrolling, you can still access their main services in instant, because they make it Hide/Reveal a Sticky Header on Scroll.

2. Asking for the Scroll button.

Hey, there is something below this,
please click More or click the continue button to scroll.

Traveloka uses this very consistent to ask the user to scroll down or click the Continue button to scroll. Example below. But they don’t use it for every page that scrolls. They use it on the home page, it’s for learning for the user, and show it again in booking page and payment page.

3. One-Way is the default
One-Way should be in Default mode when searching flight, and you can tick the button for Round-trip on your own. Because for choosing round-tip should be on the user’s awareness itself. We provide one-way is the default, and round-trip by choice.

4. Searching List
Traveloka shows the user max to 5 their frequent searches and listing of popular cities. This will make more easy and fast for the user in searching the city and airport. If you’re first time user, you will not see frequent searches, what you will see only Popular Cities and Airports.

5. Swap Origin and Destination Button
Since most every travel app uses this function, it can become a mental model for them, so we need to add this function also.

5. Recent Search
Why apps should store all recent searches, in order to provide this data to the user the next time they conduct a search. It benefits the user in saving their time and effort in searching for the same item again. Traveloka provides the CLEAR ALL button if you want to remove it.

5. Date Selection Information
Traveloka provides the lowest price estimation obtained from their search result database of the last 48 hours, and it can change every time. Not only that, but Traveloka also provides Holiday on the date. And if you did not comfortable seeing all those numbers of price estimation, you can turn it off on the toggle button at the bottom.

6. Very clear Passengers and Seat Class Selections
Nice interface with icons when you select passenger and clear description of seat class when and you choose it. Clear information on what age is adult, child and infant.

7. Search Result and the features on it.
A lot of options in the search results. These below options you can do in the search results.

8. Booking Summary.
What information does Traveloka give in booking summary?

Why Traveloka put Baggage CGK-SIN Rp 0? Since we still not asking to buy baggage here. Hmmm.. I wonder this just for heads up.

9. Booking Section.
Journey to get your ticket, Traveloka divides into 4 processes, Book, Review, Pay and E-ticket. Let’s take a look at Book Section.

In Book section is divide again in 2 steps. You need to complete the first step before move forward to the second step.

It would be nice if Traveloka put detail baggage and number of seats in the fill-in details and price breakdown. Like this.

10. Confirmation Booking Detail.
This one is great. To avoid re-booking experience from the very start you need to make sure the user fills the correct details. If you click Yes, Continue, both process Book and Review already done. You move to Payment.

11. Payment.
Traveloka provides a lot of payment options. Here is the list:

Bank Transfer (BCA, Mandiri, BRI, BNI)
Credit Cards (Visa, MasterCard, JCB, AMEX)
Direct Debit
UANGKU
PayLater
ATM
Alframart
Indomaret
Cimb Clicks
BCA KlikPay
Mandiri Debit

12. Focus Information.
When Traveloka wants you to consume very important information when first you visit. Traveloka did this.

13. Online Check-in.
Available exclusively for Traveloka members, online check-in via Traveloka App (v2.18 onwards) and website allow you to check-in for your flight even before you arrive at the airport.

Now you no longer have to juggle through different airline sites or apps. Simply log in to your Traveloka account, check-in online and access your boarding pass easily via Traveloka — your whole online check-in experience will be completely hassle-free!

What to do after you have checked in online?

After you have successfully checked in for your flight, you will receive your boarding pass. This boarding pass will be accessible through both the e-ticket on your Traveloka App or through the email sent to you. Please make sure that all information written in the boarding pass is correct.

Aside from preparing the boarding pass, you also will need to do the following:

Print your boarding pass
While some airlines allow you to print the boarding pass on your own, others might require you to print it at the airport check-in counter.
Prepare your travel documents
Even though you have checked in online, you still will need to prepare travel documents such as a valid identification document, passport, visa, or health certificate.
Drop your baggage at the airport
If you carry baggage, make sure to check your baggage at the check-in or baggage drop counters at the airport before they are closed.
Confirm your flight information at the airport
Your boarding gate may be changed without prior notice. Please check and confirm your flight information once you have arrived at the airport.
Arrive at the boarding gate on time
Check your boarding time as written on the boarding pass and make sure to arrive at the boarding gate before it is closed.

14. The payment method cannot be changed.
When you selected your payment method, you cannot change it anymore. You need to search, re-booking again the same flight if you want to change the payment method. But there is no guarantee you will get the same price as before.

The scenario will be like this when the user selects a payment method via Indomaret and failed, maybe because of network down, computer dead, and etc. The user needs to search again for that flight and re-booking and select a different payment method.

15. Passenger Details Save
The first time you input the passenger details, Traveloka will save this on the app. So when the user fills detail for the same person again, all the fields automatically populated, all users need just select the name.

Tiket.com

Let’s see how searching, booking, and payment in the tiket.com app.

Notes we can take of this Tiket.com app

1. Loading Homepage
It took about 10 seconds of loading time to finally see navigation in the home screen. Users already spend some time in splash screen in hope when it’s done users can directly use the navigation or other content.

2. Searching Page
Very similar to Traveloka, I don’t know who copy who. But maybe, just maybe… this situation looks like Indomaret and Alfamart all over again. When there is Indomaret, in front of it or next to it will be Alfamart. Alfamart let Indomaret do the research, since they have the same business model, share the same target market, so Alfamart will open not too far away from Indomaret since they belief Indomaret was already done some research of that place will gain some profit and traffic to the store.

So I assume Tiket copy what Traveloka does because their belief Traveloka did some research and come with the layout and structure of the searching page.

The difference is features like Traveloka has Multi-city, Discover, and put description in Seat Class selection.

3. No frequent searches
In the tiket.com searching list, they not put your frequent searches, they only list the top 10 popular destinations.

4. Search Result and the features on it.
A lot of options in the search results. These below options you can do in the search results. It depends on your destination, some feature might appear some might not.

5. Too many clicks just for little information.
Just for little information and when there is a space for fit in that page, why you need a user to go for over click just to see that information, and the navigation for seeing facilities not very clear. Example below:

Let’s compare with Traveloka, please see the image below. Traveloka put clear navigations and more useful information. When you see the image above, How do you know that a small arrow is too see facilities?

6. Seat Selection.
Tiket.com did not include seat selection (purchase) in the booking process, they do seat selection when a user does online check-in. Different than Traveloka, in Traveloka user do seat selection after buy baggage, it is because you need to purchase for that seat. I don’t know if tiket.com does not charge for the seat, if they do charge it, the user will have to make the payment twice, and it’s not good. But if it free, all things go well.

Let’s see user flow for seat selection in Traveloka and Tiket.com

Traveloka buys seats before payment,
Tiket.com buys seats after payment.

7. Miss add-ons on Price Detail.
Price details before the user choosing a payment method and when user after choose the payment method is different. Tiket.com misses the add-ons on that details.

8. Complete Payment page.
Let’s compare complete payment Traveloka and Tiket.com. And take some learning of it. Let’s take a look image below.

Contrast Focus
Tiket.com: First things you focus go to “SAYA SUDAH MEMBAYAR” button
Traveloka: The first thing you see is block square yellow important message.
Both of them use yellow color as a contrast difference, but different objective. Why Traveloka put less contrast in the button? It is because of that button rarely use, most of the transaction is automatic verifications, the most important for them is the total amount.
Progress Status
Traveloka tells the user that you are still in stage number 3, Pay. Finish this and you will go to the next stage which is E-ticket. Tiket.com did not provide this.
Step of Payment
Traveloka divides the layout into 3 steps, Timer, Transfer information, and button when you finish the payment.
Payment method change
In tiket.com users still can change the payment methods but not in Traveloka. In Traveloka you need to re-booking again for changing the payment method.

9. Payment method.
Tiket.com provides a lot of payment options. Here is the list:

Virtual Account (Mandiri VA, BCA VA, BNI VA, BRIVA)
Credit Cards (Visa, MasterCard, JCB, AMEX)
Debit Cards
Instant Payment (GoPay, Klik BCA, BCA KlikPlay, CIMB Clicks, OneKlik, Sakuku, LinkAja)
ATM
Transfer Bank (BCA, Mandiri)
Retails (Alfamart, Alfamidi, LAWSON, Dan-Dan, Indomaret)
Kredivo
Akulaku

10. The payment method can be changed.
When you selected your payment method, you still can change it. You don’t need to search, re-booking again the same flight if you want to change the payment method and you still got the same booking code and price.

The scenario will be like this when the user selects a payment method via Indomaret and failed, maybe because of network down, computer dead, and etc. The user just goes to the app, go to pending payment, click Change the payment method, and select the new one that fits you best.

PegiPegi

Let’s see how searching, booking, and payment in the PegiPegi app. Let’s spot up the difference between the other two we discuss before.

Notes we can take of this PegiPegi app

1. More Button
Pegipegi uses More buttons for scrolling. They use in homepage and search results page. This button only disappears when you reach the end of the page.

2. Default Value
When the user arrives in searching input page, the user will not get an empty form, instead PegiPegi input default value for starting point. What are the default value?

One-way Trip
Origin: Jakarta (Current town)
Destination: Bali (popular city)
Departure: Tomorrow (Current Date + 1)
Passenger: 1 Adult.
No option for select cabin class

3. Searching Category
PegiPegi classified user searches by city and airport. If the user selects the city that means, all airports in the city will get search. By differentiating it by icon and text can make the user select fast and easy.

4. Scrolling Date
PegiPegi gives users different experiences when dates selection, they use vertical scrolling to browse the date. Traveloka and Tiket.com use horizontal scrolling with arrow navigations. Quite confusing at first because your mental model already creates a pattern for date selection should have arrows navigation and horizontal scrolling.

5. Missing Select Button in Flight Details
Normally when a user wants to see flight details from the search results, the user can select that flight directly without having to back to the search result page, but not PegiPegi. Let me show you what mistake PegiPegi does.

But, I think I know the reason why they don’t add Select this Flight button in flight detail for search results. Because they have a similar page for this detail when user already selected the flight. Create a new page may be too much effort for them, so they only change the opacity of the header.

6. Search Result and the features on it.
A lot of options in the search results. These below options you can do in the search results.

7. No Options for Buy Baggage.
I try to find options for purchase baggage, but I cannot find it.

8. Option for Insurance is ON for default.
The travel insurance option already checked for default. PegiPegi shows the benefits of having this insurance such as compensation for flight delays, flight cancellations, and personal accidents.

When the user unchecks the options for insurance, PegiPegi shows a popup for confirmation with number and example if you have your insurance. PegiPegi even made the CTA for keep the insurance stand out. Somehow this travel insurance really important for PegiPegi.

9. Pop-up Asking Review Detail.
A nice pop-up asking to review detail again by PegiPegi. Traveloka and Tiket.com just provide simple confirmation pop-up with no data on that pop-up. PegiPegi did differently, they put some nice little information on that pop-up such as airline, date and time, and passenger.

10. Payment method.
PegiPegi provides a lot of payment options. Here is the list:

Transfer Bank (BCA, Mandiri, BRI, BNI)
Credit Cards (Visa, MasterCard, JCB, AMEX)
ATM
Virtual Account (BCA VA)
Internet Banking (KlikBCA)
Retails (Alfamart, Alfamidi, LAWSON, Dan-Dan, Indomaret)
Kredivo

11. Payment Time Limit.
Same airline (Lion Air), with 3 different apps and different payment time limit. We wonder what is the actual standard for the payment time limit, what is the regulation from Angkasa Pura? Look like these apps create their own rule. The time limit given from each airline is different depending on what airline we use. So, what determines the length of the time limit is not from the relevant travel agent but directly from the airline’s own system.

12. Online Check-in.
This feature can be used after you get an e-Ticket from the destination airline. Here are the steps to check-in online via the Pegipegi application:

Enter the “Order” menu
Select the flight you wish to check-in online
On the e-Ticket menu, click the flight route
Next on the Flight Settings menu select “online check-in”
Then there will be information that you will be redirected to the airline’s website, then click “Continue”
After that, it will go to the airline’s website
Please enter data following the provisions of each airline.

13. Seat Selection.
No seat selection available for PegiPegi app.

Summary

3 OTAs. Let’s summarize all of this.
What we can learn from the 3 OTA’s app above?

1. Must Be Fully Native
Again this is must be done. No excuse for any web-view or slow hybrid app in the main flow. Users can tolerate web-view only for a page like a term, privacy policy, help. Pages that rarely user visit.

2. No-Third party Website
OTA’s show a list of offers on other websites and tell users to go booking flights on that website. It’s a No-No.

3. Multiple Payment Methods
By having multiple payments methods, will make the user more comfortable and easy to choose what payment method their fit.

4. Fast Loading Screen
It’s okay for the user to spend around 5 seconds on the splash screen, but do not let the user wait for another 10 seconds just to see the navigation and content. Speed things up on your home screen.

5. Keep the main services navigation available on the scroll
Long scrolling content on the home screen? It’s okay, as long as you keep the main navigation visible for the user. Or at least, when the user taps the Home icon, the page scrolling up to the top automatically.

6. Default Value
Since these 3 apps the most popular OTA in Indonesia, I think we need to set default value just like them to avoid mental model confusion.

Trip: One-way
Origin: Current location or empty
Destination: empty or can be a popular city that matches the origin.
Departure: empty or date now + 1 which is tomorrow.
Passenger: 1 Adult
Seat Class: Economy

7. Recent Search and Frequent Search List
It benefits the user in saving their time and effort in searching for the same item again.

8. Clear Date selection and estimate fare
It is nice to see all the prices in one month, so the user can see directly what date is the cheapest. We also need to consider if the user chooses one-way no need to show an option for the return date.

9. Options in search results
Default options would be:

Search for a new flight without having to go back to the previous page.
Sorting and Filtering
Flight Details with selection directly from that page.
Nice to have: Price Alerts and Share the Result.

10. Include Buy Baggage and Purchase Seat in Booking section
Let the user do a one-time payment for all of it. Ticket, baggage, and seat.

11. Confirmation Booking Detail
This confirmation is important, we can put some little information in the pop-up to speed this process.

12. Breakdown of the Final Cost
Breakdown of the final cost is important, the user needs to see what list of their paying for. List all of it before payment and when do the payment, Airline cost, baggage cost, seat cost, and any add-ons that users put on it.

13. Online Check-in On the App.
This feature is a must-have, complete online check-in on the app itself, do not redirect the user to the airline’s website. Complementary would be like eBoadingPass or something like that.

14. Avoid over-click
Just for little information and when there is a space for fit in that page, why you need a user to go for over click just to see that information and make sure the navigation for seeing details is clear.

15. Focus Area for Payment Instruction
Clear focus area and payment instruction would make user make the payment fast.

16. Change Payment Method
This will be very helpful if the first chosen payment method failed.

17. Save Passenger Detail
Select the name of the passenger and all the fields automatically populated, exactly the same as user input before.

Some other things need to consider

1. Airport and City Differentiation while searching
If a user selects the city that is mean all the airport in that city is selected.

2. More Button
Directly asking the user to scroll down to see content below the fold.

3. Select flight in detail flight on the search result.
Let’s a user select the flight directly from a detailed flight without having to back to the search result page.

4. Do not push users to buy what they do not intend to buy.
Insurance or any other add-ons, leave it to uncheck. Let’s user purchase any of it on their own awareness.

5. Step by Step on Payment Instruction.
Divide the payment into steps, which can make the user aware of what needs to be done first.

6. Progress Status
Showing status in the header can make the user aware of what stages their on right now. Example:

Traveloka: 1. Book — 2. Review — 3. Payment — 4. E-Ticket
Tiket.com: (none)
PegiPegi: 1. Data Pesanan — 2. Bayar

7. Grouping Detail Flight Information
Easy to spot and navigate if we grouping flight detail information, like flight, facilities, and fare.

8. Passenger icon and seat class description
Put the interface with icons when you select a passenger and clear description of seat class when and you choose it.

9. Indonesian Holiday and toggle fare estimate
By showing an Indonesian Holiday will be a piece of huge information for a user. And if the user wants to see a clear date, the user can turn off the fare estimate by a toggle button.