TripIt App UX Improvements

TripIt is a travel planner that organizes travel plans in one place. Simply forward all your hotel, flight and restaurant confirmation emails from business or personal email to TripIt.

This case study introduces 1) the interaction design of the new map feature that helps TripIt App user quickly find the location of their destinations and plan the transportation; 2) the motion design of different types of micro interactions, transition and loading animation.


PROJECT DURATION

May 2017 - Jul 2017


PROJECT TYPE

Internship
New feature design


PRODUCT TAG

Travel management
Motion design
Mobile App

My Role


I worked at TripIt from Concur in the summer 2017, and I was in charge of the motion design of the newly designed Android app and the Map View feature design. For the motion design, I explored opportunities to improve usability and experience by leveraging UI motions, and created motion design specs. For the new feature design, I worked on interaction design, wireframes, flows, prototypes, and also user research.

Map Feature Interaction Design

TripIt would like to gain better understanding of what users would like to see and what they would like to do by map viewing of their plans.

USER STORIES

"As a TripIt user have an upcoming trip, I want to see where my plans are and the connection among them (both time and spatial), so that I can plan my schedule ahead of time accordingly."

"As a TripIt user in an active trip, I want to see how far I need to travel to my next plan based on my current plan or location, so that I can determine when to leave and my options for getting there."

"As a TripIt user in an active trip, I want to visually see where my plans are and know the address of my plan in case of I am familiar with this area, so that I can know my plans better."

THE CHALLENGES

Macro:

--- What is the relationship between trip summary screen and map view screen?
--- What is the best way for users to navigate to a specific plan in map view screen?
--- What features users would like to use in map view screen?


Micro:

--- Where to put map view button in trip summary screen?
--- How could users know the interactions in map view screen at the first sight they landing on this screen?
--- Should we display time/distance between adjacent plans?
--- Which kinds of information should be displayed for a plan in map view screen?
--- Should we enable users go to plan detail page through map view screen?
--- How to display plans with same address?

INTERACTION EXPLORATIONS

Design 1

Split view with half map and half plan list


Split view with half screen of map and half screen of plan list. It works well for users to navigate through plans to see where a specific plan is in the map. However, it makes the map view screen complicate and the plan list is a repeat of trip summary screen.

Design 2

Full map view with bottom card carousal


Full map view with a screen full of map and a bottom card show current plan. Users could swipe the bottom card to view other plans in the map. In this way, it creates a clean map view screen, and users could click the bottom plan card to go to plan detail screen. However, it might causes frustration when users try to navigate to a specific plan through lots of plan cards.

NEXT STEP

User Research

---- How the user sees the connection between trip summary screen and map view screen?
---- Will the user know the interactions in map view screen (split view) at the first sight of this screen?
---- Will the user know how to go back to trip summary screen in map view screen (both split view and full map view)?
---- How does the user feel the plan list in map view screen (split view), does it cause confusion?
---- How hard the user feels to navigate to a specific plan in map view screen (both split view and full map view)
---- Does the user feel go to plan detail page helpful in map view screen (full map view), does it cause confusion?

Motion Design

In Many Ways, Motion Design Helps Improve Usability

Motion design constructs spatial mental model to help understand the hierarchal relationship between pages.

Motion design builds continuity by sharing same elements in different interfaces in a task flow.

With the changeable and flexible UI elements, motion enables rich content in limited space.

As a product with over 12 million users, we hope to incorporate Material Design to level up the experience on Android platform.


I was in charge of exploring different kinds of motion design to improve usability and create a more cohesive and delightful app experience. The mainly motions I did include screen transition design, loader and spinner design, and bottom navigation transition design.

1 SCREEN TRANSITION

The Problem: Current transition doesn't connect one screen to another in a meaningful way


Trip list screen, trip summary screen, and plan detail screen are interfaces users use most in the app. There is hierarchal relationship between them.
Currently, the motion for screen transition is next screen slide in from right hand place when clicking a card in current screen. However, this kind of motion didn’t provide any clue about the connection between these screens, and actually it is necessary for building mental model of the hierarchal connection for new users.

The Design: Visualize the connections by sharing elements


Feedbacks: The cell has been clicked stays in screen to reassure users that next screen is triggered by this cell.

Hierarchy: The cell has been clicked become the header of next screen helps new users to understand the hierarchy connection between current screen and next screen.

Delightful User experience: The motion also brings delightful experience for users.

2 ALTERNATE FLIGHT LOADER

The Goal


TripIt would like to redesign the Alternate Flight feature, it causes about 10 seconds to retrieving flight results for users. So TripIt decides to add a loader to Reassure users that TripIt is retrieving flight results and decrease bounce rate by using delightful illustration and motion

3 OTHER MOTION DESIGNS

Bottom Navigation Transition

The goal of this project was to apply material design between TripIt newly designed interfaces, to explore ways of the motion when navigating through bottom navigation, and to spec the motion out to engineers.

Pull to Refresh Spinner

The goal of this project was to create a “pull to refresh” spinner for our newly designed interfaces. It tells users what content the app is loading, and will let user know the content has been updated when loading finished.

Other Works