Redesigning Travelocity’s responsive website — a UX case study
How might we help travelers trust in Travelocity?
Overview
Let’s talk about our relationship with travel sites. Specifically, let’s talk about Travelocity. Chances are you’ve heard of Travelocity, it’s a big name in travel. But when was the last time you booked a trip on Travelocity?
In an online world where travel research meets e-commerce, users are suspicious of hidden fees and upsells, preferring to make their bookings on airline sites over travel sites. Nonetheless, an endless inventory of the best prices on flights and the familiarity of the standard travel site keeps users coming back to Travelocity.
Travelers just want one more thing from their travel sites — trust.
In our redesign of Travelocity’s responsive website, my team and I explored ways in which Travelocity can build a relationship of trust with its travelers.
Problem Space
Travelocity is an online travel agency primarily used for finding and planning flights. My team was tasked with finding any usability issues with the Travelocity responsive website as well as incorporating a feature that would appeal to more socially conscientious travelers. Travelocity has an existing CSR (Corporate Social Responsibility) program called Travel for Good, which rewards travelers who volunteer on their trips, so our team also aimed to find opportunities to highlight Travel for Good and increase awareness about it amongst Travelocity users.
Scope and Constraints
I worked with a team of four UX designers, including myself, and we had just under two weeks to complete this project.
Team and Role
My team and I are all students in General Assembly’s UX Design Immersive course. We didn’t have strictly defined roles, but I was directly involved in the following: the screener survey, user interviews, usability tests, research synthesis, wireframing, and prototyping.
Who is the User?
Travelers are students and professionals across a variety of industries. They use multiple travel sites to research flight options and generally choose based on the lowest price. These travelers do not like being upsold and want a transparent, trustworthy booking process.
User Research
In the first steps of our design process, user research, we explored these questions:
Who is the Travelocity traveler?
Who are Travelocity’s socially conscientious travelers?
The next sections will explain in more detail our research methods, which include a screener survey, user interviews, and research synthesis.
Screener Survey and User Interviews
Our screener survey helped us find travelers from the closest to the farthest branches of our networks and our networks’ networks. We interviewed 5 people who
- use travel sites, including Travelocity.com and comparators
- participate in charitable activities (e.g. volunteering, donations, etc.)
These user interviews gave us the data points from which we uncovered trends in travelers’ beliefs, behaviors, and attitudes in regard to their travel experiences, which will be further explored in the next section below.
The next section about research synthesis will go further into the trends that surfaced in our travelers’ stories and experiences with Travelocity, but here are just a few notable data points from our user interviews:
“I don’t trust 3rd-party* travel sites.”
“Too much text… Way too much text.” — about the Travelocity homepage
“I would go out of my way to support a company with CSR (Corporate Responsibility).”
*A note on the term ‘3rd-party travel sites’: This term was used by travelers to describe any travel search site that was not an airline site. This includes aggregator sites that send users to other travel sites. This is the way in which ‘3rd-party travel sites’ will be used in this case study.
Research Synthesis
In this stage, we focused on building a persona that best represented the Travelocity traveler. By organizing quotes and observations about our interviewees’ individual travel expectations and behaviors, we discovered trends in how our travelers think about and interact with travel sites. The two biggest trends we found, which may seem a bit contradictory at first, were as follows:
- Travelers use several 3rd-party travel sites like Travelocity to find their preferred flights, usually based on which flight has the lowest price
- Travelers have a general distrust of 3rd-party travel sites and book their flights on airline websites instead
On the surface, our travelers are using these travel sites a lot, but they don’t trust them enough to book on them. How could they use these sites so much while simultaneously feeling so much distrust in them?
With a deeper look into the data, however, it was actually simple to reconcile these insights.
We knew that travelers’ main use of 3rd-party travel sites was for research, and we also learned that they would have several of these sites open on their desktop at once when comparing prices for flights.
Eventually, we teased out an underlying explanation for how travelers were operating with this level of distrust in 3rd-party travel sites: they were compensating for their distrust by putting in extra research labor and time — checking site after site, checking said sites after a few days just to check if flight prices had changed, ever insecure that they were getting the best deal for their travel.
Our discoveries led us to the formation of our persona, Rick, who represents the Travelocity primary user:
We used the same data points and research insights to map out Rick’s journey of searching and booking a flight. From looking at the steps in his journey and his associated emotional ups and downs, we found opportunities to improve his travel search experience. We were also able to find where best we could introduce and highlight Travel for Good at different points in this journey.
These insights and opportunities led naturally to the formation of our guiding problem statement:
People go to Travelocity to research the best travel prices. Rick is not sure he is getting all the information needed for a confident checkout. How might we build his trust during the research and checkout process?
Using this problem statement as a compass for the rest of our process, we moved onto exploring those possible avenues for building Rick’s and travelers’ trust in Travelocity.
Ideate, Validate (and Invalidate), Rinse & Repeat
With a robust idea of who we’re solving for, Rick the traveler, and our problem statement, we started the ideation process with a relatively broad space to explore solutions. My team conducted two rounds of a design studio, sketching out different screen designs for the Travelocity home and flight search results pages.
These design studios produced solutions that combined what we considered our best ideas, but we weren’t too quick to get attached to those solutions before conducting usability testing on the existing Travelocity website.
In user-testing the existing site, we found that travelers, on the whole, could successfully make their way from the homepage to the booking page, with a few points of confusion and suspicion along the way.
First, let’s look at the homepage
On the homepage, travelers
- filled out the search form quickly, and found it familiar and “pretty standard” with respect to their experience with travel sites
- either reacted with confusion to the content below the fold or ignored it completely
Here’s a look at our redesigned homepage:
This homepage was the one we used in both the mid-fidelity prototype usability testing as well as the high-fidelity prototype usability testing. In both rounds of testing, users found this homepage “familiar,” “straightforward and easy to navigate.” Several travelers also found features such as the 24-hour cancellation policy and the mention of corporate social responsibility reassuring.
Next, we looked at the flight results page
On the flight results page, we found in our initial usability tests that travelers had difficulty finding the information they cared about the most, which were
- time of flight
- overall price
- airline
so we enlarged that information and made it the most prominent on each flight card. To give more space to the main content of flight information, we moved the sort and filter section to the top, where it would still be easily located by users.
The top-most search fields were something that travelers used very often and easily, so we maintained that feature and its placement in the redesign.
Finally, there was confusion on the existing site when it came to selecting the departing flights and returning flights on separate pages, so we combined the departing and returning flight information to be shown on one single page for roundtrip flights.
In our next usability tests, the travelers found their flight comparison information easily and showed little trouble choosing a flight that fit their preferences, quickly moving onto the next page, the trip review page.
Trip review page
Going from existing to mid-fidelity
In our first round of usability tests, we found that travelers were not confused by the review your trip page and quickly scanned their flight information, easily moving to the bottom of the page to find the continue button. We did find that they were not interested in booking a car, so in the mid-fidelity prototype, we changed the car rental section into a closed drop-down.
Another change we made in the mid-fidelity prototype was adding the Travel for Good volunteer section. This section was intended to inform travelers of their options to save money by volunteering on their trips. However, in our mid-fidelity usability tests, we found that travelers thought this was an ad section, it had too much information, and they found their volunteer options confusing.
Going from mid-fidelity to high-fidelity
In the next iteration, we made the Travel for Good section look more native, moving away from an ad-like design, and we added options to learn more while reducing the total amount of text. While the mid-fidelity iteration called the wrong kind of attention to Travel for Good, this high-fidelity iteration received almost zero attention whatsoever. Travelers scanned past it completely, and while it didn’t hinder their goal of booking a trip, it failed to make the intended impact of highlighting Travelocity’s CSR program.
One more change between the mid-fidelity prototype and the high-fidelity prototype was changing the confusing wording of “Select your fare” to “Upgrade your Seat” as well as collapsing the section into a drop-down, as travelers understood this section as a seat upgrade section and ultimately did not show interest in upgrading their seat.
Moving forward
In our final round of usability tests, we also found that users expected to see baggage information and options on their trip review page, so we intend to address that in the next iteration.
Mobile Breakpoint
Let’s address the elephant in the room: mobile. We do everything on our phones now, right?
We found in our research that users do browse flights and trips on their phones, but they only book them on desktop. Taking this into consideration, we tailored the mobile version of the website to focus on the research experience. Below are three proposed screens for a mobile site design.
The experience is very similar to the desktop experience, except the initial screen shows the menu for types of trips along with the trust-building customer support and CSR features. The search form is the same, just adapted to fit the whole screen of a mobile phone. On the flight results screen, the select button is replaced by a heart, so that when travelers are searching for trips on their phone, they can save any trips they’d like to come back to or potentially book later on the desktop site.
Where do we go from here?
Looking at the results of our tests, we did manage to help solve several problems for Rick and our travelers. The general attitudes toward the redesigned website, as well as the speed and ease with which test participants had in completing their flight booking task, conveyed a sense of trust greater than the air of suspicion that loomed over the very first usability tests on the existing website.
Click through the high-fidelity prototype here
However, as seen in our most recent usability tests, the flight booking process is not yet perfect, as travelers were still left in the dark about their baggage at the trip review page. And, most importantly, they still have very little awareness of Travel for Good. Seeing as our attempts to highlight Travel for Good have not yet been successful, we would do more research on Travelocity’s socially conscientious travelers and explore how to better bring this program to their attention.
Finally, we’d test the designs for the mobile version of the sites, exploring further where the mobile opportunities are for improving the Travelocity traveler’s experience.
