A fluent motion experience
Airport transfer
Trip.com is the biggest online travel agency in Asia with 400 million+ users.
Typical user
20-35 years Chinese Values service
Scenario
Reserve pickup service after ordered a flight ticket
Goal
Improve experience through motion
Other contributor
UI designer PM Frontend Dev
My role
Project owner UX design Motion design
Project timeline
Dec 23 - Apr 24
How this project started
A design initiated project
It began with a conversation with the Design Director, who asked about potential improvements in our product line. I mentioned that the animations were lagging, and he agreed, allowing me to explore this area and initiate the project.
The status quo
Home page to List
Check Out to Order
Challenges
Next step: getting ideas for improvement
Experiences that we can improve
· Transitions are abrupt, lacking fluidity.
· Instant page cuts lack dynamic growing motion.
· Excessive loading disrupts user flow.
· Modules need better feedback and guidance.
· Emotional design tailored to specific scenarios
Glitching, errors and bugs
Let’s push our engineers to fix that
· Home Page Loading not smooth, causing stutter.
· Entering the list page causes flickering.
· Modules load inconsistently, causing instability.
· Laggy list view transitions.
· Reservation triggers two load events.
· An unnecessary white screen loads after payment.
Researched leading apps to inspire creative ideas
Comparative analysis and brainstorming
Non-intrusive loading
List to order transition
Open trunk transition
List page grow animation
Curve guidelines
Homepage guidance
Pressed state
Our ideas
Transition; Natural loading; Motion as feedback
Sorting ideas & set goals
Page transition
List to order transition
Open trunk transition
Page motion
Reveal
Load
Curve
List page reveal animation
Curve guidelines
Non-intrusive loading
Module motion
Pressed state
Homepage guidance
Enhance immersion
Smoother
More intuitive
Reduce anxiety
Improve feedback
Based on current UX & how noticeable our solution brings
Setting priorities
Experiences that we can improve
Pushing UX-focused projects with no direct business profit is tough. Without development resources, I had to secure support from PMs.
Present, present, present!
Convey our concepts and foremost objectives to the Design Director and Product Director to gain their endorsement and partnership. With a bit of luck, we managed to align with Product Director's goal of delivering fast and smooth user experiences, and they are ready to integrate our solutions into the upcoming launch.
Separate the project, ship them one by one Track each piece with a table
Glitching, errors and bugs
Experiences that we can improve
Final delivery
List page grow motion
This goal is to improve intuitiveness by loading the page step-by-step, helping users understand its structure and refocusing their attention on marketing slots.
Before
After
Replace interruptive loading with soft loading
Before
After
Others
Bouncy feedback
Order loading
Moving forward
Motion guidelines
Apply to other product lines
Airport transfer
Group tour
Tickets
Hotels
Flights