Building a sophisticated search tool for travel sites can be a daunting task. No matter if you plan on hitting Vegas for the weekend or want to go on a three month adventure, looking up your flight and accommodations starts from the site’s homepage search boxes. With thousands of destinations, hundreds of dates and countless flights to track, keeping a layout simple and intuitive is quite an accomplishment.

Source: aytm.com

It doesn’t matter what kind of travelling experience you’re looking for, nowadays you can easily research destinations and find an affordable trip once you’ve jumped on the Internet. Be it a travel search website or app, in a few seconds you can search, compare and book the best option.

Source: aytm.com

Expedia, Orbitz and Travelocity

These three travel sites seem to all use the same coding and backend technology to power their searches, so much so that finding discrepancies in their offerings would be surprising. Build with JavaScript and sourced components from travel-assets.com, each has the same interface for their Origin and Destination fields, providing a dropdown once the user begins typing in their location. Once these are selected, the Departing and Returning fields provide dropdown calendars for ease of selection. To wrap up the user’s criteria, Rooms, Adults (18+) and Children (0-17) all have traditional, simple text dropdowns.

Read also: 5 Travel Brands Using Virtual Reality Right

Booking.com

After visiting the above three sites, the booking.com search provides an updated look and feel. Also built using JavaScript, the site users OGP, or Open Graph Protocol to create the search fields. Within the “Destination, property name or address” field, there is some creative placeholder text. When text is entered, the OGP protocol comes to life, displaying colorful photos of destinations and useful information. Similarly, the date fields drop down with a calendar and the Room/Guests fields are traditional dropdowns; however, the site gives an option to select if you are traveling for work. It also does not provide buttons for travel packages, but rather uses a different search page found on the navigation menu for those options.

What is interesting, the website design has not been seriously changed since 2007, the present design creates sense of urgency and encourages booking at lowest prices by:

  • Urgency-provoking red text and anchoring struck-through prices
  • Magnitude of the ratings
  • Cherry-picked reviews on the main page
Source: ro-che.info

If you’d like to know more about UX at Booking.com, check the public Boooking.Design with stories from designers and researchers.

Kayak.com

The most creative of these options is the kayak.com website. Also utilizing Javascript and OGP, the Kayak site employs an uncluttered design with minimal dropdowns, storing the number of travelers and the cabin class in a single dropdown field. An added benefit of this site is the responsiveness. While the booking.com website struggles with its responsive design, Kayak’s site thrives and fully adapts to all screen sizes and resolutions. Merging the navigation structure of booking.com’s searches with the buttons on Orbitz, Expedia and Travelocity, once a tab is selected over the search for Hotels, Flights, Cars or Packages, it also changes where the user is across the top, horizontal navigation menu.

If you’re interested in building a dynamic and modern search for your website, be it for travel, subpages or documentation, contact Ciklum today!

Read also:

Case Study: Virtual Reality App For An Eye-Opening Travel Experience