Cruise Check-In Application Built with Modern, Scalable AngularJS
Case Study: Application Development
SITUATION & BUSINESS CHALLENGE
Holland America Line (HAL) is a recognized leader in the cruise industry, with a fleet of 14 modern ships offering more than 500 cruises to more than 400 ports in 98 countries and territories around the world.
HAL’s website was struggling to support a quality customer experience due to rapid growth and changes among its customers. More than 90 percent of its guests were checking in online using a decade-old web application with an average time to complete the process of 41 minutes. With up to 5,000 guests registering each day, online check-in had become the single largest driver of customer support calls. Another major challenge was the increased use of mobile devices by Holland America’s customers. In just four years, the share of HAL’s website traffic from mobile had grown from near-zero to 38 percent. In addition, because of the way the site was built, it was difficult for the IT team to change page designs, modify business rules, or support phone and tablet-based browsers.
Holland America recognized the need to improve the customer experience on its own website as well as for its luxury sister line, Seabourn Cruise Line. The company wanted to make the check-in process easier, faster, and responsive for any device and any display size. HAL hired a third-party designer to create a new desktop-oriented visual design while it searched for a technology partner with the right mix of development and consulting experience to build the new Online Check-in application.
After evaluating numerous options, HAL found the perfect match in AIM Consulting. This would be the first time the company had hired an outside firm to deliver a guest-facing application with such a large user base. Given the high visibility of the project, it was critical that the solution perform well at launch as any shortcomings would affect thousands of customers a day.
AIM Consulting provided a Scrum team that worked onsite in collaboration with HAL IT staff and stakeholders. The project was divided into three phases: First, AIM analyzed HAL’s complex technology infrastructure to determine the best solution design. Next, AIM consulted with stakeholders to evolve the mobile/responsive design using prototyping tools that allowed for rapid iterations. Finally, the complete application was developed, tested and deployed in a series of two-week sprints.
The new Online Check-in application was delivered as a responsive, scalable, single-page application supported by a services layer. To ensure success, the AIM team based its approach on these key factors:
- Agile, iterative development: By delivering working software every two weeks, the team could frequently incorporate feedback from stakeholders and adjust to changing business needs. By the time the application launched, the team had incorporated dozens of changes to the original design ranging from subtle usability improvements to support for new analytics technology.
- Interactive prototyping: The initial page designs, delivered as conventional wireframe drawings by a third party, didn’t capture the complexities of a fully responsive application. The AIM team employed a dynamic prototyping approach that accurately showed how the application would function on mobile, and then facilitated iterative design sessions involving client stakeholders, the UX designer, and the development team to solve for functionality issues on mobile devices.
- AngularJS: In contrast to the legacy server-based JSP approach, a modern Angular implementation brought much of an application’s data and intelligence into the browser. Angular supports rapid UI development, easier maintainability, and high performance. The team was able to demonstrate working pages within a few weeks. As APIs and services were developed, the Angular application was easily modified to incorporate new data and functionality.
- RESTful services: REST is a common architecture for web services that are lightweight, maintainable, and scalable. Using the combination of a services layer and Angular front-end, the application is shielded from the complexities of the legacy back-end system. This approach not only allows for more rapid initial development but will minimize ongoing maintenance and support costs as Holland America continues to evolve its ecommerce infrastructure.
The revamped Online Check-in was first released on the Seabourn website to immediate and positive reviews. Based on the smoothness of that launch, the new app was rolled out just two weeks later on the Holland America website, which hosts 15 times the check-in traffic of Seabourn. The cruise line’s call center, prepared to handle a sudden influx of customer calls, instead called the launch a non-event for the support team. With an updated UX and responsive design, guests moved easily through the check-in process, which performed flawlessly.
The benefit of an Angular-based architecture was confirmed a few weeks later, when HAL deployed new branding across its website. Updating the logo and marketing messages for the entire check-in application was a simple matter of replacing a few image and text files.
HAL and Seabourn guests now enjoy a streamlined, intuitive check-in process that works on any device. Users can either progress through the check-in process linearly or navigate freely among pages to update the information they have at hand. Guests can save their entries and return as often as needed to add additional information, complete their check-in and receive boarding documents.
HAL saw an immediate business impact from the new application in the form of dramatically reduced demand on the customer support desk:
- Calls related to account login dropped by 70 percent in the first month.
- Issues related to accepting the cruise contract online were reduced by more than 75 percent.
The new application almost completely eliminated calls related to selecting the numbers of guests to check-in.
Working closely with Holland America, AIM Consulting delivered a robust, intelligent application that is designed for the future. AIM’s agile approach provided HAL stakeholders with constant visibility into the project’s progress, building a high level of trust and compelling HAL to engage AIM on further projects.