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 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.
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?
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.
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.
