Carnival Australia

Progressive Web App

Interaction Design of the mobile brochure site by Zoe Hardisty
Client: Carnival Australia
Create at Mobify2017
The goal of this project was to create a Progressive Mobile Web site, to showcase the brochure side of the Carnival Australia site.

The Project

Carnival Australia wanted to provide a mobile experience to their customers to browse for holidays on the go.The project required the creation of a new design system of reusable components and styles to capture the Carnival brand. The component system is build of discreet part that can be combined and reused to create the elements of the page. Each layout is then crafted from this design system, both in design and in code.

Challenges

This was the first mobile site for Carnival Australia, to be built in tandem with a redesign of there search and booking flow. We then needed to connect the responsive redesign of the Find A Cruise and Booking engine to the brochure site. As such we wrap this new functionality in the common header and footer for any customers browsing on mobile platforms. Since the two parts are made using different technologies, and with different design systems the overall experience for the customer is less than ideal. I worked with Carnival Australia and the other agency to find common ground to improve the overall experience for mobile customers.

Another challenge was the need to include links to desktop content, that at launch will not be redesigned to be mobile friendly. Traditionally mobile sites design has limited the scope of the content available on mobile to fix this issue. This has the unfortunate side effect of causing the customer to load the full desktop site if they needed information that is not contained in this curated content. With Carnival Australia we took a different approach, mixing the content till a future phase of the project is green lighted. Getting dropped to a desktop page is still not a great experience, but one I believe superior to the necessity of loading the entire desktop site on your phone.

Carnival Australia

Navigation

The site uses a minimal sticky header, with a common actions sub-header that disappears when scrolling down. Scrolling up the page returns this menu. The main navigation uses a drawer menu with multiple levels to accommodate the content. Also included is the currency switcher and relevant support number, that changes as a new currency is selected.

Promotional Pages

The promotional pages are landing pages for email campaigns, to entice prospective customers to search and book cruises. To drive conversion into the search and booking flow there is a Book A Cruise call to action (CTA). On mobile we mirror the CTA at the bottom of the page with the addition of a floating button. This was to combat possible drop in conversion caused by people not reaching the end of the page. This button was crafted to give guests the option to go to the pre-filtered Find A Cruise search page at any time. To connect the floating button to the larger CTA above the footer, the smaller one animates into the larger to visually connect their functionality.

The floating buttons is not a common pattern on e-commece sites. So to make it successful things we considered were to:

  • Avoid hiding content as you scan the page left to right
  • Be tappable outside of the reserved 40px space on iPhones (for the bottom menu)
  • To fall outside typical finger scrolling patterns to avoid being accidentally triggered.
  • The size and prominent on the page.

As you scroll down the floating button disappears, leaving the ship icon behind. As you scroll up the page the button reappears, grabbing the icon on it’s way.

Find A Cruise

As mentioned above, the search and booking flow are wrapped in the same header, and footer as the mobile site. This provides a level of continuity between the brochure site and the search and booking functionality with a common navigational structure.

Skeleton Loaders

One of the features of Progressive Web used here, is the concept of skeleton screens. Skeletons instantly set layout of the page, giving the customer a sense of what is to come. The content is progressively populate into these areas as it becomes available. This smooths the transitions between pages and avoids jumpy transitions as the content loads.