2018

We designed a booking platform for a cruise line

Agency

Polargold

Client

Hapag-Lloyd Cruises
hapag-lloyd-cruises_booking-platform_intro

About

Hapag-Lloyd Cruises is a company that offers travels on their own cruise ships. They specialize in luxury cruises and expeditions.

Task

The previous version of the booking portal wasn't great on the user experience and not optimized for mobile devices. That's why we designed a modern interface, added responsive behaviour and enhanced the user experience in many sprints and with user testing.

Role

We created the design and the new checkout flow together with Hapag-Lloyd Cruises in weekly sprints. Simultaneously I created a UI kit to quickly compose new screens and to have a solid foundation for the development. This enabled us to create desktop and mobile designs, show the many existing states and optimize the user experience with an increased speed.

Choose your suite

Choosing a suite is the most important thing for a user of the booking platform. But it can get complicated very quickly, especially when there are so many possibilities. In our case a user has to choose a suite, followed by a category, which stands for the position on the level or even a completely different deck. After that, depending on the suite and it's availability, the user can select his preferred deck and suite.

Every selection is made by clicking or tapping on the preferred card. Using cards consistently offered us the option to transfer the interaction seamlessly to mobile devices, where the user can swipe through the options.

hapag-lloyd-cruises_booking-platform_suite
hapag-lloyd-cruises_booking-platform_suite-mobile

Travel insurance

To make the user experience consistent and easy, we also used cards as selection method for the travel insurance. There we have it in a slightly different form, as the user has the possibility to choose it with or without a deductible, which we integrated as a select box within the card itself.

hapag-lloyd-cruises_booking-platform_insurance

Cash slip as a cart

When it comes to the price, we found two different user types in our research. The ones that want it simple and the ones that want it very detailed. So, we designed different carts for every user type. Users can even switch between the two views as they like. The extended cash slip shows the price broken down to the person.

hapag-lloyd-cruises_booking-platform_cash-slip-1
hapag-lloyd-cruises_booking-platform_cash-slip-2
hapag-lloyd-cruises_booking-platform_cash-slip-mobile-1
hapag-lloyd-cruises_booking-platform_cash-slip-mobile-2

Summary

On the final screen we've hidden the previous steps and added a list of USPs to funnel the user into the checkout. The user can verify all his selections or change them directly from the summary. A cash slip is sticky on the right side and always shows the order button.

hapag-lloyd-cruises_booking-platform_summary