A UX case study: Improving Google Flights
Prologue
For someone like me who travels from time to time for work, meeting friends, school, etc., online flight booking is a boon. If the title didn’t give it away yet, I primarily use Google Flights for digging through the best flying options available. The biggest factors being — price comparison & analytics for flights from various airlines, simplistic interface, reliability/accuracy, and brand trust with Google.
Though already design-optimized as the feature might seem, I, a quintessential daring designer, dived deep into a flyer’s frame of mind and pondered on ways to improve its user experience. In particular, I was fascinated with the flight search and tracking experience.
I’m excited to share the ideas through this article, read on…
Food for thought — the design principles behind Google Flights
As Google Flights is built using Google’s “Material” design system, it swears by certain rules. You can check out Material here.
Bold, graphic, intentional
“Material Design is guided by print design methods — typography, grids, space, scale, color, and imagery — to create hierarchy, meaning, and focus that immerse viewers in the experience.”
This is well met in the flights feature. Few examples — Material’s iconic elevation in cards, the use of meaningful hierarchy via 2 primary colors — black and blue, Roboto font with the search results grid very similar to Gmail, and an engaging illustration for the home screen.
Motion provides meaning
“Motion focuses attention and maintains continuity through subtle feedback and coherent transitions. As elements appear on screen, they transform and reorganize the environment with interactions generating new transformations.”
Few examples — Increase of shadow on hovering through clickable elements, responsive world map with dynamic elements on resizing, consistent fade-up motion when the screen updates/changes.
My Approach for improvement ( What & Why? → How? → Test → Iterate)
Here is a summary of my approach:
- (Research) What problems does a potential flight booker face? and Why does it matter?
- — Understanding user behavior through UX research methods — Structured Survey, User Interviewing, Summarizing inputs from users and constructing Proto-Personas to refine the needs.
2. (Ideation & Solving the problem) How might we address the issues faced?
- — Understanding the use-cases better by summing up key problems, creating a hypothesis, making well-informed changes, and running a design experiment.
3. (Testing) Which ways can we use to test our solutions?
- — Validating the hypothesis through A/B testing, qualitative feedback.
4. (Iteration) How can we Iterate and refine our design?
- — Reflecting on learnings, addressing new user feedback (and back to testing…)
1. Research
What problems does a flight booker face? and Why does it matter?
I started off by using the google flights web app and trying to critique the experience as a user. However, beyond my thoughts, I wanted to get an opinion from different people who use the application. For a start, I set up a simple survey with about 10 questions to understand common user behavior on this subject. My initial analysis and usage provided a base for the survey’s questions. This survey aimed to direct me towards things a user is most interested in and accordingly plan improvements. I sought to find out what factors strongly influence the decision while searching flights and sort of reverse-engineer from there to better the search experience.
The survey takers included about ~15 people spanning across — old, young, male, female, tech-savvy, tech-is-scary, very frequent flyers, occasional travelers, and moderate users which spanned across 4 different countries.
… Data from the survey and findings follow…
First things first, the picture below is telling of the modern technology age.
It came as no surprise to me that 100% of survey takers booked their flight tickets online, and most tend to use a website that compares various flights. It is also understood that when simply googling about a flight, the web browser will push google flights at the top which becomes the starting point for — a user’s quest for optimal travel.
More importantly, I asked 3 questions to understand the priority of factors users look for when booking a flight. A whopping ~71% of the users glanced at the flight price as their main deciding factor.
This was followed by a 50% majority for the secondary factor as Departure/Arrival time. In hindsight, I feel that I should have clubbed this with the total duration as few people mixed up these options and chose either.
Finally, the number of stops became the winner as the third thing users look at.
Now, look at some common user behavior —
This hinted to me that there is room for improvement in the information architecture, hierarchy, prioritizing/de-prioritizing things users want to look at, and making the cheapest flights easier to find.
And evidently, a by-product of other survey answers, people are flexible when choosing a flight in terms of the airline or exact date of flying as long as it is the best deal.
The insights above gave me enough data points to start converging on specific problems. I moved on to conduct a couple of quick user interviews where I monitored users navigating through the Google Flights interface. We focused on structured tasks like finding the cheapest flight in a week’s window and checking refundability. I also observed the eye scanning pattern of the interviewee and asked them to think aloud which gave me qualitative feedback on the current design.
In the end, I summarized all the learnings from both the research methods and used them as a pivot for creating personas — entities I’ll be solving the problem for.
I came up with these 2 —
Key Findings
Based on the users’ responses and interview feedback, I converged on 2 high-level problems.
- Confusing information, too many (seldom used?) options
- Inconvenience for the majority of the users — who look at money as the deciding factor (followed by Arrival/Departure time).
Details:
- Prominently users look at prices and times to decide if the flight is suitable, as expected from the survey. Moreover, it is hard to look at both these factors as they mandate the user to look to and fro on the screen. “Proximity helps users understand and organize information faster and more efficiently”.
- It takes time to parse through all the flight information, and users didn’t read all of it, which implied there was a possibility to reduce noise in this design.
- There seemed to deciding factors like refundability that were missing at a glance. Though baggage allowance was not so important as I initially thought.
- Low priority factors — Airline company and comfort weren’t as important (because most flights offer similar services)
- Filtering on airlines is a big manual effort with checkboxes and no search.
- I discovered a couple of interesting ambiguities during the interviews — like the meaning of +1 in flight departure/arrival time was unconvincing.
- I observed the layouts of several flight booking websites, the order in which my interviewees scanned the information, and the text-heaviness, which led to the conclusion — generally, users scan in a Z-based fashion and skip most of the information shown for the flights when scanning.
- “Best departing flights” recommended by google weren’t useful for any users I interviewed. In fact, users were keen to find flights based on specific preferences right from the start, and thus this section had a low impact.
- Finally, a critical ask was to be able to track the cheapest flight in a time window (say few days) as most users were flexible with travel unless urgent.
2. How might be improve the experience? (Improving the design)
I only discuss the web version of Google Flights, because the most useful information is already given preference in the mobile version. It felt reasonable that most of the redesign I propose wouldn’t be suitable or necessary for the mobile version.
Solving problem #1 (Reducing noise, optimizing flight-scanning) — I took steps to improve readability, refactor some UI components, add new factors in flight information, and attempted to remove ambiguity.
- Updated the default selection from Round Trip -> One Way and bolded it— This bothered people who started searching for a flight only to realize the Round Trip option was selected by default. I was inspired by this psychology from Zeigarnik Effect. Fixing this reduces frustration and improves the chances of task completion (successfully searching a flight here).
- Updated search filters: I kept only the most frequent use-cases and moved the rest of them into the ‘more’ dropdown. This drastically reduces cognitive load, as instead of looking at 7–8 items now we’re looking at fewer items with high chances of being selected. A new addition to this was the crucial— Refundability filter. (Reason: Simplification)
- To make it obvious that the data is sorted I added the field name to the ‘Sort By’ indicator and an icon at the top of the sorted column. This reduces the time spent in identifying the sorting column.
- Improved search results layout — I felt that the different sections (Search bar, Auxiliary Information like Covid, Actual flight results) could be overwhelming. I tackled this by removing ‘Best Flights’ by google, updating the search results with the ‘Available Flights’ header and auxiliary information with ‘Useful Information’ header, increasing section spacing to improve hierarchy — and viola, the layout is suddenly easier to read and provides a sense of navigation to the user.
- Fixed ambiguous elements I changed the ‘+1’ superscript in flight time to → +1 day and added ‘From’, ‘To’ labels in the flight search bar. More minor changes included replacing the icon in the ‘From’ section with the more recognizable location icon and increasing icon size to make them discernable.
- Added a search bar for every checkbox list with >7 items like airline and connecting airports filters to improve the filtering experience.
Solving problem #2 — Shifting the focus to top flight deciding factors, and making it easier for users to navigate accordingly
- Redesigned the search results grid pulling the flight price, time, duration, and the number of stops closer which makes it way easier to scan through them. Also, I grouped the flight time and duration as users mostly see both if they check either. This included getting rid of the connecting airports which can be seen in the flight details if the user wishes to, and moving the airlines to the right because of low significance when picking a flight.
- Introduced a track flight button on the search results page. Currently, this button is only visible on the flight details page once you click on a flight. I figured people were way too concerned with it that it required upfront visibility. — Reason: People often want to eye down on particular flights, especially when planning with other people they are traveling with.
- To solve the problem of tracking desirable flights in a time window for a particular A->B journey, I introduced a new feature called ‘track flight prices across selected dates’ which helps you view all flights between these departure dates and track their prices. It would include all the existing functionalities like all the filters. On the implementation level It would work similar to the search, but taking a union of the search results for all the dates. Since this would have an increased latency for the results, it makes sense to display other useful information while the results are loading. Perhaps it’s also a good place for advertisements.
- Another minor pain point I found was that the ‘green’ coloring in the flight price was misleading. It represented the cheapest flights but was misunderstood as flights with dropped prices. After retrospection, this was indeed colloquial thinking so I went ahead and made the color marking more evident with icons for improving a11y. In the redesign, all flight prices now are either green (discounted), black (usual rates), or red(more expensive than the usual rate) to give a glance at the flight price trend to the user. This would make it easier to know if it’s a good idea to purchase that flight ticket at that moment or not which is a decision-making problem frugal users face.
- Added deal-maker refundability banner in flight results to weed out unsuitable flights for users concerned with it.
3. All done, but wait! does it actually work? — What do people say?! (A/B Testing, Quantitative Analysis)
Process
Users share thoughts on the improvements and their likeliness to use them through open-ended interviews. I talked to my previous interviewees and a few friends who volunteered. These were their thoughts after showing the new design. For this study, I didn’t have a working prototype, so I resorted to having them compare before and after snapshots of the search experience and speak their mind.
Feedback
Positive Feedback
- “The feature to track flights spanning across dates is spot on!”
- “Cleaning up the filters makes a lot of sense since I never happened to use most of them”
- “Looking for the cheapest flights is definitely easier now, but it will take time for me to adjust since I’ve been used to the old interface”
- “Neater than before! I’m always on the lookout for flights that offer refunds because of my unexpected schedule. This makes it easier now!”
Areas of improvement
Insight #1 — when looking for flights with multiple stops, people sought layover time as crucial, especially in international flights. Potential solution: Add an option for that under ‘times’ filter which is the 1st place one might look for.
Insight #2—I got to know that refundability may often be partial, conditional, or only be offered by some of the booking portals. Potential solution: In this case, I think it’s useful to have a tooltip of some sorts on the refundability banner that displays additional information like such.
Insight #3 — While checking flight prices in the dates view, slow internet can make people impatient (noticeably when violating the 400ms threshold). This is especially true with slower cellular data. I checked this out and found that the flight prices appear rather abruptly and if taken long to load, can be missed by an unfamiliar user. Potential solution: add a transition animation to hint that the prices are loading (and distract the user?).
Check out below a simple animation I made for this transition. I stuck to Google’s brand colors and material’s rounded design. I used a transition delay to show the use-case when it takes ~2 seconds for the flight price to load.
A specialty about this animation is that it cycles 4 primary colors — which means the loader effect is noticeable to a good extent even by those who face visual impairments like Tritanopia for instance.
Insight #4 — The new “track flight prices across selected dates” feature saw low discoverability despite high desirability because the users overlooked it. This told me that the users often skipped reading the “Useful Information” section and it got disguised under that. Potential solution: Perhaps a better ingress point would be near the search bar or within the dates widget at the top-right.
While I couldn’t arrange a way to monitor the success of my design extensively due to a lack of resources and time. I jotted down some metrics which I would track in a real scenario to get a good idea of how my changes do!
- Qualitative metric — Feedback on search UX: Easy to search flights owing to better information architecture, improved visibility into price insights
- Qualitative metric — Comparison of retention ratio: Unique features like tracking price of a time window and refundability, baggage allowance cues make it a preferable choice vs. competitors.
- Quantitative metric — Time spent from the search page to navigate to the selected booking website: More structured information => Users are likely to spend less time and arrive at the desired flight choice quicker => Reduces frustration and increases chances of successful flight booking.
- Quantitative metric — # of uses of new features and Filters
- Quantitative metric — # of (decrease in) uses of ‘load more flights’ and the # of (decrease in) toggles between search page and flight details page in the same user session: These data points will help us check whether the search relevance for the user has indeed improved or not. Constant toggling to the flight details (on clicking a particular flight) and clicks on ‘load more flights’ are indicators that the user is having a rough time looking for a suitable flight.
4. Reflections and revelations from this case study
- One does not represent all the users! — A designer’s thinking likely differs from the vast majority of users. Which implies it’s critical to get to know their common behavior. What may not seem like a big issue to you might be a deal-breaker for others.
- Iterations are a must — While it is very easy to design what you think is best based on initial research, it may or may not be sufficient, especially when the sample size is limited. It takes a great deal of effort to empathize with a variety of people, and to check whether your solutions will be making an impact or not. I figured that it’s a great idea to refine your designs as much as possible in the fashion: test → feedback → make improvements.
- Research interviews can be tricky — “Customer is always correct” doesn’t necessarily hold true. As a designer, it’s a key skill to decipher users’ feelings and thought process, make meaningful notes and ask the right questions. Only then can you converge on what they actually need (vs. what they think they need).
If you made it this far, know that I’m a fan. Write to me at kunalx011@gmail.com to share your thoughts or comment on this post if you have any questions/suggestions! :)
Until then, ciao.
