The University of Arizona recently licensed a new social media and video platform called Filmstacker. It helps users upload their own video, search for other video clips, and assemble them into their own narrative to share with others.

Filmstacker is essentially an updated version of Beyond the Mirage, a website that followed the eponymous documentary aimed at raising awareness of water issues. Beyond The Mirage provides access to 300 video clips online and allows anyone to edit them together to create and share their own mini-documentaries.

Storybench spoke recently with Cody Sheehy, the leader of both the Filmstacker team and the Beyond the Mirage team, and J.D. Gibbs, the lead programmer for both projects.

The team

The Filmstacker development team (left to right): J.D. Gibbs, Craig Boesewetter, Kimberly Daly (on screen), Matt Rahr, and Cody Sheehy .

How did you come up with the idea to build the website Beyond the Mirage?

Cody Sheehy: We won a prize to try to raise awareness of water issues in Arizona and beyond. As part of the media nomination of winning that prize, we decided to make a website.

“Beyond the Mirage” is going to be released on PBS. But the audiences that watch television are getting older and older. For PBS, it’s around 40 or above. We need a way to reach younger people who are interested in getting information online through social media. But it’s very difficult to communicate something as complicated as the water problems in Arizona in such short kind of videos in social media.

The documentary

The award-winning documentary Beyond the Mirage aims to raise awareness of water issues.

We tried to come up with a way that would engage people to explore more than just a short amount of content. We thought maybe by creating a process of building their own film that they’ll actually learn quite a bit about water. That’s where the idea started.

Once we had the idea, we kept developing it. We launched a company because we think there’s potential to do this for many projects.

How do you think Beyond the Mirage works on raising awareness about water issues?

Cody Sheehy: When it comes to water issues, there are a lot of different stakeholders – agriculture people, people who live in cities, water providers. We have these different stakeholders competing for water.

It’s hard to get everybody on the same page when it comes to solutions because sometimes one solution benefits one more than another. By having many different points of view in the possible clips, one particular person from one stakeholder group may come to the website, explore the content, and build the films that match what they are interested in sharing with their community. When those people come back to watch the movie, they will have a chance to learn more, which will broaden their understanding of the complicated issues of water.

The website allows users to select the video clips and make their own mini documentaries.

The website allows users to select the video clips and make  mini-documentaries that match their interests.

Water issues are not the most exciting of topics. But we hope some specific groups, like students or water providers could use the system.

Though it did not go viral, the retention time that people spent on our website is high, on average about ten minutes. We feel like we did accomplish our goal in some way.

What kinds of problems did you face? How did you solve them?

Cody Sheehy: Making a documentary film is really challenging.

The total team for building the website was four people. They worked really hard for about a year on it. For the video part, five of us created all the 300 video clips. It took about two years. We interviewed 60 or 70 different people and only a small number of them are on the website.

As our network of organizations that supported us grew, our ability to get access to better interviews and filming locations increased. Eventually, we ended up pretty well-funded and were able to interview the top people on this issue. But it was a long road to get from where we started to that.

Producing 300 video clips is a lot of work. You need to have an efficient workflow. Building this kind of a website is also challenging because it had never been done before. What’s more, building the website and shooting the video were happening in parallel.  I was the project leader and needed to coordinate the website development and the producing of the content at the same time.

What are you doing now with Filmstacker?

J.D. Gibbs and Cody Sheehy put together their drone as the get ready to use it for their new programs.

J.D. Gibbs and Cody Sheehy put together their drone as the get ready to use it for their new programs.

Cody Sheehy: Having been working on the project for one year, we are trying to get it done in 6 months from now. We are figuring out how everything is going to work, and partnering up with other organizations, designing the interface between different websites for our product… all are tough.

Five people are working for this program. Once we get the product done, we can test it with the public, maybe at that point, we will start to grow our company.

We are connecting to groups who are interested in working with us so that they can bring their footage (to Filmstacker) before it was released to the public. There should be a pool of content there (when Filmstacker is released). We hope the public can use it as a website to upload their own footage and the content can grow on its own.

We encourage everyone who wants to work with us to bring the footage at the very beginning, to be on the cutting edge, and help us to generate the metadata we need for the system to work.

The length of the clips is ideally one minute or less. They can be on any subject, but right now we are most excited about professionally shot clips that cover a specific topic.

What kinds of techniques did you use for the Beyond the Mirage website? 

J.D. Gibbs: The Beyond the Mirage website is a browser-based Javascript website, built with Backbone.js for model and data controller layers, and Marionette.js for complex nested view layers, a fun and easy to get started with Javascript MVC framework.

The current Javascript source code is compiled using Grunt, another good option is Gulp, although we are refactoring the build process to Webpack for our next release of the platform.

The website is hosted on an Amazon Web Services (AWS) S3 Bucket (Simple Storage Service), as a static website that utilizes a few AWS Lambda functions for data logic which creates JSON objects and HTML files for SEO (Search Engine Optimization) and social media sharing. This setup allows for a very scalable and cost-effective platform, all based on Javascript – highly recommended!

Cody Sheehy: As for the video clips, we used aero photography from unmanned aerial vehicles (UAV). We had a lot of camera gear and tripods. For every interview, we set two cameras so it has two views. We shot in Israel, Mexico, China and more than ten states in the U.S. We try to avoid any hand-held shooting, so it’s all very stable, beautiful, kind of elegant looking footage, which we thought is a good style for this kind of content.

J.D. Gibbs gave some advice to students teams who want to develop cool products ——

1. Carefully establishing scope to keep priorities in line. We spent considerable time discussing the ideas and prioritizing features so everyone was clear on the end goal, and didn’t waste time on low-priority tasks. Constant communication is key.

2. Architecting the app to support current and future desired functionality. We didn’t discount any ideas during our brainstorming sessions, rather encouraged thinking wildly about what could be, someday. These stretch goals influenced the architecture to be sure that the wildest ideas remain possible.

3. Splitting the app into modules. Choosing the Model–view–controller approach enabled clear separation so that each piece can operate without knowledge of the other, ensuring that the pieces can be modified without breaking dependencies.

4. Planning for sufficient scalability to support expected use cases and anticipated user base. If a website goes viral then you will see a spike in requests that no physical web server can handle, and then the site crashes and interest moves on to the next big thing. Using a cloud service like Amazon Web Services provides usage-based pricing and almost infinite scaling options.

5. Efficiently implementing the UI/UX mockups provided by the Visual Design team.  The developers and designers have to work very closely and iterate quickly to establish a realistic expectation based on prototypes and design revisions. Developers have to understand how the design elements frame the user’s experience.