As the trusted trip itinerary management app, TripIt from SAP Concur makes sharing travel plans with trusted parties as simple as sending a text through iMessage. The trip itinerary and flight plans sent through the TripIt iMessage app take full advantage of iOS 11’s capabilities to include dynamically updated information.

The Challenge

TripIt Pro users previously weren't able to share plans with the most up-to-date information, so they had to resend texts. They wanted to safely and easily share information about their trips and plans with trusted parties who aren’t TripIt users.

Previous iMessage app design for iOS 10

    My high level goals were to...
  • Provide the team with designs within a short timeframe of a few weeks (in time for the iOS 11 release)
  • Clearly explain the benefits of TripIt Pro to non-TripIt and TripIt Free users
  • Utilize the full capabilities of iOS 11 to share plans and itineraries with dynamic information

My Role

I led the design of the TripIt iMessage app for iOS 11 over the span of 3-4 weeks in July and August 2017.

I worked alongside 2 Product Managers, a User Researcher, a Visual Designer, and iOS developers.

The TripIt iMessage app launched on September 19, 2017 (the day of the iOS 11 release).


Understanding Sharing

What motivates a user to send a plan or a trip itinerary?

Hypothesis

To answer this question, I worked alongside our product manager intern to make the following assumptions for scenarios that we foresaw would be the most shared message types:

    For Flight Plans:
  • Airport Pickup: the recipient would like to be informed about the sender’s latest flight status so they would know when to pick up the sender from the airport
    For Trip Itineraries:
  • Sharing trip plans with coworkers
  • Sharing with friends and family to inform what they did on the trip

Understanding these scenarios and the users’ motivations to share their trip plans and itineraries was foundational for preparing for the following ideation phase.


Ideation

User Flow

Clarifying the user flow of sending plans and itineraries

I discussed ideas with the product manager and developers to understand what data we could pull and what information would be useful to display to senders and recipients (based on the sharing scenarios previously mentioned).

I aimed to clearly differentiate the action flow between sending an itinerary and sending a plan, since sending an itinerary would be a new feature in this version.

Design Principles

  • Allow senders to clearly preview information before sending. Users can feel cautious or hesitant about sending sensitive trip information (like confirmation numbers and prices).
  • Given the size constraints and limited screen space, show the most important pieces of information

Initial Prototype

I created a prototype in InVision to test my initial flow for sending a message and receiving a message for both a flight plan and trip itinerary.

Validation Testing

After crafting the initial design in InVision, I tested three TripIt Pro users as participants for the Sender version and three non-TripIt users for the Recipient version. Testing two different versions provided insights into the clarity of the flows for the respective roles and the usefulness of information.

    Questions to answer:
  • What information would be useful to display for a recipient? (especially dynamic info)
  • How would a user like to preview the information they’re about to send for their trip plans or itineraries?
  • How can we communicate the flight plan is receiving live updates?

Sender Version

Recipient Version

    Key Findings
  • Users share plans w/ family and significant others who tend to be non-TripIt users
  • Users take screenshots of flight plan and full itinerary

Iteration

Implemented Changes

  • Composing a Message: Instead of the former plan cards, we reused the trip itinerary layout from the app. This solution was easier to implement for developers and more easily understandable for the users to send plans or an itinerary based on their familiarity with the itinerary display in the app.
  • Compact Trip Itinerary Display: Show a preview of the itinerary in the message bubble to avoid confusion what’s content is being sent. What you see in the composition view is what the receiver will read.
  • Updated Flight Status: Notify the user that the status is updated every time the message is opened in the Compact or Expanded View by displaying the loading signal and “Updated: [Time]” in the Compact View caption

The resulting prototype I created in Framer was especially useful in communicating to developers how I wanted the user to experience accomplishing a particular task. For composing a message, adding the sticky headers containing the trip name and the “Share Trip” link button improved readability and usability for sharing the correct trip.


Final Designs

Sending and Receiving a Trip Itinerary

Instead of the former plan cards, we reused the trip itinerary layout from the app. This solution was easier to implement for developers and more easily understandable for the users to send plans or an itinerary based on their familiarity with the itinerary display in the app.

Sending and Receiving a Flight Plan

Send Other Plans

Covers all of the essential plan types in TripIt.

You can download in the iMessage App Store on your iPhone and iPad to send messages for your next trip!

The Impact

Featured in App Store

On the day we released TripIt for iOS v9.6, we were featured on the list of “Apps We Love” within the Travel Category in the iOS 11 App Store.


Thank You

  • PMs: Clara Park (intern) and Casey Cheung
  • Devs: John Phelps, Peter Hu, Rich Shimano
  • Visual Design: Kat Angeles