Bringing itinerary data to the product card
A new way of showing what an experience looks like before the user decides to explore it
Timeline
6 months
incl. Design, BE and FE
Focuses on
3 categories
Default, Hop on hop off and cruises
Role
Product designer
THE PROBLEM STATEMENT
Why is it required?
When we launched structured itineraries on the product detail page, adoption varied significantly by category. Hop-on-hop-off tours and cruises saw meaningful engagement — the format matched what users needed. Day trip itineraries had less than 4% adoption, despite having the exact same entry point.
The entry point was the same. The content was different. So we started asking: is it the entry point that's broken, or is it the moment?
Obvious issues with current approach
Day trip itinerary adoption was under 4% despite a visible entry point on the PDP
The itinerary section was buried — users had to click through to the PDP, then scroll to find it
Photography on the product card was decorative — the card wasn't communicating what the experience actually involved
The entry point assumed user intent that wasn't there yet
This shifted our question from "how do we make the CTA better?" to "how do we move the content earlier in the journey?"
THE RESEARCH PHASE
How did we arrive at what we want to do?
INTERNAL PROCESS
How would this be built?
We wanted to move fast without building something throwaway. The data already existed — we just needed a new presentation layer.
We made a few deliberate decisions about scope:
Experiment first — the feature runs behind an A/B test, English-only, on a curated set of experiences where itinerary storytelling is most relevant. This lets us validate before scaling.
Curated data — rather than pulling from the product API (which would require backend changes), we seeded a static JSON file with handpicked experiences. Fast to ship, easy to control.
Two surfaces, same data — the same stop data powers both the card carousel and a new section inside the Highlights Modal. Different contexts, different reading modes.
Built by design, not just designed — the entire FE implementation was done in the component library by the product designer using Claude Code. No separate FE handoff for the core components.
SOLUTION
What does our end feature look like?
Surface 1: The product card
The media area of the product card is replaced by a visual carousel of itinerary stops. Each slide shows a full-bleed image and the stop name. A + button opens the full detail overlay.
The carousel is always visible — no tap required to see that the experience has multiple stops.
A few things we thought hard about:
Auto-swipe hint — after 2 seconds of inactivity, the carousel peeks at the next slide and returns. It fires once and never repeats. This communicates "there's more" through motion, without being intrusive.
CTA attention animation — the
+button plays a gentle pulse after the hint completes. Three quiet cycles, then it rests. If the user has already swiped, it never plays.Each stop's card takes on the dominant color of its image — extracted from the photo and used as the card background. Every stop feels distinct without manual art direction. Colors are automatically checked for WCAG AA contrast before being applied.
Surface 2: Inside the Highlights Modal
The existing Highlights Modal gains a new "Visual Story" section. Stop cards are laid out in a horizontal swiper with image, stop name, and description. Users who've opened the modal are ready to read — this is a different mode from the browse teaser.
Desktop vs mobile: different layouts, not just different sizes
Opening the detail overlay on desktop shows a two-column layout: experience context on the left (title, description, key highlights), scrollable stop stack on the right. Users can evaluate everything at once.
On mobile, one stop at a time in a full-width swiper. As you move between stops, the backdrop tints to match the current stop's dominant color — the whole overlay shifts atmosphere with the image.
WALK AHEAD
What more can we do with itineraries?
More categories
We plan to expand the capabilities of itineraries for lot of different categories in the future. The following is quick set of ideas from top of my head:
Guided tours
Compared to other itineraries which mostly happen in the outdoor, we can use the same capabilities for showing main attractions of indoor tours, eg. Louvre museum guided tour. We can highlight the main attractions of a museum using itineraries.
Zoos, aquariums or any ticketed commodity for that matter:
We can use the cruises' itinerary ability to convey to the user where they can collect their tickets and main attraction they should not miss in a more structured manner. Additional, these attractions can be mapped out once we figure out more nuanced maps.
Food tours, pub crawls and hiking trails:
All of these categories can use the itinerary setup to convey to the user the important things.
For hop on hop off
This part is already in works at the moment, we can use the existing hop on hop off itineraries to do the following:
Show what's the nearest stop from your current location
If I want to go to a particular attraction, what's the stop I should get down at or what's the ideal route from my current location
Using location permissions, we can show the user what's the next stop
These features work the best once the user has purchased the tickets and help in providing a seamless post-purchase experience to the user.
LEARNINGS
How did the launch go for us?
Itinerary adoption
~8%
for day trips
Impact on CVR
Flat
Day trip itineraries showed minimal impact, with flat-ish results.
Hop-on hop-off tours and cruises saw higher adoption rates, suggesting itineraries are more valuable for these experiences.
We're planning to reassess day trip adoption when we implement and experiment with a custom landing page for this category. This approach will help us better understand and optimise the impact of itineraries on day trips.
