A fluent motion experience

Airport transfer

Airport transfer

Trip.com is the biggest online travel agency in Asia with 400 million+ users.

Typical user
Chinese Values service
Scenario
Reserve pickup service after ordering a flight ticket
Goal
Improve experience through motion
My role
Project owner Product design Motion design
Team
UI designer PM Frontend Dev
Timeline
2 months Jul '24 - Aug '24

How this project started

A design-initiated project

After a conversation with the Design Director about product improvements, I identified lagging animations as an opportunity and initiated the project

A design-initiated project

The status quo

Home page to List

The status quo — Home page to list

Framing challenges into opportunities

Glitching, errors and bugs

Glitching, errors and experience gaps — 1

Experiences gaps

Glitching, errors and experience gaps — 2

Researched leading apps to inspire creative ideas

Comparative analysis and brainstorming

Comparative analysis and brainstorming

Sorting ideas & setting goals

Sorting ideas & setting goals

Based on current UX & how noticeable our solution brings

Setting priorities

Experiences that we can improve

Setting priorities

Pushing UX-focused projects with no direct business profit is tough.

Without development resources, I had to secure support from PMs.

Present, present, present!

Pitched our concepts to Design and Product Directors to secure buy-in. By aligning with their vision for a fast and smooth UX, our project was successfully integrated into the upcoming launch.

Present, present, present!

Break down the project,
and ship it piece by piece

Break down the project and ship piece by piece — 1
Break down the project and ship piece by piece — 2
Break down the project and ship piece by piece — 3

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

Loading skeleton

Others — Loading skeleton — 2

Moving forward

Motion guidelines

Moving forward — 1

Apply to other product lines

Moving forward — 2

Challenges and learnings

Challenges and learnings