Google Flights: Flows and Patterns
By: Emily Han
Tags: Google Flights, UX Design, Task Flows, Reflection Point, Design Patterns

Google Flights is an online flight booking and search service that was launched by Google in 2011. It not only helps the user to find flights, but also hotels, activities, and vacation rentals. One thing that sets it apart is that Google Flights deals directly with flight carriers, so there is no concern regarding hidden costs, having to pay additional fees, or dealing with a third-party. The bonus? If you’re signed in to your Gmail account, Google Flights saves your trip details so you can easily access them.

Flows

When I go on Google Flights, it is a quick and straightforward process because I usually know the destination(s) I want to search for. Deciding on dates comes after, depending on prices, which I check on the date grid. Once I decide on my departing and return flights, I leave the Google Flights website and am redirected to the airlines’ official website, where I can confirm and finish booking the trip.

Google Flights task flow

Google Flights date grid, which conveniently shows up as a modal

Patterns

Google Flights has main navigations listed vertically on the lefthand side of the website: Trips, Things to do, Flights, Hotels, Vacation rentals. There is also a hamburger icon on the top left corner, which expands into a more detailed list, including additional features such as price tracking, language, currency, and country. I can quickly find where I need to go by reading the concise labels, or by simply looking at the icons.

The Google Flights search function is also user-friendly. Search bars and filters are placed in a simple and clear layout. I know right away to start from the left side and work my way toward the right side. Not only does the search bar save previous searches, it also auto-fills and suggests airports, making the search process convenient and fast.

Google Flights search bars and filters

Left: Google Flights saved previous searches; Right: Google Flights search bar auto-fill and suggestions

When I am looking for specific flights, I make full use of the filters. A modal, consisting of checklists or sliders, pops up when I click on each filter button, and all I need to do is choose what works best for me. Once an option is selected, the filter button turns from white to blue. If a selection needs to be changed, the “clear” button is easily accessible.

Lastly, let’s take a look at the result listings. The results of my search begins with the best flights — flights that are considered as best value for the traveler. Other flights are listed directly below, but clearly separated. The layout is very straightforward — main information is indicated, highlighting the time and price, while additional details, such as aircraft type and flight number, can be accessed through the dropdown. When there are many results generated, the filter function comes in handy and is easy to spot.

Google Flights is a website that I use often to check and book flights. While there are other similar websites such as Airbnb and Expedia, Google Flights’ features, tools and, most importantly, convenience attracted me.