Guest Profile for OCEAN.com
The task was to redesign the Ocean.com Guest Profile for the desktop website. OCEAN is the parent company of all Carnival cruise lines. The Guest Profile allows the user to edit and view personal information, account information, existing and upcoming cruises, travel documents required for cruising (e.g. passport or birth certificate), payment methods, and profile pictures. The original designs were created solely for the Compass mobile app. This redesign was to include desktop and mobile site dimensions. The previous Ocean Profile design (designed by the lead partner at the time) used elements from the "bubble" design system and fit into the N/S/E/W interaction model (see Second Screen for N/S/E/W interaction model). It also contained entry points for multiple guests within travel parties. The main objective in the redesign was to modularize the "content buckets" moving away from the original bubble design, tailor profiles for a single guest, and remove content buckets no longer needed for the next release. This arrangement would allow the guest to easily scan their information and edit each section as needed. Additionally, I designed notification toasts alerting the guest of their OceanReady status not accounted for in the original design. OceanReady is a branded experience that collects guest information necessary for cruises (known as Journeys within the experience). Notification states included: 1. Profile after sign-up, 2. Guest submits certain information; has Journey, 3. Guest completes OceanReady; has Journey, 4. Profile, no info present. The redesign also included revising the visual treatment, moving away from a blue ocean gradient, and progressing toward a simple white treatment while still adhering OCEAN type and color standards.
I collaborated with the Design Manager in creating the initial rough wireframes. The Design Manager and Design Project Manager determined the required "content buckets" necessary for the redesign. After the initial planning and wireframing stage, I was the main designer.
As the design reached completion, I went through several iterations of changes based on feedback from the Technical PM and development team. The first release required cutting a number of content elements from the initial design, more than we initially accounted for, and needed to be reflected in interaction guides for development teams. Ultimately this late feedback did not impact delivery.
RESEARCH AND PROCESS
From reviewing the original design, an area of improvement was the scannability of the Guest Profile. The original content buckets were surfaced by title only, and did not clearly indicate information that fell under each bucket. The pain point was continuous scrolling, a side effect of the bubble design system, when content could easily be organized on a single page. I researched commerce and travel website user profiles that contained several sections of guest information, like Amazon and Alaska Airlines. Both grouped sections with easily interpreted naming conventions. For Ocean Profile, I knew these sections could potentially contain copious amounts of guest information, usually pertaining to Account Information, Personal Information, and Travel Documents -- some of which are unique to the cruise industry -- and needed to be cleanly displayed and interpretable. Some flows and forms did contain the original structure as the original design (Travel Documents for example), but did require new UI elements to accommodate entry points and document submission. Providing clarity for the guest was key as I moved forward with the design. I built an Invision prototype of the general Guest Profile flow to ensure links and interactions weren’t missing and made sense.
Walking through the design with dev teams required creating an annotated document for all components of the Guest profile. These annotations included every interaction for each unique form component, button, link, and CTA. They also accounted for different states of the Guest Profile (e.g. OceanReady states) and captured the flows within each section. I received feedback through each iterative review with the technical PM and dev team, and made changes to reflect that. When the design was completed, redlines were exported via SketchMeasure and delivered to dev teams along with the annotated document.
Initial Concepts. Desktop wireframes demonstrating different approaches to modularize each content bucket, while surfacing information that describes each section.
These designs show features and components (Choose Tagalong, Affinities, Shared Photos, etc.) that were removed for the final release.
Sample of the Final Design. These screens demonstrate the various states in which a guest is OceanReady and their related annotations as showed in the annotated document. Due to development delivery constraints, three buckets of content (Personal Information, My Account, and My Trips) were the remaining components (My Trips links to a different experience outside of the Guest Profile). Click here to download the full annotated PDF.