At CES this year, Carnival announced a new platform in development which is rethinking the cruise experience. Its named OCEAN Compass. The platform is centered around a medallion which is carried around on-ship by guests. It allows users to freely access thousands of features seamlessly through thousands of remote sensors. The platform also connects to mobile devices, various large scale screens around the ship, in-room tv’s, and even the key pads to rooms.
I was brought on as a part of the larger initiative to think about how motion design could help emphasize the experience across these platforms - creating a less transactional and robotic feeling. In addition to this, I was to work with the design team to identify interactions where motion design could be used to reduce friction.
The documentation was built by working closely with the UI and UX designers most familiar with the platform. Through this collaboration, we identified key aspects of the brand within the interfaces and assigned relevant characteristics which would help to design a coherent animation system. We then discovered the largest potential pain-point for the teams. If they had no context of how motion could benefit the entire experience, how could anyone hope to extend the system? So we also documented benefits which related to the overall platform.
Similar to the PayPal Design System project, I worked with design leads, UX and UI teams to come up with existing areas which could benefit from motion as well as creating a foundation of principles which would help us to identify new animation needs. When I started, they had already designed a large portion of the experience, but were willing to change things if it meant a simpler product.
Motion in OCEAN Compass is used to describe spatial relationships, functionality, and intention, with beauty and fluidity. Motion establishes powerful relationships, and provides tactile responses. The foundation of these movements is rooted in principles which illustrate the importance of motion as it relates to the design system.
Motion is emotive, creating delight for the Guest. It also feels calm, serene, and natural, consistent with the pace and rhythm of being on vacation.
Motion informs the Guest how Compass works, illustrating how to use components, and helping to establish patterns within the experience.
Motion helps to instruct the Guest through the experience, hinting at what will happen if a Guest completes a gesture, and helping to guide focus to the right spot at the right time.
Motion supports the appearance of realism through the portrayal of natural forces found on a voyage. The interface reflects this in the way elements interact with each other and the user. It is serene and soothing; capturing what it feels like to escape and relax.
Motion Design System
- The documentation was built in parallel to the design system so I couldn’t use it as a basis to start documentation. However, because the larger Carnival brand was established, I did have a baseline to inform a high level concept. With the help of the design leads we iterated on principles which resonated with the experience then presented them as we completed the design language.
- Building for up to 4 different form factors lead to some issues around scaling not only for animation, but also for visual design. Working closely with development, we prototyped our designs in the various screen sizes which resulted in a surprisingly simple scaling system.
- Our primary front end platform was built in Unity. Because of this, we were able to animate based on real-world physics with ease but getting there was laborious. With PayPal, I used Principal to output useful code based on my animations. But since we were using Unity, the development team wanted me to build a library of animation parameters they could reference while building. The ask was too large for one person to undertake so we recruited a part of their team to identify animations which could illustrate the system in broad strokes. This made it so we only documented animations which illustrated a system of elements.
- Motion is more useful in code (Principal, Lotte, etc)
- How motion may inform emotional experience through challenging standard UI durations and movements.
- Building a system from next to nothing by using existing high level concepts
- Building animations for Unity
- Handoff process for Unity
- Compromising time spent for experience
Client - Carnival
Motion Design & Animation - Devon Stern