Turing Browsers into Bookers

Everyone wants to feel inspired when booking a cruise holiday...

Giving the itinerary page a refresh for Marella cruises helped increase conversion by 4.5%.

My Role: Researcher, UX Designer

Duration: 1 week

Completed: March 2024

Tools: Axure

The Problem

Users struggle to feel inspired with Marella’s cruise itineraries because the current design is bland, hard to scan, and lacks meaningful content. There is currently no information for 'at sea' days, which makes the itinerary feel incomplete. Customers find it difficult to get an understanding of the full cruise experience.

The Challenge

To show more information upfront for customers, reduce the amount of clicks it takes to find information and improve the UI. This was an optimisation A/B test, which meant all the designs had to use components and content that was pre-existing on the page.

Deliverables

As this was an A/B test, there were not many deliverables.

UX research (articles about similar problems, competitor/comparator analysis)
Greyscale wireframes

Outcomes

Project completed within projected timeframe
Greyscale wireframes finalised
Working with the UI designer to produce high fidelity mockups
Working with developer to ensure A/B component matched designs
Future iterations planned

Discover & Define

The initial step for this project was a usability review of the current component on the Marella itinerary page.

The review revealed some bleak findings. On initial entry to the page, all of the itinerary accordions are closed, meaning the customer is unaware of what's even behind the first day of their cruise. One click. If a customer then wants to look at the images of each destination, they have to click on the first image displayed. Two clicks. A modal then opens, and they'll have to click again to open the image gallery. Three clicks...just to look at some imagery. I sensed that Indiana Jones had an easier time finding the Lost Ark of the Covenant than users do finding information within this itinerary.

Above: Opening the image gallery takes three clicks. It probably feels like a less arduous task to find those socks that went missing 3 months ago.

Another key finding related to the copy. The cards are difficult to scan due to the amount of copy and, as highlighted by the cruise personas, important information is not being surfaced. One example is the suitability of excursions, especially important for older customers or those with accessibility needs. Currently, users must click into 'More details' for individual excursions to find out whether it's appropriate for them, which adds unnecessary friction.

Looking at direct competitors (such as Royal Caribbean, Virgin Voyages, P&O and Norwegian Cruises) and comparators (such as Get Your Guide, G Adventures and Intrepid Travel) helped understand how they show information, the hierarchy and how the itineraries are laid out. I also carried out some in-depth UX research to find out best practice for these kinds of page layouts.

Develop & Deliver

One recurring design pattern that stood out during researching was the use of bento boxes. This modular layout would help present the dense information in a more digestible format. This became the basis for the new itinerary design.

The challenge I faced was figuring out how to present the itinerary content in bite-sized chunks, while working within the constraints of only having existing card content available. At a high level, I proposed the following structural updates:

Surface the destination as the primary header for the accordion
Use the bento box layout to display key information, such as 'time in port'
Enable the image gallery to open in the accordion’s default view, rather than hiding it behind multiple modals
Show the most popular excursions per port, clearly showing the 'suitability' of each excursion, with a 'show all' action
Introduce a default 'at sea' card with consistent content. This would be a challenge, as it needed to work across all four Marella ships

Using this framework, I moved into sketching and wireframing. The eventual idea was that when a customer proceeded to the itinerary page, the first accordion would open by default. This would give them an immediate view of the rich content and give an idea of what was available behind the remaining accordions.

The bento box style helped create a cleaner, more digestible layout. Key information, such as the main image, date, and time in port, were grouped together for quick scanning. The top excursions were given their own section, separated by a divider, with suitability ratings surfaced upfront. Users could still click to see more details, but crucially the accessibility information was no longer hidden.

The real design challenge came with the 'at sea' days. These previously blank sections were a missed opportunity to highlight the array of activities onboard. The final design introduced an image gallery featuring restaurants, activities, and other 'things to do' alongside a bullet point list of experiences available across all four ships.

Above: Final UI for the itinerary, mobile and desktop

Outcomes & Conclusion

The A/B test was live for 3 weeks. In that time there were some very positive results. There was a 4.5% increase in cruise bookings, a 48% improvement in users clicking 'more details' to read more about the destinations and a 430% increase in the amount of users looking at the image galleries.

Since the initial launch, the plan is to iterate further on this test, to try and provide more useful information in the bento box design.