Holly Rankin Design
DESIGN PROCESS

Seabourn Cruises

Passage to inspiration is a branded content experience by WSJ. Custom Studios and Seabourn Cruise Line, two premium, short-documentary videos profile the influential work and minds behind an extraordinary travel experience. Two other episodes are brought to life through a custom editorial responsive web experience.

In each episode, whether film and text or custom photography and text, the narrative is driven by selected influencers, interviewed in New York City, while the Seabourn onboard experience is captured separately to display the subject’s work as integral to the ultimate travel experience.

SERVICES
Art Direction
UI/UX

DESIGN PROCESS

DESIGN PROCESS

As a luxury brand, the Seabourn editorial site needed a user experience and visual design that was consistent with the high-end brand. Using the four verticals as inspiration, the user can carousel through the editorial content using the hero images once inside the experience without returning to the landing page. Animations, transitions, and visual approach were approved before beginning official UI design by prototyping the experience in After Effects. 

design Browser Mockup.jpg
VISUAL DESIGN

VISUAL DESIGN

The visual design was partially pulled from the Seabourn brand, and partially as a unique visual experience, as requested by the luxury cruise company. A classic serif type fair paired with subdued hues, and gold quickly established the lifestyle feeling that needed to be conveyed in this experience. Rich photography helped visualize the story-telling and real-life luxury on board the cruise ship.

RESPONSIVE DESIGN

RESPONSIVE DESIGN

A untraditional grid was used to show the sophisticated development used in this experience. On desktop, these grids span full-width of the screen, but as the screen lessens in width, the grid scales, and becomes able to be swiped. Images animate in from the side and stabilize with edges of images visible on mobile and tablet to notify the user content is hidden and encourage the user to swipe to see more. 

animation-sample.gif
SOPHISTICATED ANIMATION

SOPHISTICATED ANIMATION

The luxury brand enabled elegant use of animations and transitions. A subtle use of parallax, typography fade in, and design element transition helps guide the users attention throughout the experience and creates an intrigue necessary for a high-end brand like Seabourn. 

iPad_Pro_adventure.jpg