Tucan Travel Tourpages
Tucan Travel
Tourpages, Itinerary & Booking
UX & UI Design
Objective
At Tucan Travel, the tour pages were the face of every trip we sold. They were where potential travellers made up their minds, and the page the sales team had open whenever an enquiry or booking came in. The old pages weren’t doing that job well, so management and operations made redesigning them the marketing team’s top priority.
Working alongside one other designer, I set out to create a single tour page template that fixed those problems. It needed to be clearer for travellers, more useful for sales, and something the whole team could be proud to put the company’s name to.
Project Goals
The new template needed to:
-
Fix the pain points colleagues and customers had with the old pages
-
Make key trip information easy to find and understand
-
Flex to fit every tour in the range, however different
-
Support the sales team when handling enquiries and bookings
-
Be clear enough for our offshore developers to build exactly as intended
The Approach
Before designing anything, we asked colleagues across the business what wasn’t working and what would help them, and more importantly the customer. The six of us in marketing shared the competitor research, while the design itself sat with me and the other designer.
Because one template had to work for every tour, we tested it against every scenario we could think of, talking through how people would actually move through the page. Each stage then went through rounds of feedback with sales, operations and finally the CEO. With that many heads on it, someone always spotted something the rest of us had missed.
Analysing the Old Tour Pages
Before I try to improve anything, I like to pull apart what’s already there. So I went through the live tour page one tab at a time and made notes on anything that got in the way of someone falling for a trip and booking it.
-
Overview: this had the route map and a “What’s Included” section, and both of them turned up again on other tabs. There was no need to show them twice.
-
Dossier: this repeated “What’s Included” and the whole itinerary word for word. It was really meant for printing, so a downloadable PDF made much more sense. It also had general travel advice on packing, money, visas, insurance and health. That was useful, but it was the same for most tours and wasn’t going to sell anyone a trip, so it could easily live in its own PDF or page.
-
Images: this was just a grid of photos. A carousel next to the copy would let people flick through the trip while still reading about it.
-
Map: a whole tab for a map that was already on the Overview. Honestly, it didn’t need to be there.
-
Itinerary: one massive block of text and a lot of scrolling. Giving each day its own dropdown would save loads of space and let people open just the days they cared about, so it felt a lot less overwhelming.
-
Prices: the very last of six tabs. If you were ready to book, you had to click through everything else before you even saw a date or a price.
I also checked the colours and type against the brand guidelines. The typeface, Museo Sans Rounded, was spot on, but the colours were off-brand and didn’t really work together, so as a team we decided to give them a refresh.
The Concept Process
I started with rough sketches, then moved into Photoshop to develop the ideas and iron out problems as they came up. Even at this stage, I was thinking about how things would behave on click, hover and scroll, because that’s what decides whether a layout actually works.
Early concepts kept the tabs but cut out the repetition we’d found. Another idea fixed a tour overview in a right-hand column, with the title, route, duration and price, sitting above the tour’s Trustpilot reviews. Keeping reviews visible at all times felt important, as they’re what reassures people a tour is worth booking.
After a few rounds, we combined the strongest ideas from both of us into one direction. Management suggested extra features from competitor sites. Some made it in, but having just stripped out so much clutter, I was wary of adding it back, so we weighed each one against the journey.
The biggest change was dropping the tabs altogether. Six tabs became one page, with the duplicated content removed, the map living in one place, and the Dossier replaced by a “Download dossier PDF” button. Long sections collapse to save space, and a sticky menu jumps straight to each section, so there’s no more flicking back and forth.
Functionality
With the structure agreed, I built an interactive prototype in Adobe XD to show exactly how people would move through the page.
The section menu stays fixed at the top, so any part of the tour is one click away, replacing the old tabs. The main navy nav bar drops in once you scroll past the hero. XD couldn’t animate that, so I walked the developers through it at hand-off.
The old Overview and Map tabs now sit together in “About this tour”, with the key details next to a single route map. The right-hand column stays in view so the price and reviews are always there. The CEO wanted a “Why Choose Tucan Travel” section added, which risked pushing the reviews off screen. My solution was to make it collapsible with a small arrow, so people could hide it and give the reviews more room.
Itinerary
The old itinerary was one long block of text, so each day now sits in its own bar, labelled with the day and location, that expands when clicked. The arrow rotates to show whether it’s open or closed, and “Expand All” and “Collapse All” let people read the whole trip at once or keep it tidy. People only open what they want to read, which keeps them in control.
Select Dates
On the old pages, prices sat in the very last tab, so anyone ready to book had to click through everything else to find them. In the new design, dates and prices are a single click away from anywhere on the page, and the “from” price is always visible in the right-hand column.
This was still the hardest section to get right, because the number of dates varied so much from tour to tour. The question became what had to stay visible and what could sit behind a dropdown. Start and end dates, availability, price and any discounts stay on show on both desktop and mobile. The extras, like excursion costs and how much you’re saving, sit in each date’s dropdown. Switching between years scrolls the list back up, and the highlight slides across to show which year you’re viewing.
Gallery and Recommended Tours
The old Images tab was just a grid of photos, separate from everything else. The new gallery sits within the page as a slider of photos and videos, so people can browse the places they’ll visit by dragging or using the arrows, without leaving the tour.
The same slider powers “You may also like” at the bottom of the page. It shows similar or longer tours with the route, number of days, previous price and a button straight to the trip, so anyone not quite sold has somewhere to go next instead of leaving.
Prototyping the Journey
Every arrow here is a route someone could take through the page, and all of it was planned and built in Adobe XD. It turned out to be a great tool for this, because we could actually see the prototype working rather than just imagining it. Watching the interactions play out on screen helped us spot problems as a team long before anything was built.
It also saved a huge amount of time at hand-off. Our developers were based in Bangladesh, and the language barrier could sometimes slow things down. Being able to show them exactly how each part should work made everything so much easier than explaining it in writing.
