iOS • Trip Sharing
TripIt iMessage App
Interaction Design, UI/UX Design
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.
- 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
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).
What motivates a user to send a plan or a trip itinerary?
HypothesisTo 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.
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.
- 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
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.
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?
- Users share plans w/ family and significant others who tend to be non-TripIt users
- Users take screenshots of flight plan and full itinerary
- 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.
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 PlansCovers all of the essential plan types in TripIt.
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.
- PMs: Clara Park (intern) and Casey Cheung
- Devs: John Phelps, Peter Hu, Rich Shimano
- Visual Design: Kat Angeles