Introduction
Online check-in is a highly recommended task to-do before heading to the port for both accelerated lines at the terminal and reduced changes to accommodations once aboard (bedding sizes, dining times, etc.). It solves a lot of operational headaches and also ensures travel and payment details are in order.
The “OLC” application was visually outdated, was task heavy and accounted for a lot of customer support calls. It was also not mobile friendly. OLC became a major focus for me as UX lead while we were in between big pushes with other initiatives. It was heavily research driven, both quantitatively and qualitatively, and saw great improvements in reduced support phone calls, customers getting to port prepared and reduced user session time-to-completion times.
Ex. Mobile friendly, progressive disclosure approach
Objective
This was an opportunity to make several enhancements and user test some really interesting ideas for efficiency purposes.
Some key goals:
Check-In more than one room at a time
Leverage shared information for multiple people and rooms
Allow users to partially check in and finish later
Use data to make decisions on reducing questions
Design modular layout patterns
Simplify the user interface and build a mini-component library
Upgrade development technologies for application performance
Process
Discovery & “As Is” Testing
To begin, I used usertesting.com to setup scenarios for users to walk through the legacy application to create a baseline for completion metrics and highlight any notable usability flaws or feature requests through observation and anecdotal feedback, respectively. This arrangement gave us good insight into our approach for testing wireframes of the new design.
We used insights from these tests as we refined the competing flows, ui and mobile mockups for black and white wireframes and tested those to decide on a winner, which also had several rounds of testing. The winner was the optimal version of promoted users to share selected information to be applied to other guests, reducing most of the information input required from being redundant. We also worked on this approach with business, legal and identity access teams on efficacy and any downstream effects.
Design/Development
As we were creating a new design system for e-commerce (and ADA), in parallel, we used some basic assets like typography, color and form elements to layer on top of the wireframes. New design patterns and elements were created for specific use cases and I worked closely with developers and often provided front-end code for UI elements.
Together we:
Developed an ADA compliant component library specific to OLC
Angular, lazy loaded, progressive disclosure based questioning
Implemented a mobile first design
Results/Monitoring
After launch we received high praise from our call center team on reduced phone calls regarding OLC as we did work closely with them throughout the process. Likewise, we observed mosueflow sessions to find that average time of completion had dropped significantly for users that completed in one session. Many users did take opportunities to save some questions for later, as expected, which skewed that data as a quantitative metric.