UTRIP    |    2018

How do we inspire a traveler's next trip?

The trip planner & itinerary engaged users in post-booking phases of the travel lifecycle. But we needed a platform to bring personalization to travelers the the very top of the travel lifecycle—to inspire their next trip.
Utrip Product Team
  • Wil Carletti
  • Milena Saboya
  • Me
  • UX Research
  • UX / UI Design
  • Usability Testing
  • Design Specs
  • Interview Screener
  • Research Interview Script
  • Research Reports
  • Sketches
  • Prototypes
  • Design Documentation
  • Sketch
  • Photoshop
  • Invision
  • Zeplin
  • Pen & Paper
  • Post Its
  • Research
  • Planning
  • Design
  • Testing
  • Design Documentation
  • Iteration

Utrip is a white labeled B2B startup with more that 60 partners worldwide. The core Utrip partnerships have been DMOs (Destination Marketing Organizations), which rely on Utrip's trip planning and itinerary generation technology. However, in order to scale to address the needs of more enterprise partnerships, we needed to be able to accommodate partners with multiple destinations, different inventory types and top-of-funnel trip inspiration.  

problem 1: Show me!

From our user testing we learned photos are essential for travel inspiration. 73% of users wanted to see more photos in a more inspiring, visual experience. However, changing the UI to use larger photos had major implications for multiple teams.

  • Issue 1: Volume. The platform already had 300 destinations, each with hundreds of POI images that had been originally curated for a UI that used smaller images in fewere places.
  • Issue 2: Cropping. The new UI took one phote and re-purposed it in 11 different places, each with a slightly different aspect ratio. This occasionally led to unintentionally idiosyncratic, if not downright comical, cropping. We needed a solution that would scale.
how we addressed it

The Product, Engineering and Content teams strategized how to address:

  1. How to handle photos for new partners/photos being uploaded from this point forward
  2. How to handle photos for existing partners/retrofitting existing photos.

Because a single photo would be used in a variety of contexts, we figured out what an optimal original photo size & aspect ratio should be. Then we created documentation for the Content and Account Management teams to share with the partners.

To retrofit the thousands of existing images, the Content Team combed through each image and either optimizing/re-cropping the images or finding new images as necessary. While most of this was a manual process, the Engineers helped to automate some of the work by building an image optimization & cropping tool in our internal Admin CMS.

problem 2: Recommendation Engine

It's one thing to say "let's including personalized recommendations of desintations too!" It's another to enact it. One of the biggest blockers to launching the Discovery page was the fact that our recommendation engine, UtripIA, was optimized for in-Destination inventory (e.g. POI, restaurants, tours...etc). It was not built for top-of-funnel destination recommendations.

how we addressed it

We worked with our engineering and content teams to find a solution. While full incorporation into UtripIA was the ideal, a recommendation solution that utilized Elasticsearch would:

  1. Be faster to implement
  2. Be adaptable for other destination-adjacent content (e.g. cruises)
  3. Enable additional functionality, like special filters, that we had been previously unable to accommodate
  4. Our Data Scientist could focus on UtripIA optimization for other projects that were happening alongside the Destination Discovery project.
  • New partnership possibilities with airlines and cruise lines
problem 3: Faster Turnaround

Because Utrip is a small startup, we were often iterating on the internal processes along size the external product builds, to ensure that every step forward meant we could do more, faster. One consistent spot of friction in the product development process was the turn-around time for creating design specs, a Google Doc, which could be up to 40 pages long and easily became out-of-date since all spec updates had to be manually managed.

how we addressed it

A.B.I. Always be iterating. This mindset applied to everything from UI to internal processes. For this project we switched design software (from Adobe Creative Suite to Sketch), and the design documentation process (from generating 40+ page Google Documents to streamlined Zeplin files). Within a week, we were fully on-boarded. Within a month our output had doubled.

  • 95% reduced turnaround time
  • 291% increased document output
  • 167% increased engineering satisfaction
Design Thinking Process
  • Market Analysis looking at other companies in the travel space for trip inspiration
  • Surveys were conducted to understand what inspired travelers to visit specific destinations, plan trips and create wishlists
  • We screened 100+ interview candidates for interest in travel and upcoming travel plans
  • We wrote an interview script to help understand their trip planning process and what inspires them when they travel.
  • 7 users were interviewed. We alternated between interviewer and note-taker roles.
  • We relied heavily on the personas / archetypes created during the Trip Planner process to contextualize the research
plan & design
  • User Flows helped us map the site structure to reduce friction and pain points in the trip planning process
  • Information Architecture helped us map out the functionality that would need to be include on each page
  • Design Whiteboarding helped us collaborate & brainstorm initial layout ideas
  • Design Studio Charette with the entire Product Team to rapidly ideate
  • Sketches
  • 2 Paper Prototypes
  • Medium & High Fidelity Mockups created during rapid prototyping cycle
  • Testing: 4 Invision Prototypes
  • Testing: 12 Usability Studies
  • Design Documentation (We initially collaborated on 1 Google Doc spec, but then transitioned into 1 Zeplin spec with 21 sections that allowed us to improve and expedite the product build process with the Engineering Team)
next steps
  • Add page pagination and update our destination dropdown menu to accommodate more destinations (currently maxed at 16).
  • Migrate the Elasticsearch destination recommenation engine to a full UtripIA recommendation engine
  • A/B test the Destination card hover states with different ways to give context to each destination
my favorite part of this project
New Partnership Opportunities

Launching the Discovery page opened up new partnership opportunities. In addition to broadening our technology for use cases higher up in the travel lifecycle and conversion funnels, the Discovery page's use of Elasticsearch opened the door for non-destination inventory sorting. This shift allowed us to more easily include cruises in our Utrip Recommenation Engine. This opened the door for partnerships with Windstar Cruises, Uniworld and Insight Vacations.