Redesigning a Responsive Website

METHODS

Screener Survey
User Interviews
Affinity Mapping
Persona
User Journey Map
Competitor/

Comparator Analysis
Design Studio
Sketching
Wireframes
Iterative Testing
Rapid Prototyping
Usability Testing

TOOLS

Sketch
Adobe CS
Figma

TEAM

Hope Magracia
Jessica Chin
David Duhl-Coughlin

MY ROLE

UX Researcher
UX Designer
UI Designer

TIME

1.5 Weeks

OVERVIEW

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

RESEARCH & SYNTHESIS

  • User Interviews

    • Used screener survey to find 5 users who use travelocity and or similar third party travel sites when booking trips
       

  • Affinity Mapping 

    • Found behavioral patterns and pain points of users​
       

  • Persona Development​

    • Created a persona ​with behaviors, goals, needs, and pain points to drive design studios
       

  • User Journey 

    • Created a journey map to further highlight the pain points that our product can address

THE PROBLEM

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.

5/5

Users felt that there was an overwhelming amount of information on each page.

2/5

Users were confused by the flight return page

3/5

Users felt the was a lack of price transparency

4/5

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

5/5

Users successfully searched for, found, and booked a flight.

5/5

Users did not see the revised Travel for Good CSR section.

5/5

Users expected to see baggage information at checkout.

HI-FIDELITY PROTOTYPE WALKTHROUGH

MOBILE BREAKPOINT

​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.

Home Screen

Flight Search Screen

Flight Result Screen

MAIN TAKEAWAYS

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.

© 2020 by Ash Burke.