CASE STUDY 3:
TRAVEL ITINERARY
UTRIP    |    2017

How do we help travelers manage their travel schedule?

Utrip started as an itinerary-creation tool where users input their preferences and our algorithm would generate a custom schedule. Our challenge was to give users a bit more control and ownership over the itinerary creation process, while also retaining the features and white label customizations that our partners loved.
Utrip Product Team
  • Wil Carletti
  • Aaron Klein
  • Milena Saboya
  • Me
MY ROLE
  • Research
  • UX / UI Design
  • Usability Testing
  • Design Specs
DELIVERABLES
  • Interview Screener
  • Research Interview Script
  • Research Reports
  • Sketches
  • Prototypes
  • Design Documentation
TOOLS USED
  • Illustrator
  • Photoshop
  • Invision
  • Google Forms
  • Pen & Paper
PROCESS
  • Planning
  • Design
  • Testing
  • Design Documentation
  • Iteration
BACKGROUND
The itinerary redesign project began several months before I arrived at Utrip. The team already had conducted initial interviews, sent & analyzed surveys, ran usability tests on the old UI and designed the initial MVP, which was being built by the Engineering team. When I joined the project, I focused on the subsequent phase iterations, adding feature parity, and addressing critical pain points that arose during usability testing.
problem 1: How did this get here?

In the initial tests of the old itinerary, 65% of travelers did not understand why a specific recommendation or hotel appeared on their itinerary. This improved slightly during usability tests of the new Itinerary MVP, but there was still an opportunity to add clarity and build trust with our users.

how we addressed it
We addressed this disconnect in three ways:
Trip Planner

The most important way we addressed this was to build the Trip Planner page, which gave the user a critical exploration step before opting to generate an itinerary. This way, the user is already familiar with their top recommendations, because those are the items listed highest in the sort order.

Favorites

We highlighted favoriting functionality creating a Your Favorites section of the page, so that a user's favorite items were all in one place. We added a Favorites CTA next to the Create Itinerary button. We made the heart prominent on each Item Card, and used the same Item Card component on both the Trip Planner and Itinerary pages to keep the user experience consistent. This ensured the user could easily identify their favorites. Finally, on the itinerary page, we added heart annotations to each day tab where favorites were scheduled, so the user could easily find their favorite items.

Interstitial

We highlighted favoriting functionality creating a Your Favorites section of the page, so that a user's favorite items were all in one place. We added a Favorites CTA next to the Create Itinerary button. We made the heart prominent on each Item Card, and used the same Item Card component on both the Trip Planner and Itinerary pages to keep the user experience consistent. This ensured the user could easily identify their favorites. Finally, on the itinerary page, we added heart annotations to each day tab where favorites were scheduled, so the user could easily find their favorite items.

Impact
  • Increased average time on page by 56%
problem 2: image is everything

Because our research indicated photos are an important factor in the trip inspiration & planning process, the Trip Planner was designed to be image-driven. In order to maintain consistent elements across the entire platform, it made sense that we would similarly adapt the itinerary item cards as a photo-forward design.

how we addressed it

We reused the Item Card design from new Trip Planner, and added Category Icon Badges and a remove function. Not only did this help us maintain a consistent user experience, it also saved engineering time.

Design Thinking Process
research
  • By the time I joined the project, the initial research phase had been complete (they had processed 300 surveys and conducted 10 traveler interviews)
  • Market Analysis looking at other itinerary generators and scheduling software for functionality & interaction ideas
plan & design
  • Information Architecture. This wasn't created for the initial build, but later as we built the Trip Inspiration and Trip Planner pages, the Interaction Flow h helped us map out the functionality that would need to be include on each page
  • Design Whiteboarding helped us collaborate & brainstorm initial layout ideas
  • Sketches and Iterations
  • Lo, Medium & High Fidelity Mockups
  • Prototypes
  • Testing: 12 Usability Studies conducted (these were conducted in conjunction with usability tests for the Trip Planner and Trip Inspiration projects)
  • Design Documentation (1 wrote 5 Google Doc specs for V1 and then created 5 Zeplin specs for subsequent iterations)
next steps
  • New round of usability tests
  • More robust Add Activity functionality
  • Itinerary PDF generation
my favorite part of this project
Drag & Drop

Because giving the user control over their itinerary was paramount, we knew drag and drop functionality was essential. To help the user optimize their schedule, we added context indicators to the drop zones—indicating whether this was a good or bad timeslot in which to move/add the item.

We could hardly contain our grins when in the very first usability test after the drag & drop feature was added, the unprompted user, moved an item from a morning to an afternoon slot and seemed satisfied with the day's schedule.