Trip.com Group · ChatGPT app
From Chat
to Checkout
Travel planning is moving into ChatGPT. How does Trip.com earn the tap, and the booking, inside an interface it doesn't own?
TTrip.comFind me flights from Shanghai to Tokyo on May 10
Opened Trip.com
Shanghai to Tokyo
$160
China Eastern AirlinesSpring Airlines JapanShanghai to Tokyo
$160
China Eastern AirlinesShanghai to Tokyo
$189China Eastern AirlinesShanghai to Tokyo
$254
Japan AirlinesShanghai to Tokyo
$289Japan AirlinesI found 5 nonstop flights from Shanghai to Tokyo for Monday, May 10, 2027, on Trip.com.
Overview
- The problem
- Flight search worked inside ChatGPT, but the engineering MVP made it difficult to compare results and continue to booking.
- My responsibility
- Sole Flights designer at Trip.com. I owned the card system and booking handoff with PM, engineering and BI. v2.0 shipped in July 2026.
- The key decision
- Keep comparison inside the conversation and complete booking on Trip.com, within the host’s SDK and data constraints.
- What followed
- The system was reused by Trains and Hotels. The channel’s best reported week reached 290 orders; this is a channel result, not an isolated design lift.
Cross-functional influence
I worked with the Flights PM, engineers and BI to connect the experience inside ChatGPT to the booking journey on Trip.com. The scope extended beyond my own delivery: Flights went first, and the Train and Hotel teams built their ChatGPT cards on my system. A single designer’s work became a shared foundation for three businesses.
Channel results and adoption
orders in a single week by mid-September, the channel's best week so far, with 55 on its best day.
more flight searches a day the week v2.0 launched, and 3× more people tapping through to Trip.com.
the blueprint. Flights went first; the Train and Hotel teams built their ChatGPT cards on my system.
Source: the project PRD and weekly funnel reports through mid-September 2026. These are observed channel results; changes in traffic and product releases also affect them.
In a conversation, the card is the whole storefront. Every pixel has to earn the tap.
1 Why we started
Searches were happening; bookings weren't. The first version proved travellers would ask ChatGPT for flights, and then showed them a form.
Planning moved into the chat
Travellers were already asking ChatGPT where to go and how to get there. If Trip.com wasn't the answer in that moment, someone else would be.
Ten searches, few taps
People searched about ten times each. The problem was never traffic. It was getting them to jump to Trip.com.
Cards built without a designer
The MVP read like a form: labels repeated on every card, a button on each, no total of what was found, no way to see more, and nothing at all when a search came back empty.
More apps were coming
Trains and Hotels would answer in the same conversations. Without one system, three teams would ship three looks.
- 1Depart, Return, Cabin Class, Price: labels on every card, so every card reads like a form.
- 2A count of cards, not of results: nothing says there are more, nowhere to see them.
- 3A button on every card, all the same, and nothing on the card to decide between them.
- 4No baggage, no airline: the two things that make two prices different.
Version 1, as engineering shipped it, rebuilt here from the live app.
Four levers, one funnel
With the PM I framed the work as four levers, one for each stage between a question in ChatGPT and an order on Trip.com, so every release had a number it was meant to move.
Searches
Make sure people know they can search Trip.com flights in ChatGPT.
How ChatGPT describes the tool, so it picks Trip.com
Taps
Turn ten searches into one jump to Trip.com.
The card system, fare details, less text from the model
Orders
Keep the hand-off consistent and easy after the jump.
The right Trip.com page for each platform, your selected flight
Data
See what happens on both sides of the jump.
Tracking every tap and order, A/B tests
Designing in someone else's house
ChatGPT owns the window, the type, the scroll and the voice around the card. Trip.com owns one rectangle. So I designed for the constraints first:
The host's rules
The Apps SDK and its guidelines set the frame: inline cards in a carousel, one primary action and one secondary, and the brand in accents, not in chrome.
The model talks too
ChatGPT writes its own answer around the card. Every word it repeats stands between the traveller and the button.
Three platforms, three exits
The same card leaves ChatGPT's app for Trip.com's app or mobile site, and ChatGPT on the web for Trip.com's website, each landing on a different page.
Mixed answers
Flights, trains and hotels can come back in one conversation, even in one list, so cards from three businesses have to sit together.
2 How I approached it
Audit the MVP, and the field
I took v1 apart with the PM, studied the SDK's components and guidelines, and looked at how travel products answer in chat. Mindtrip, which builds its own interface, was inspiration only.
Scope by intent
Two jobs cover most of what people ask: an exact search (Shanghai to Singapore, May 15, one way or round trip) and a flexible one (cheap flights in May). Each needed its own answer.
One skeleton for three businesses
A card in three tiers (what it is, the journey, the action) that a flight, a train or a hotel can fill. A horizontal list keeps a mixed answer short.
Design every state, then the exits
Results, round trips, too many results, none at all, light and dark, desktop and phone. Then where each tap lands on Trip.com, and the events that tell us it did.
The system
Four components, one anatomy. The flight card carries a tag, the route and the price per traveller, then the journey (airline, baggage, times, duration and stops), then its action. This is the card as it ships today.
Shanghai to Tokyo
$498Japan AirlinesJapan Airlines- 1
Tag
The cabin class, for now. Curated labels like Cheapest or Best weren't available in phase 1, so the row holds its place until they are.
- 2
Route and price
The question answered first: where, when, how much per traveller.
- 3
Airline and baggage
What decides between two prices, at a glance, in two icons.
- 4
The journey
Times, airports and terminals, duration and stops, with +1 when it lands the next day.
- 5
One way out
View on Trip.com, to the right page for each platform. Fare details is designed as the second action, for the next phase.
The Train and Hotel teams built on the same three tiers, changing only the middle. Trains followed Flights into ChatGPT three days after v2.0.
Try it
The cards as they ship in ChatGPT today, on the web and on a phone, in its light and its dark. Ask for a one-way trip, a round trip, or a route Trip.com can’t fly, and take an exit to see where it lands.
TTrip.comFind me flights from Shanghai to Tokyo on May 10
As it ships today. Tap View on Trip.com, or ask for a route with no flights.
3 Versions
A release every few weeks, each aimed at one lever. The last is still rolling out. Step through them.
Ship what the data can carry
The design system, built for Flights and followed by Trains and Hotels, with the total of results and View all on Trip.com, a tighter layout, baggage on the card and an empty state that hands off to Trip.com. Phase 1 had no curated labels like Cheapest or Best yet, so the tag row holds the cabin class and keeps its place. Fare details was held for the next phase, so the card has one action: View on Trip.com.
TTrip.comRound trip from Shanghai to Tokyo, May 10 to 14
Opened Trip.com
Shanghai to Tokyo
$386China Eastern AirlinesChina Eastern AirlinesShanghai to Tokyo
$498Japan AirlinesJapan AirlinesShanghai to Tokyo
$455China Eastern AirlinesSpring Airlines JapanChina Eastern AirlinesSpring Airlines JapanShanghai to Tokyo
$532
Cathay PacificCathay PacificI found 10 round trips from Shanghai to Tokyo for May 10 to 14, 2027, on Trip.com.
4 Drafts that didn't ship
Every detail that shipped beat an alternative. These are six drafts from the Figma file, rebuilt, each with the reason it lost: the research, the host's rules, or the draft simply failing on a phone. Flip any of them to see what shipped instead.
Trip.com
Shanghai to Tokyo
$168China Eastern Airlines
Shanghai to Tokyo
$254China Eastern Airlines
Draft · Early June
A summary box above the cards
The first layout opened with a grey box restating the search, then narrower cards with the airline set small under the times.
Why it didn’t ship
- 1
A box inside the answer, repeating what the traveller had just typed. The research was clear: no nested containers, use the space.
From the research - 2
Under the times, the airline read like a footnote. It moved up to its own row, beside the baggage.
What shipped
The card carries its own summary. The search line lives on in the no-results card, as “Your search”, the one place repeating it helps.
5 What fought back
Most of the hard parts weren't pixels. They were the edges of a product shared with a model, a host and three platforms.
Round trips, one leg at a time
The agent searched the outbound, waited for a fare to be chosen, then searched the return: two lists and a lot of chat for one trip. I put both legs on one card with one price, so a round trip is one decision.
No results is not a dead end
ChatGPT happily asks for routes we can't sell directly, like Shanghai to Oxford. Instead of nothing, the card shows the traveller's search and one button: Search on Trip.com. Thousands of these show every week.
The model talks over the card
ChatGPT summarises the results it has just shown, often at length, between the card and the next message. Cutting that repeated text became a goal of its own. The card should do the selling.
Two sides that don't share an ID
A tap in ChatGPT starts a fresh visit on Trip.com, so a tap and an order couldn't be joined, and about a quarter of the people shown a list sent no card event at all. We tagged every tap, carried the tag onto Trip.com's mobile site, and set up A/B tests that split travellers by OpenAI's anonymous ID.
TTrip.comRound trip from Shanghai to Tokyo, May 10 to 14
Opened Trip.com
Shanghai to Tokyo
$386China Eastern AirlinesChina Eastern AirlinesShanghai to Tokyo
$498Japan AirlinesJapan AirlinesShanghai to Tokyo
$455China Eastern AirlinesSpring Airlines JapanChina Eastern AirlinesSpring Airlines JapanShanghai to Tokyo
$532Cathay PacificCathay PacificTTrip.comFlights from Shanghai to Oxford on August 2
Opened Trip.com
No flight results found
You can continue this search on Trip.com
Oxford has no airport with scheduled flights, so fly into London and take the train or coach to Oxford.
TTrip.comFind me flights from Shanghai to Tokyo on May 10
Opening Trip.com
How an order finds its way back to the chat
- ChatGPTA card is showncounted as seen
- ChatGPTThe traveller taps View on Trip.comthe tap carries a tag
- Trip.comThey land on the app, the mobile site or the websitethe tag comes along
- Trip.comThey paythe order is credited to the chat
A/B tests split travellers by OpenAI’s anonymous user ID, since there is no Trip.com account inside the chat to split on.
6 Results
A launch that made the channel worth measuring, then a summer of releases that made it sell.
Orders a week
From v2.0's first full week to mid-September.Orders credited to ChatGPT, week by week. The dashed line connects known totals; full weekly totals for 21 Aug–3 Sep were unavailable in the source excerpts.
The week v2.0 launched
The day before launch, and a week later.The best week so far
11–17 September, against the week before.Of everyone who saw a card on their phone, 1 in 13 tapped it, up from 1 in 16 the week before.
Two thirds of these travellers are on their phone. And once they reach Trip.com's payment page, nearly 9 in 10 go on to pay.
What's next
What I'd tell the next designer
Design the system before the screen. One anatomy that three businesses could share is what let the work grow past a single card.
When you don't own the interface, own the decision. Our rectangle had to carry exactly what decides a flight, and nothing that didn't.
Measure the jump, not the view. A good part of this project was tracking. The funnel only got better once we could see it.
Nam Dang
Senior Product Designer