Hapag-Lloyd Cruises is a company that offers travels on their own cruise ships. They specialize in luxury cruises and expeditions.
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.
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.
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.
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.
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.
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.