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
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?
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
User’s only research the best deals, never booking via travelocity.com.
The site lacks trust and confidence.
There is an overwhelming amount of cramped information.
Why does the homepage endlessly scroll?!
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.
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.
Mid-Fidelity Usability Test Results
The simplified homepage proved to boost the confidence and trust users were looking for within Travelocity’s site.
High-Fidelity Usability Test Results
Prototype
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.