Client: Carnival Australia
Create at Mobify, 2017
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.
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.
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.
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.
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.
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.