Convenient Education – SBS Interactive

The three young filmmakers and co-directors of this documentary, Louis Dai, David Elliot-Jones and Lachlan McLeod of Walking Fish Productions, began this project when they discovered that large numbers of overseas students are arriving in Australia to study, only to find that the international education industry, flourishing owing to policies linking education and migration, has taken an unfavourable turn against them.

They were deeply distressed to learn that the only opportunities open to many of the students are at cheap trades colleges and low-paid jobs, and the local population are less than welcoming and even hostile toward them. This situation, exposing them to exploitation, poverty and racial violence, and the reasons behind it are the subject of the project,‘Convenient Education’, encompassing Australian industry, education, economy and politics.

More Screens, More Choices

For Executive Producers Dan Fill and Frank Verhagen at production company Chocolate Liberation Front, the most exciting aspect of the project was an opportunity to deliver a compelling story in an innovative manner to multiple screens. They felt that documentaries, as popular as ever among older viewers, could become more relevant to a younger audience through interactive, multi-platform delivery where the viewer can pick and choose exactly what to look at an any moment, on which device, and can also decide to make a comment.

“The planning around the project, the design document and then the programming aspects of handling the media are what set it apart,” said Executive Producer Dan Fill. “The production process of shooting the film and editing followed the same process as any linear production. It’s what we had planned out at the beginning, and what we do with the media after it is edited, that is the most interesting.”

When CLF started to work on the project, the production had amassed over 300 hours of footage. The original material was captured on HDSLR cameras by the three filmmakers here in Australia, and in India and Nepal, from where many of the students originate. It was to be edited in Adobe Premier and intercut with TV news footage, archival material and still images.

Unpacking the Story

To help unpack the story from this collected material, Alex West was enlisted as editorial supervisor and writer. Dan and Frank also recommended that some specific, extra footage be captured to ensure coherence and continuity. All material was first ingested and each clip was labelled. We created a rough script with the video segments, which we assembled at a low resolution to form a very early rough edit, which of course changed multiple times throughout production.

The greater challenge from CLF’s point of view, however, was less a matter of dealing with the various formats of source media as ensuring that it performed and was delivered effectively to users on a series of different platforms. “Wanting to take advantage of the fact that users have numerous screens through which to access video - mobile tablets and phones, Android and Mac, various browsers for the web such as Safari, Internet Explorer, Firefox and various versions of each, and a variety of different video players – meant we need to develop the art of turning a story into a compelling experience across as many of these screens as possible.

Interactive Comments

Once the viewer enters the site, starts the program and the documentary gets underway, various onscreen events occur. For example, ranged along the bottom is a timeline, a two-way commenting system that allows the directors to place time-based comments that become visible at certain moments in the story. The audience can then respond by clicking on these and leaving their own comments or even asking direct questions via Facebook. Also, the ‘Extras’ clips – additional footage on specific topics – become available as their content becomes relevant. At these moments, small graphics appear for viewers to click open if they desire.

“Mindful of our intention to present the documentary in an interactive way with possible ongoing competition from other viewing devices and the extra content, didn't really affect the edit so much, except for the fact that we knew we would be able to utilize the secondary pieces for the breakaway segments of the documentary. In some ways more time was spent editing and refining these secondary breakouts. But again, the greater issue was, once we had the final edited media, how we then dealt with it to play on various online players at resolutions that worked for users with higher speed connections and but still provided a decent experience for users with a lower speed connection with older browsers.”

Media Engine and Database

The graphics that users interact with to access the segments were created at Chocolate Liberation Front with some design treatment and direction from SBS, and the whole interactive treatment was programmed at CLF where the lead developer is Stuart Flanagan, working with SBS’ interactive design and development staff, Matt Smith and John Halaseh. The project’s two-way commenting system was of particular interest to SBS. It had not been used in a project before and became an interesting exercise for all of the stakeholders.

A line producer and production co-ordinator managed the stakeholders contributing work to the project, including SBS, receiving notes from SBS in response to a design document, design treatment and technical specifications. The team at CLF built the engine and placed the media files in a database that called on these files to make them visible and accessible at the appropriate times during the presentation, thereby controlling the interactivity. The engine, along with the all the files to be accessed, were delivered as a package to SBS. In the end, this media consisted of video, stills, audio, fonts and interactive applications such as the data visualization components.

Because the output was destined for several platforms, considerable work was involved in preparing this production for access and viewing on the web with different browsers, on tablets and for iOS and Android devices. Also, as mobile tablet and phone surfing were going to be common ways to access the story, the project could not be solely developed in Flash. HTML5 was also needed.

Dan said, “For some video services, as many views and accesses are now made via mobile devices as through other screens and, for some time, many of the most versatile and interactive web experiences have been built in Flash. But Apple tablets and smart phones do not support Flash. Developers need to either create and publish apps specifically for iTunes or develop the sites that can be browsed from these devices.”

Consistent User Experience

HTML5 is a universal solution that works across all these platforms, but is still new and less flexible than Flash which, at its core, is developed partly as interactive animation software, while HTML5 was built as a stable platform for web pages to be viewed. Several challenges arose to manage the intricacies influencing the display of a multimedia project in HTML 5 that looks good and performs across various devices, each with different dimensions, some running on touch screen interfaces while others require click-based calls to action.

Lead developer Stuart Flanagan said, “One of the main challenges was trying to ensure a consistent user experience across a variety of environments. Rather than develop a Flash app with a fall back to HTML5 video, our traditional method for a website like this, we decided to pursue HTML5 as the primary distribution platform. Consequently, rather than replicate the application in Flash - or even just the video player's controls - we abstracted traditional video player controls and incorporated them into a full browser application with support for full screen in certain browsers.”

HTML, CSS and JavaScript, in conjunction with the KnockoutJS framework and VideoJS library, were used to create the base website - including the main application controls and interface. These controls communicate with one, main video player plus an additional ‘extras’ player, accessing the extra interactive content. The video player itself, purely for displaying the audio and video, has no controls.

Finding a HTML5 Workflow

This approach delivered consistent results by delivering the UI in a language that is understood by all targeted platforms. This interface then communicates with either HTML5 or Flash to deliver the audio visual content without compromising the information architecture or visual design. Further considerations arose when creating an interface that felt familiar to regular desktop users, but also worked for people on touch based devices.

“While HTML5 video is still gaining traction, the lack of support for a standard video format can be frustrating and time consuming,” Stuart said. “’Convenient Education’ is hosting three formats for each video - H264, TS [segmented H264 video] and WebM. These formats are output for all 17 videos available to view on the project’s website.

“Finding a flexible yet streamlined workflow to output the required video formats, allowing for edits and updates to particular video files, was a challenge. To produce the formats required for ‘Convenient Education’, we developed a bespoke content management system to encode videos to the required formats when necessary. Our CMS relies on a combination of the open source media encoder FFMPEG and Apple's Media Encoding Tools.”
www.sbs.com.au/convenienteducation   www.givemechocolate.me