Shannon Rednour

Case Study

2017 WebAward for Meagan Leavey

Integrating Rich Content into Bleecker Street's CMS

The following is a look at some of the challenges and solutions I faced when designing the movie website for Megan Leavey.

________________

The Challenge

The Bleecker Street CMS has an issue which I know many of my colleagues share. Our Rich Text Editor (RTE) is somewhat limiting in its ability to display rich multi-media content. I hear his from many people who manage a CMS. Even highly-developed off-the-shelf CMS platforms like WordPress or Drupal have  limitations and inconsistencies across platforms. Some RTE's allow for tables, other's don't. Embedding certain types of media into the RTE is not always available, etc. For Bleecker Street, we licensed the Redactor RTE which is integrated throughout our CMS. It's pretty good with the ability to extend default stylings, etc. But it doesn't allow for slideshows, or videos or other such rich-media integrations that you might find on other platforms.

When we first developed the CMS we addressed this by not limiting our editorial to just RTE content. "EDITORIALS" are actually a combination of Rich Text, Galleries, Photos, Videos and Playlists which can be stacked in any combination to produce a rich editorial experience.

A Single Page to Rule Them All

By the time Bleecker Street released Megan Leavey we had noticed a trend in our traffic. Users were preferring our single-page websites to micro-sites with multiple pages. As more and more consumers shift to mobile, they appreciate getting all their info on a single page. It's just easier to scroll on your phone than it is to navigate multiple pages.

But we also wanted to add some pretty rich content on our website. Rich editorial can really help build interest in a film. For Megan Leavey we wanted to tell the story of  Rex, Megan's bomb-sniffing dog. We wanted to give some history into how military dogs are treated. We wanted to tell stories of real-life Hero-Dogs.

With this challenge in mind, we set out to discover how we could integrate richer content in a single page destination?

Hype + CMS Integration

Ever since Steve Jobs killed Flash, content producers have been working to find a way to present rich, animated media in a dynamic way. In 2017 I was testing out a new application called Hype by Tumult. The goal of Hype is to help producers develop rich animated media similar to Flash, but using only HTML5. We did some early tests of Hype and although it was not as elegant of a display solution as Flash, we felt it could provide us with enough interactivity to display complex editorial in a single content pane.

We already build our films similar to the editorial example above. Films are made up of a stream of Videos, and playlists, and content streams. So we built a new object type called "Interactive". This interactive block would basically just house the URL of our Hype animation, injecting it into a page section of our films.

Interactive Blocks inserted into the Bleecker Street CMS

Here you can see how those those interactive blocks get inserted on the front-end.

Result

We were very pleased with the results of this solution. Analytics showed that more users integrated with the embedded content than the engagement with content for our other film websites. And the cherry on top was when we were awarded the 2017 Webaward for "Best Movie Website."

Here are just a few screengrabs from the final interactive content, or you can check out the live content on the Meagan Leavey Film page.

More Case Studies:

Case Study
Designing Flexible Page Templates
READ MORE
Skills
Wireframing & Prototyping
READ MORE
Video
Video Platform Design
READ MORE
Case Study
CMS & Information Architecture
READ MORE
Video
Video Editing & Motion Graphics
READ MORE
Case Study
We Steal Secrets: Facebook App
READ MORE