Frame 1.png

travelocity.com

redesign | responsive website | CSR

Booking your trip with trust and confidence

Methods

Topic Map

Screener Survey

User Interviews

Affinity Mapping

Persona Development

Journey Mapping

Design Studio

Sketching

Wireframing

Usability Testing

Prototyping

Tools

Figma

Team

Ash Burke

Hope Magracia

David Duhl-Coughlin

Role

UX Researcher

UX Designer

UI Designer

affinity map timelapse.gif

Research + Synthesis

User Interviews: Used a screener survey to find 5 users by focusing on their experience using Travelocity’s website, as well as a strong positive feeling towards companies that are socially responsible.

Affinity Mapping: Found the common insights and trends between users from the information found in the interviews.

Persona Development: Created a persona with behaviors, goals, needs and pain points based on the insights found to ensure we stay focused on the primary user.

Journey Mapping: Created a journey map to further flesh out the pain points and help us focus on a specific pain area.

Persona

Rick Marketing Analyst NY/LA

 
 

Rick needs trust! He feels that travel sites are overwhelming! He wants to find the best price while supporting companies CSR. He visits multiple sites for the best deals.

 

“I want to know I am getting the best deal.”

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?

homepage gif.gif

Current Travelocity.com Usability Test

We wanted to get an understanding of how users currently use, navigate and feel about Travelocity’s current site.

Scenario 1

You are traveling to San Francisco for a work conference on November 10th and returning to New York on the 13th and need to book your flight.

Task 1

Use Travelocity to get to and from San Francisco. You have $300 to do so.

Scenario 2

You are going on vacation to Dublin, Ireland for a week in February, you need to book your flight.

Task 2

Use Travelocity to plan your trip to Ireland for the best deal

Insights from the Usability Test

Frame 6.png

User’s only research the best deals, never booking via travelocity.com.

Frame 5.png

The site lacks trust and confidence.

Frame 4.png

There is an overwhelming amount of cramped information.

Frame 3.png

Why does the homepage endlessly scroll?!

Frame 7.png

I believe in Corporate Social Responsibility but I don’t know what Travel for Good is.

Ideation + Iteration

Design Studio

To get an understanding of our thoughts on the design and layout, we quickly sketched and brainstormed our ideas for the homepage and flight results page.

Create-Discuss-Document-Repeat

 

Lo-fideilty Prototype + Usability Testing

With our rough solutions designed, we moved on to our lo-fidelity paper prototypes and ran one round of usability testing with 5 users to test if our designs gave users the trust and transparency they are looking for.

 
 

Mid-fidelity Prototype + Usability Testing

With the results from our 1st round of usability tests, we created our mid-fideltiy prototype- eliminating the clutter, reducing the amount of text shown, and adding features users liked from competitor travel sites. With these designed, we held another round of usability testing with 5 users, to see if our changes fixed the issues found in the first round of testing.

 
 
 

Wireframes + Usability Testing

Adding color to our mid-fidelity wireframes and adding a few more changes, we moved onto prototyping the wire frames in Figma and conducted another round of usability testing with 5 users.. We wanted to ensure the redesign was trustworthy, transparent and simple to use.

Frame 15.png

Design Studio

We went through multiple different versions of what the homepage and search result page should look like to best build trust and transparency.

Solutions / Mid-Fi Wireframes

Once our lo-fidelity paper prototypes proved to be successful, we moved onto implementing our designs to mid-fidelity wireframes to get a better understanding from users if these solutions were simple and solved the problem.

 Homepage
Simplified and condensed the current homepage.
Added a calendar feature showing which dates have the lowest and highest price.

Search Page
Simplified to show both arrival and departure flights.

Filters
Top of the page for easy access
Details and Baggage
Easier to read, fully transparent

Checkout Page
The Travel For Good options can be found on the top to increase visibility. The car rental has become a drop down to reduce the clutter and the trip summary is static so the price is always shown.

Usability Testing

We conducted two rounds of usability testing with our mid-fidelity wireframes and high-fidelity prototype with five users to make sure our solutions were giving users confidence, trust and transparency.

 
Letter - 1.png
 

Mid-Fidelity Usability Test Results

The simplified homepage proved to boost the confidence and trust users were looking for within Travelocity’s site.

 
uability test - mid fi.png
 

 High-Fidelity Usability Test Results

 
uability test - hi fi.png
 

Prototype

 
Travelocity Prototype ONE LOOP.gif

Mobile Breakpoint

Travelocity.com is a responsive site, so we wanted to make sure we designed the mobile breakpoints for the new designs.

Final Thoughts

Through this project we learned that users value trust and ease the most. Users don’t typically trust 3rd party sites, they would research and book their trips via the primary company’s site instead. Our solutions to Travelocity.com’s site create a more straight forward interface to increase trust and confidence. We understand that we can’t change every users mind, the few that would rather to use their preferred sites are harder to convince, but the fact that each of them mentioned how much easier the redesign was, gives us hope that it would convert them to be a Travelocity user.

Previous
Previous

open.studio

Next
Next

National Geographic Expeditions