Travelocity — Where do we begin!?

Ash Burke
Ash Burke
Nov 5 · 8 min read

Back again, just shy of the two week mark or shall we call it nine business days (not that there are non business days), we have just handed in our Unit 2 group projects.

The Beginning

Let’s go back to the lovely day of Thursday the 24th of November, our class have finished our Unit 1 solo project presentations. I had been *blessed with going second from last and for someone with an intense dislike towards public speaking, the blessing was not mine. We made it through however and aren’t we all better for it.

It is now it is time to go straight into Unit 2, no waiting around to let the knot out of my stomach anyway.

So there we were staring up at our I.A. Luke, he had all the power. There were four Groups up on the screen labelled one through four. Luke one click at a time would send a class members name diving to a group, there was no order to this, there were names flying in from left and right. It was tense.

The names were out and Group: Fantastic Four was born. The Fantastic Four consisted of myself, Hope, Jessica and Dave.

Next we had to draw our websites, naturally we sent our tallest member Dave to retrieve our site…. Out comes “TRAVELOCITY”…. huh? my dyslexic eyes playing a quick game of countdown trying to reword this group of vowels and consonants. After a quick google search I realise that we were working with Travelocity a 3rd party travel booking site.

Problem Space

Find any usability issues on the Travelocity responsive website and also to incorporate a CSR feature to appeal to more social conscientious consumers.

Process

We begun the process with an eight question screener survey to discover who travelocity’s primary users were and some quantitative data about how often they use travelocity or sites like it. Also discovering about their charitable interests and activities.

Travelocity Screener Survey

We received 77 responses and narrowed that number down to 5 that used travelocity, had a strong opinion about companies with a CSR program and of course were ok with a follow up interview.

Next in the process was to create a discussion guide for the interviews we had organized with 5 of Travelocities primary users.

The Goal of the discussion guide:

  • Understand the behaviors and pain points of people trying to use and/or navigate the Travelocity website.
  • Learn about the expectations of Travelocity’s more socially conscientious consumers.

Fantastic Four broke up into two’s while commencing these interviews which I found to be a huge help. One would be in the interview direction role and the other member on notes.

Individually we turned our notes into post-its to bring to our affinity mapping session.

Affinity Map — Travelocity

As always, post affinity map we create our groupings and ‘I’ statements

Complete Affinity Map in Full view — Travelocity

These statements helped us create our Travelocity Primary user Persona Rick.

Travelocity — Persona

Here we gain the insights to Travelocity's primary users, finding out their goals, needs, pain points and behaviours.

Bringing all this information into a journey map we can see what pain points and opportunities are most needed to be taken on.

Rick’s Flight Booking Journey Map — Travelocity

As we learned from our users and highlighted in our persona, they search through many different travel site to make sure they’re getting the best price. There is a clear lack of trust on the UI of these sites and the trust lies with the airline sites themselves where most complete their checkout. Users explained that a lot of that trust in the airline was down to being able to quickly solve and travel issues.

Here lies the point to focus Ricks main problem and ‘How might we’ help resolve it?

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?


We decided to address this problem through out the three steps Rick would take while booking a flight via Travelocity

Rick’s Booking Steps on Travelocity

Homepage

Lets see what the users said upon testing the live site as it is today.

Scroll through Travelocity’s Original Homepage

“Too much text… way too much”

“I would never scroll all the way down here”

“What the hell is all this?”

Not the greatest of feedback on this; There is an overwhelming amount of text and users would not even go to the effort of going through it all.

To address this issue on the home page Fantastic 4 commenced a Design studio.

Fantastic 4 — Design Studio — Travelocity

Problem Statement for Design Studio — Homepage
How might we help Rick build trust for Travelocity through the home page?


First round we individually did as many redesigns as we could in 5 minutes

My 5 Minute Homepage Redesign Concepts

We then took one minute to explain each of our designs before going back to the sketch board to create your own best idea which you have taken from everyone’s inputs.

My final design of the Homepage after seeing everyones ideas — Travelocity

Now as a group we make the group final design that we test out first in low-fi and then bringing it into a mid-fi.

Final Homepage Design — Travelocity

As you can see the homepage was truly stripped back, cleaned up and implemented with the trusting policies that travelocity has to offer.

After one round of Lo-Fi testing with no hurdles we brought it into mid-fi. We decided we were going to up our fantastic 4 game and give Figma a go, a program we had yet to use. Good luck to us all.

We managed to the hands of it, created a mid-fi, tested it, few changes and into the Hi-fidelity

Results are in and we were happy with our feedback that we moved onto the flight search page.

Same process through through the various Design Studio stage. Here was our outcome:

Flight Comparison page

Moved into low-fi testing, through mid-fi, a few changes and here how our final hi-fidelity compares to the original site.

This page I am particularly proud of the changes as I took on the figma design role of this page. Our design allowed users see clearly the information they seeked out for while also gaining a better UI trust. Users went through the new page with ease also having no issues dealing with the new filter bar which was moved to the top.

Flight Review Page & CSR

One of Rick’s final stages to his flight booking process is the Flight review page. In this page Rick will review the flight he has just selected and be able to make a few extra add ons, including Travelocity’s Travel For Good CSR program.

Upon our research we found that Companies with good CSR will have a strong pull on weather people will book their travels with them. However Travelocity does offer a CSR program but no one knows where it is or how or access it. We had the same issues as the users. We spent hours searching through google and the Travelocity site to be greeted with many dead ends. Eventually we discovered that you can receive a code to give you 10% off your trip you join one of their volunteer options on your trip. With this hard earned discovery we knew we had to make it easier for users to find it and offer its valuable reward. As previously shown we displayed the logo and further info on the home page but new that the review page was a prime opportunity and easy way for users to engage with the program.

Along with the CSR implications to the review page, there was a lot of clean up to be done. It was a crazy page of text and unknown information. See our Mid-Fi design here against the original page.

The Car menu was turned into a drop down but the “select your fare” caused confusion, there was still too much information and the CSR program was completely missed. Changes need to be made.

“Select your fare” was collapsed into a drop down as changed to “upgrade your seat”. The Travel For Good options were picked up but not enough, so there are next steps to be made here. Some users did see it and want to learn more.

Desktop click through

Desktop Redesign Clickthrough

Mobile

It’s a responsive website we were asked to engage with but as our users told us they do majority of their booking and travel engagements on a desktop, that was our main focus.

We did discover that some users used their phone for quick searches, so that was our lead and focus of design.

Keeping the recognizable clean, clear design that our users appreciated in our desktop redesign but removed the select button while replacing it with a heart. The heart gives the user the opportunity to save a flight option that they may like to book or relook at when on their desktop.

There are next steps still to be made on this project that I hope to continue out after my time at General Assembly.

Next Steps — Travelocity responsive website

Until then and until my next my next hand in…. stay tuned.

Ash

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade