Redesigning a Responsive Website
User Journey Map
Find any usability issues on the Travelocity responsive website and also incorporate a CSR feature to appeal to more social conscientious consumers.
RESEARCH & SYNTHESIS
Used screener survey to find 5 users who use travelocity and or similar third party travel sites when booking trips
Found behavioral patterns and pain points of users
Created a persona with behaviors, goals, needs, and pain points to drive design studios
Created a journey map to further highlight the pain points that our product can address
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?
TESTING EXISTING SITE
Before beginning any ideation and redesigns we wanted to test the current site with primary users. We wanted to focus on three different stages of the site process;
1. Homepage and the flight search box
2. Flight results page
3. Flight review page
All 5 users successfully got to the flight results page but faced a few hurdles along the way.
Users felt that there was an overwhelming amount of information on each page.
Users were confused by the flight return page
Users felt the was a lack of price transparency
Users had trust issues with the site simply down to it's UI
IDEATION & ITERATION
Design Studio 1
We sketched and shared our ideas quickly for The Home Screen
Create, Deliberate, Document and Repeat
Design Studio 2
We did the same process as Design Studio one but for the search result page
Wireframes and user flows
We created wireframes and user flows which led to usability testing
Mid and Hi-Fidelity prototypes designed and prototyped in Figma
Usability Testing (2 Rounds)
HI-FIDELITY USER TEST RESULTS
Users successfully searched for, found, and booked a flight.
Users did not see the revised Travel for Good CSR section.
Users expected to see baggage information at checkout.
HI-FIDELITY PROTOTYPE WALKTHROUGH
During our initial user interviews we discovered users would do quick flight searches on their mobile but when it came to in depth searching and booking it was done on a desktop. With this in mind we have replaced the select button in the flight results page with a heart. This way the user can save the search results on mobile and find them later on the desktop to complete the search and booking process.
Flight Search Screen
Flight Result Screen
Providing a striped back larger and cleaner UI design while providing full transparency on financial information provided users with a less stressful and trustworthy experience
Further research on travelocity's socially engaged users needs to be explored as the CSR information on the new designs did not pull much attraction or engagement.
Trust was the main factor that stopped users from completing their checkout on the original site. There are many attributes where the user lost the trust but many of these hurdles were overcome by simply cleaning up the UI.