May 2017 - Jul 2017
New feature design
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.
--- 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?
--- 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?
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.
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.
---- 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 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.
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
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.
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
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
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.
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.