Overview study of OTAs search wizard pattern
When users purchase travel tickets online (flights, accommodations, activities) there’s a high chance they do so through online travel agencies (OTA), fare aggregators and metasearch engines instead of going straight to the airlines’ website or app.
Not only these platforms provide great overview of the potential dollars you can save by comparing multiple service providers at once, they also provide an efficient way to book all your needs at one go (and supposedly more savings).
With great traffic comes great accessibility.
In this article we’re looking at how several top OTAs, fare aggregators and metasearch engines (I’ll just call them OTAs for simplicity’s sake) design one of the most important areas of their website: the search bar / wizard.
Let’s go! ✈️
The first on the list is Kayak.com whose parent company is Booking Holdings and siblings includes Agoda, Priceline and Booking.com. In a bid to save some screen real estate they put the search categories on the header in line with the main navigation links. The disadvantage is the other categories such as “Hotels”, “Cars”, and so on might be missed if users are not paying much attention.
I don’t think the space saved is being used efficiently though since it just frees up some spaces below the search bar only to show a generic background image (the lanterns). I’d rather bring up more content from below the line.
There’s also a neat comparison checkbox “Compare vs. KAYAK” as a shortcut for you to compare prices with other selected OTAs.
However the result is a mess as they just throw two iframes with loaded search results side by side for the said comparison.
One thing that I like for sure is the date picker which incorporates a nice animation for the estimated prices slider. Users quickly get to see the estimated prices on particular dates as they browse.
This Hong Kong based company focuses on selling activities around Asia tourist spots and having such a simple one-field search bar is quite an irony. However, when users click on the bar, a bunch of suggestions appear.
This greatly reduces the blank canvas paralysis for users who are looking for inspirations while also providing access to power users who want to type in something in the search bar anyway.
It is quite disappointing as you scroll down past the first tab however, as they just splat together the cities like a plain text list. Adding to the mess is the absence of proper dividers between the countries.
A giant in the travel industry, Expedia main site displays a typical booking search wizard front and centre. Everything is kept at the minimum with a limited attention to aesthetics. Somehow it feels like this design is stuck in the 2000s.
“As a user, as long as it gets me to the results that I want fast, nothing else matters” — probably that’s the thinking behind the (lack of) design.
Everything looks very Bootstrapey and clunky with zero transitions or micro animations whatsoever.
This metasearch engine also owned by Expedia Group has taken a very utilitarian approach, featuring a minimalist landing page with a focus on a single search bar. Similar to Klook, but more Google-ish.
There are more than meets the eye here as the moment users type in the first alphabet they’ll be transported to a full page with auto keyword suggestions.
As soon as you confirmed the entry, the focus will automatically shift to the next field; check-in date, followed by check-out date and type of rooms. It’s a nice flow that takes the hassle of too much clicking before you even arrived at the result.
While other OTAs are typically painted blue, yellow and orange, this UK-based company is coming out strong with their pink flamingos. The main search wizard looks just like any other OTA site but what stands out is the number of categories you can choose from. They have Eurostar, Theatre, City Breaks, and even Gift Cards, among others, for users to choose from.
Strategically this is inline with the “last minute” behaviour where users who have little time to spend/shop need a lot of options laid around to make quick decision.
The Inspire Me button is fresh in particular because upon clicking it leads users to a second page where they can search the options based on another set of categories such as beach holidays, spa holidays, etc. It’s really helpful for those who are making last minute decisions.
I really dislike the way the browser is scroll-jacked when you select any field that has dropdown. It makes me dizzy just going through all the categories.
This OTA giant originated from the United States has a clean and simple design with nice color play to highlight the search wizard. A unique approach they took with their site where each main categories have their own mini site with very different layouts.
I suspect this is due to the services provided are from different companies, such as Rideways for airport transfer and CarsRentals.com for, well, car rentals. The main Booking.com site acts as the base that anchors the whole network.
One of my favourite site, Agoda has an atypical layout as far as OTA websites are concerned. It looks as if they’re trying to push a lot of content above the line, side by side with the search wizard.
They have to compromise the limited screen real estate by presenting those content in a mosaic or tile layout complete with carousel. If that’s not enough, users can also toggle between “What’s New” and “Explore” to view a different set of content on the same viewport.
It feels very top-heavy when you scroll down as the bottom part is filled mostly with text and small thumbnails.
They’re definitely generous with white space and paddings around the form fields and cards.
This Tokyo-based OTA also uses full width background image on the hero area. It is actually a clickable carousel with small title descriptions linking to the actual product information page.
The images chosen strengthens the tagline “Book a trip you’ll never forget” as they are meant to invoke good and memorable trip activities. I also like the fact that they aligned the search bar to the left to give extra space for the images to speak for themselves.
Upon clicking the country dropdown selection, users are able to view the number of activities available per location although it is not designed to perfection i.e. the line break on United Kingdom.
One thing that is lacking in here is the auto suggest feature. Users will have no idea if they would get an empty result because there is no indication at all as they typed in the search keywords.
This well funded startup was founded in Czech Republic and started humbly as skypicker.com. Naturally it looks like a startup website featuring low contrasts, clean lines and a lot of white space all around.
The first search field pre-selects users’ origin and automatically add the location for their convenience.
Something unique about this site is the Nomad feature which is still in beta. It claims to help travelers who keep changing locations to pre-plan their routes and get cheaper deals.
I must say their multi-city search feature is very well built. Users can simply add multiple cities as new row is created for the next destination. Some sites use a different engine for multi-city that requires the feature to be separated (on another page) from ‘return’ and ‘one-way’ trip search.
This is one of the sites that is quite well designed. From the icons to the treatment for the background image, the search area looks solid and visually pleasing. Note how the search button in circle is far from a typical Bootstrap-looking ones in other sites.
There are many nice little details scattered around the UI such as these cute globe icons that actually represents the respective continents.
The world’s best low-cost carrier (10 years in a row) is the poster boy of low-fare travels and is well-known for its upselling. This is obvious looking at how it utilizes the main background image to sell a route (KUL-LGK) — complete with a starting price and “Book Now” button.
They keep the search area compact but there are a lot of options crammed in together, with the unique one being a Promo Code toggle. Typically users would apply any discount code during checkout. There must be a convincing reason why they opt to put the promo code option together with search.
They’re most probably using a vendor’s API for the car rental search since the UIs, especially the date picker are quite different than the others. It’s a bit slower to load too.
There we go. Hopefully the examples above would give you an overall idea on how online travel agency websites design their hero area — the search bar / wizard section.
As a designer I’d love to see more unorthodox and interactive patterns such as embedded maps, smart planners, etc. However without any analytical data it is quite hard to justify drastic changes needed on the ‘templates’ that we have now. They are most likely derived from actual user behaviour studies.
Thank you for reading ✈️