What is the project
TripActions mobile App plays a key role when people are frequently checking status and scheduling ahead on the day of travel. My Trips matters for travelers to action on-the-go. They are using it for checking the real-time status for the trip itinerary. The previous Android version was implemented years ago with outdated UX and UI. This project aims to redesign the My Trip experience to ensure consistent experience across iOS and Android.
Team
1 Product Manager
2 Android Engineer
1 iOS Engineer
Role
Problem definition,
UI design exploration, design specs
and drive weekly design sync meeting
Tool
Sketch, Zeplin, Principle
Deliverables
Hi-Fi Mocks, SPEC,
Project summary report
Challenge
This project serves as the foundational stage for extending features in My Trip experience. Our focus is:
How might we reorganize the info architecture and improve UI to provide more scalable, consistent experience across iOS and Android?
Problems need to be solved
In current My Trips experience, Trips, Itinerary, and, Itinerary Segment Detail are displayed with progressive disclosure. Based on my audit of the elements on the three screens, here are the problems need to be solved:
Proposal for consistent itinerary segments display and interaction design
First of all, in order to clarify the information structure, I defined the purposes of Trip Itinerary and Segment Details respectively: Trip Itinerary presents the overview of the entire trip for users to quickly digest; Segment Details help users to drill down with additional information.
Proposal for reorganizing actions
Since 86% of users use iOS, I checked the iOS usage data of all the clickable actions on the Trip Itinerary and Segment Details. Less than 1% of users use Trip Name Edit and Merge Trips. Besides, the business needs of promoting Share Itinerary and adding Airport Map are expected to be considered. So I prioritized all the actions and promoted top CTAs upfront.
Proposals for restructuring the Segment Details card
There are four types of segments: Flight, Hotel, Car Rental, and Rail. Different elements are applied and structured inconsistently across iOS and Android. After auditing the elements and defining rules for structuring them, the module is updated in our new design system to ensure consistency and scalability, even when it extends to future types such as Event, Black Car, Conference, etc.
