Client: Norwegian Cruise Lines

Project: Interactive Deckplans - Redesigned

UX Role: Senior Experience Designer (Project Lead)

Agency Partner: Critical Mass

________________________________________________________

Interactive deckplans is the visual and experience driven exploration to update our legacy deckplan approach into our newer and modern component and module styles being built for the redesign of the NCL.com experience.

‍

Booking Flow

While working within the exploration of mapping out the user experience for the legacy booking journey, the team additionally did a competitive assessment of the guest journey through booking from rival companies. Many learnings were identified in this exploration that we leverage into our own considerations as we redesigned our own guest experience for booking. One of the aspects I enjoyed a great deal about this exercise is when we forked the user after default statement selection into a choice if they would like to select their own stateroom. Below was the initial Journey Map leveraged as we mapped out these considerations and identified where we wanted to introduce this decision to the guest.

‍

Challenges

In designing the Interactive Deckplan experience, many challenges were presented. How to manage and balance the view pane between desktop and mobile for the option sets that needed to be supported for deck selection were among the top considerations. The mobile experience presented a specific set of challenges as we had large option sets for steps such as deck and stateroom selection that needed to be balanced with a visual viewport of the ship at the same time. We wanted users to be able to choose between a text component based choice as well as the viewport of seeing the ship view itself for a direct clickable area point of engagement for the interactive aspect. While this was easier to balance for larger experience such as desktop, this was especially challenging for mobile experiences and we ultimately built the UI to support a series of content trays that load from the bottom of the screen so that the viewport of the ship could still be seen while the user could scroll through the text based component rows sliding from the bottom of the device with a sticky placement for the cta to keep the action to move forward easy to access at all times.

‍

See below for happy path prototype of mobile experience:

https://www.dropbox.com/s/j2kyk564dsz0tyo/IDP-Prototype-Mobile.mp4?dl=0

‍

Note: This flow consists of over 40 page templates to capture all the necessary states of interaction for each core template. The below artboards will represent the default state only for the core page templates.

‍