Your Custom Text Here
Carnival Medallion Class
Project overview
Objective
The Medallion Class program, developed in collaboration between Carnival Corp and Matter beginning in 2014, was officially announced at CES 2017.
I joined the Matter team to help refine the experience vision, solidify the unique design system, and work with engineering partners to bring the guest-facing experiences for the Medallion Class system from ideas to reality.
My Role
The process for this program was extremely non-linear, and my day-to-day responsibilities continually evolved. Within our team, I was responsible for managing tracks of work, determining what design needed to be done, completing it for client approval, and leading the hand-off for our development partners.
Internally, I worked closely with our visual design team to create the necessary screens and components and our motion designer to nail the screen transitions and delightful motion moments.
Externally, I reviewed our partner design agency's work to ensure they appropriately used our interaction patterns. I also worked with the front-end, back-end, and data development teams to ensure that they followed the design intent.
Team
Internal industrial, interaction, visual, and motion designers. Partner development teams for Unity, back-end, and data services. Partner design agencies and Carnival business team.
Skills
Design system definition, interaction documentation, wireframes, wireframes, and visual design. Internal team management and partner agency review & collaboration.
Deliverables
Detailed interaction design documentation for delivery to engineering. Prototypes, motion design mockups, visual design, and a fully documented design language system.
The Medallion Class System
The Medallion Class announcement revealed the connected digital, physical, and service system that revolutionizes the cruise vacation experience for Carnival guests. Through one interface, Guests can plan their vacation, book excursions, arrange dinner reservations, order food and beverages, navigate the ship, and stay connected with friends and family.
The OCEAN Medallion
Designed by the industrial designers at Matter, the Ocean Medallion is a premium wearable delivered to the guest's door after they book their journey. Onboard, it connects to tens of thousands of sensors around the ship, the locks on stateroom doors, and even payment information. The medallion attaches magnetically to a suite of accessories.
A Full-Service Experience
In addition to the guest experience, I worked with Fjord’s service designers and the Carnival business team to map our guest experiences to service blueprints for the ship's crew. A suite of custom tools based on the Ocean design system were developed to support the redesigned cruise experience.
Matter at the center of design
Matter was the lead design agency on the program. We were both the facilitators of the program’s design vision and responsible for all guest-facing experiences. But there was just too much work for just our team; we collaborated with 2,000+ other individuals working on the program to deliver a platform for all of Carnival’s cruise brands.
Problems to solve
Refine the vision
How do we translate the ambitious vision of this system to something real?
Create an extensible system
The core cruise demographic is older people and young families — two groups not known for being tech-savvy. How will people easily navigate, use, and get value from this system?
Define an implementation process
In such a massive program, how do we build a design system and communicate that effectively to design and development partners?
Reduce scope
The first Medallion Cruise was set to sail in November 2017. How could I work with the client and team to prioritize features and define an MVP feature set for launch?
When I joined this program, a foundational vision was already laid.
This background allowed me to continue to develop the experience.
Compass Experience Principles
Eyes Up:
Guests go on journeys to escape. They shouldn't be spending it with their nose buried in their phones, so tasks in the Compass should be easy and quick. Digital experiences should always connect to a thoughtfully delivered service experience from the Crew.
Personalized for You:
The system should not only meet the guest’s needs but anticipate them. The Compass should always know your context and deliver the most relevant information directly to the guest.
The Compass is the Compass:
However a guest accesses the Compass, the experience should be completely consistent and familiar. They should be able to start a task on one surface and finish it on another.
Surprise & Delight:
Meet and surpass the needs of the guests but also introduce an element of wonder and surprise, driving them to engage and explore the system more deeply.
Cardinal Directions Interaction Model
Similar to an actual compass, the core interaction model for the Ocean Compass design is based on the North, South, East, West (NSEW) paradigm. Swiping one of the four cardinal directions allows the guest to explore their journey through time (East-West), while providing inspiration (North) and enhancement (South) of their journey, based on any specific moment in time. Z space is used to introduce the Compass Navigator and additional features.
Journey Areas
Journey Itinerary (East):
An agenda of the upcoming Experiences on your vacation. The environment responds to the context of the journey, reflecting the location, time of day, weather, and more.
Memories (West):
A shareable record of the things you did and the memories you made
Experiences (South):
Personalized suggestions for things to experience, eat, and buy while on your Journey
Moments (North):
Explore content from Carnival, learn about where you’re going, and engage in the culture of your destination.
Evolving With the Guest
Pre Cruise:
Complete OceanReady by entering travel documents and ordering OCEAN Medallions. Create your itinerary to make the most out of your journey.
On Ship:
Check itinerary, Order food, make reservations, and engage with other guests.
Post Cruise:
Experience their Memories, Purchase journey memorabilia, and get inspired for where to book their next Journey.
Compass Navigator
The Compass Navigator is the core launch pad to the many experiences the Compass has to offer. In blunt terms, it’s a menu that allows the user to jump between playing games and ordering items quickly and easily. Below are the core experiences offered in the Compass Navigator.
With that context, I was able to dive in to detailed design.
So what did I do?
I know, it's a crazy system. Admittedly, half the battle of working on this program was keeping everything organized and consistent. While I was involved in almost everything listed above in some way during the year I worked on it, I directly owned the interaction documentation for the following features:
Information Architecture
The first step was to consolidate all these ideas into a map of the experience. Getting a handle of the overall navigation helped me to identify holes and explore new opportunity areas.
(click to enlarge) Created in collaboration with Megan Meeker & Lauren Bedal
Experiences
A feed of personalized suggestions for guests to experience, eat, and buy. It curates itself for each day of their journey.
Full IxD documentation (selections shown). Defined feed structure and personalization parameters for the recommendation engine. Data team oversight.
Journey
An agenda of the future experiences on a guest’s vacation.
Full IxD documentation (selections shown). All possible itinerary modules across all design teams, their states, priority, packed itinerary overflow patterns, and service edge cases. Platform-specific implementation & ADA compliance. Service examples, Principle prototypes, and front-end development oversight.
Itinerary Prototype
Itinerary Overflow Prototype
(click to enlarge)
Realizing the Journey
I worked closely with Swihart Studios, a game art design company, to build the journey environment. They lovingly re-created the sea, sky, and every port destination in 3d. Additionally, when the sunset, it got cloudy, or it started to rain, the digital journey was rigged to reflect that as well.
OceanProfile
Dashboard for information and preference management for a guest and their family.
Interaction patterns, content organization, and full IxD documentation (selections shown) for single user and family scenarios. Worked with Carnival business team to ensure compliance.
ShopOcean
E-commerce experience for guests to purchase food, merchandise, and services. They can get their items delivered Here & Now or There & Then to almost any location on the ship.
Full IxD documentation (selections shown), features, and service flows. Worked closely with Crew design team to converge on a unified navigation and interaction experience for smooth implementation. Visual design for updates and additional flows to support development.
DineOcean
Guests can make dining reservations and pre-order meals for their journey.
Full IxD documentation (selections shown), features, and service flows. Worked with Carnival business and content creation teams to ensure compliance. Visual design for updates and additional flows to support development.
OceanConcierge
The central spot for time and location-specific contextual information. It is continuously updating based on the time of day and the guest’s physical location to provide the most relevant content at any point in time.
Full IxD documentation (selections shown), personalization parameters for the recommendation engine, and cross-platform considerations. Worked with crew design team and Carnival business team to ensure continuity.
Unauthenticated Experience
Experience for Compass Mobile before the guest accessed their OCEAN account. The design allows them to learn both the NSEW interaction model and what the Compass has to offer.
Interaction model, Full IxD Documentation, prototype, Motion design oversight, collaboration with ID on mirrored package design.
Original Prototype
Motion Study
(By Greg Madrigal)
A Physical Connection
As I worked on the digital experience, the Industrial design team was creating the package design for the Medallions. I directly influenced the packaging, driving them to mirror the Journey and the unauthenticated experience.
Bringing the Compass to Life
Because an experience of this scale had never been made before, testing the experience was crucial. The Carnival team built a life-size functional replica of areas the ship in a warehouse in Miami to bring the Medallion experience to life. This space played an integral role in understanding how the Medallion would impact both guests and crew on the ship.
I took many trips to Miami to meet with the development teams, test features, and ultimately refine the designs. This deep integration and a 'home base' really contributed to the efficiency of the program's delivery.
Design Delivery
While in-person meetings were extremely beneficial, we had to develop an agile strategy for documenting our work sharing it out with dozens of other teams. Using my Product Design background at Jawbone, I established and refined a process for our internal documentation and distribution process.
Shared Components & Sketch Files
I created master files for our internal team of about ten designers. This included templates in Sketch and Keynote for interaction documentation. I worked to make sure that visual design documentation was similarly modular.
Design Track Templates
With our internal workstreams organized, we needed a structured yet flexible way to share our work with the 2,000+ people working on the program. We had requests coming in every day, so the traditional waterfall annotated interaction PDFs were not an option.
Instead, I used Confluence to create living documentation for each core feature. Each page acted as a source of truth for design files, changelogs, and design documentation.
Design Language System Documentation
Developed in parallel, our design language system documented all interactions and components for each aspect of the system. We organized components for all of our features as well as designs from partner agencies.
In the ending stages, we thoroughly documented the interaction, visual, and motion parameters for everything in the DLS so that it could be implemented by other teams working on features in the platform in the future. I created the documentation templates and led a small team of visual and interaction designers, tracking the work for a clean roll-off.
Guest Compass vs. Crew Compass
The Crew needed a slew of new tools to be able to support all these new experiences. Our team partnered closely with Fjord to make sure that the crew tools supported the overall experience outcome of the guest. A visual designer and I also worked closely with Fjord to consolidate the designs to use our unified Design Language System.
ShopOcean Before:
Guest vs Crew
ShopOcean After:
Guest vs Crew
in collaboration with Megan Meeker (IxD), Sami Lukens (VD), and Esin Arsan (Service, Fjord)
Scope Reductions
As we approached the November release, we continued to refine the delivery strategy for guests. To help make the launch more achievable and focused for the many teams working on it, I helped split the experience into six different apps. This screen map is an example of the interaction and visual design work I did to reduce functionality available within the OceanCompass app.
(click to enlarge)
What I Helped Deliver
The Ocean Compass
A Cross-Platform Solution
Designs compatible with Web, Tablet, Mobile, Stateroom TV, and Portal devices.
InVision Prototype of MVP Compass
Results
The first Ocean Medallion Class enabled ship set sail on Princess Cruises in November 2017. The program has been in beta development since. They continue to build and add features that I designed along with the team, delivering personalization at scale.
2 of the 6 MVP apps I designed, OceanReady and OceanNow (ShopOcean), are currently available in the app store. Many other experiences are available on Portal devices aboard the ships.