The Basics

Pacific Travelogue publishes Hana Hou Magazine—the award-wining in-flight magazine of Hawaiian Airlines. As Hawaiian Airlines increased their social media efforts, Pacific Travelogue proposed opening up their content as source material. Pacific Travelogue brought out team in to help them pitch a system to share their 20-year archive of award winning stories and photos with Hawaiian Airlines’ social media team.

We were very familiar with Hana Hou’s content—we had already built out the Hana Hou Magazine iPad app as well as the web site using a custom-built content management system. The app and web site currently contain over 7 years of digitally formatted content that could be immediately used in Hawaiian Airlines’ social media campaigns.

The Challenge

Hana Hou!’s content is readily available on hanahou.com, but the content sharing platform needs to feel more like the Hawaiian Airlines family of services. Hana Hou! also needed a method of sharing upcoming content with Hawaiian Airlines.

Social media is inherently video- and image-based. We wanted the system to allow easy browsing through images and video—helping the social media team find the latest and most compelling content.

Design

Flows

I started by diagramming the basic flows a user would take through the system—from logging in to browsing and selecting stories and media.

Sketches

The flows inspired layout and navigation through the content management app. I created a few quick sketches to illustrate the basic layout grid and interactions.

Mockups

Dashboard

After logging into the system, social media content developers will see a grid of Story Categories—allowing them to quickly find images, video and stories for their social media posts.

Stories in a Category

After selecting a Story Category, the social media team will see all the stories in the category represented as cards. Each card shows the story’s cover image, title, issue date and description (if available).

Selecting the “Media” tab allows users to view the selected category by media—showing a grid of all the images and video available across all stories in the category. This media-centric view allows the social media team to find the most appealing image (or video) for their upcoming posts.

Story Details

When the content developers select a story, they will see the Story Details. This view shows the cover image and all media (images and video) used in the story, the story text, and relevant metadata (title, author, photographer, usage rights, etc).

Media Details

Selecting a media item (from the Category Media or Story Details views) take the user to the Media Details view. This view shows the media item (image or video), its metadata, and all other media in the same category—making it easy to explore the large archive of media assets.

Adding to Collection

As the Content developers browse the app, they can add media and stories to Collections—allowing them to group relevant content like building a music playlist.

/insert mockup of collection list + 2 collection details views/

Sharing a Collection

After building a Collection—for example, a collection of content for a Summer Travel promotion—a content developer can share the Collection with their teammates. Collection sharing allows content developers to more effectively collaborate on upcoming campaigns and posts.

Prototype

I built a clickable prototype in Figma to demonstrate the navigation and interactions through the app. Since the initial proposal submission could not guarantee the prototype would be viewed, I also created a screencast demonstrating a content developer using the system.