Fan Funhouse is a web app that allows users to film a short video with a webcam or smartphone and remix it in the style of a pop culture franchise or brand. There's a long history of people making things inspired by the books, movies, TV shows, and other media they love. Keeping in that tradition and utilizing modern affordances of the web, Fan Funhouse is an easy-to-use tool that encourages fans to make expressive, entertaining things without the need for complicated software or fancy equipment.
Fan Funhouse specifically focuses on introducing video editing to a wider audience, and it encourages more variety and creative agency than simply slapping on a single filter and calling it quits. Users can choose from a variety of effects and arrange them in just the right places to create their own mini-masterpieces. Version 1.0 of Fan Funhouse is aimed at fans of the alt-comedy duo Tim and Eric who want to imitate the look and feel of their sketches. That said, Version 2.0 could potentially be for fans of Star Wars, or Game of Thrones, or Doctor Who, or [insert your favorite show/movie here]...
Alternative comedy duo Tim and Eric have described their work as the "nightmare version of television," and, indeed, their humor is rooted in a unique audiovisual aesthetic filled with abrupt transitions and glitchy, archaic special effects. When I watched my first Tim and Eric sketches several years ago, one of the first questions that came to mind was, "How do they do that?" As the years passed and I became an increasingly dedicated fan, I fixated on a different question: "How can I do that?"
I attempted to do some cursory research on the Tim and Eric aesthetic, but I wasn't satisfied with forum posts that recommended I master the nuances of After Effects. I frequently witnessed Tim and Eric fans quoting sketches and posting memes galore on social media, and I hypothesized that other passionate fans shared my desire to make Tim and Eric-inspired videos while lacking the professional software and editing expertise to do so. This line of thinking caused me to investigate Tim and Eric's online fan communities to see if my predicament resonated with others and if I could design a solution.
My user research for Fan Funhouse was centered around the experiences of self-identified fans of Tim and Eric. I wanted to learn more about how they participated in Tim and Eric fandom and determine if a tool for creating Tim and Eric-themed original videos would encourage them to participate in new ways.
In April 2016, I distributed a survey to Tim and Eric fans (via a Facebook group) concerning their habits as consumers and producers of Tim and Eric-related media. Later that month, I had the opportunity to interview Doug Lussenhop, the lead editor on Tim and Eric shows, about his video editing techniques.
I distributed an online survey to members of the Facebook group “Tim and Eric Awesome Group, Great Friends,” which is comprised of thousands of self-identified Tim and Eric fans. I received survey responses from 222 people and documented the following statistics:
I conducted an in-person interview with Doug Lussenhop, Tim and Eric's longtime editor. Lussenhop's unique editing style is a hallmark of Tim and Eric sketches, and during the interview he discussed some of the techniques and effects that could “Tim and Eric-ify” short webcam videos:
The data from my survey lent support to my hypothesis that many Tim and Eric fans are interested in producing and sharing original videos inspired by Tim and Eric but have never done so. In turn, I sought to design a tool for "Tim and Eric-ifying" user-generated videos that would be easy to access, easy to use, and built in a way that allowed for speedy publishing and sharing.
During the ideation process for Fan Funhouse, I explored concepts, conventions, and interaction paradigms from a number of existing artifacts, including commercial software, mobile apps, branded creative digital experiences, and academic projects.
Fan Funhouse contains video editing conventions used in most commercial video production software, such as a linear timeline, non-destructive track sequencing, a preview window with instant feedback, and a rendering process.
How Fan Funhouse is different: Fan Funhouse doesn't come close to matching the depth and complexity of commercial video production software, but its learning curve is significantly smaller. Plus, there's nothing to purchase or install — you can use Fan Funhouse right in your web browser.
Conceptually, Fan Funhouse draws inspiration from the frictionless experiences users have with several massively popular video remixing apps: film a short video, quickly apply an effect or filter, publish the remixed video, and share it with friends.
How Fan Funhouse is different: Existing apps in this space take a “set it and forget it” approach to remixing, allowing the user to select a filter or effect and let it impact the entirety of their video. Fan Funhouse provides the user with more creative control, allowing them to layer multiple effects and determine when and how long they appear. The goal here is to make video remixing more personalized and playful while keeping the experience simple.
The idea of a brand giving its fans a platform to make “branded” artistic media isn't new — Nintendo's Mario Paint (1992) and Mario Artist (1999) are ambitious examples of platforms that provided users with tools to create branded illustrations, music, animations, and more. Today, these types of experiences are now optimized for web browsers, and they emphasize a degree of personalization that compels users to share their creations via social media. The modern fan can easily create an avatar illustrated in the style of a cartoon, design a new flavor and can for a beverage, and add custom text to a TV show title card.
How Fan Funhouse is different: Many of these web-based branded experiences have users creating images or GIFs, as these are lightweight file formats that look great in social media feeds. Fan Funhouse brings video-making into this genre, and it does so on the web, rather than strictly through a native app (see “Video Remixing Mobile Apps”). In turn, one design challenge for Fan Funhouse involves using emerging web development technologies such as the HTML5 Canvas and WebRTC APIs to build a video editing/publishing engine that is fast and flexible.
Several existing academic projects have been concerned with making video editing easier for novice users. Some of these projects explore novel interaction paradigms for video editing tasks, while others use algorithmic analysis to attempt automated or “intelligent” editing operations. Arguably the closest academic antecedent to Fan Funhouse is LACES, a tablet app designed at University of Toronto that allows users to quickly edit and apply effects to live-streamed video. Conceptually, Fan Funhouse is in conversation with Henry Jenkins' writing on fandom and participatory culture
How Fan Funhouse is different: While Fan Funhouse's academic antecedents share its goal of making video editing easier for novice users, they more closely resemble commercial software with regards to depth and functionality. Fan Funhouse, which lives in a web browser and is intended to produce short, shareable videos, is specifically designed to address the needs and habits of fans in the social media era.
From the start, I identified three fundamental tasks in Fan Funhouse: record a video, edit it, and publish it. As seen in this interactive mockup (shown below) from July 2016, I designed the following UI elements for these tasks:
I decided to begin coding a prototype of Fan Funhouse in August 2016. Typically, I believe time and resources are best spent on refining and testing a design before any implementation begins; however, due to the experimental nature of my front-end coding (see the "Implementation" section below), I wanted to make sure early on that my use of various APIs in tandem would allow the user to successfully record, edit, and publish a video.
Luckily, my gamble paid off, as I was able to get this fundamental code written over one weekend and could then iterate on my design by having users complete realistic tasks during testing.
In September 2016, I experimented with a UI element I called the remix bar, an animated progress bar that the user could click to scrub the video. By clicking a single point on the remix bar repeatedly, they could produce the stutter loop effect often used in Tim and Eric sketches. Although I iterated on the design of the remix bar, I decided to remove it after I coded an automated version of the stutter loop effect that could be managed with a slider in the inspector panel like other effects. By maintaining a consistent interaction pattern for effects, I hoped to reduce the user's cognitive load.
During my first user study for Fan Funhouse in November 2016, five Georgia Tech graduate students went through the process of filming, editing, and publishing a video with the medium-fidelity prototype. These tests identified usability pain points that I sought to address through iteration. I received relevant feedback pertaining to the following topics:
Following the study, I made the following iterative changes and conducted guerrilla usability tests to see if they improved the Fan Funhouse user experience:
In January 2017, I made the transition to high fidelity prototyping (shown below). I developed a visual aesthetic with rainbow colors and source code font that's intended to reflect Tim and Eric's retro whimsy without adding unnecessary complexity. I also incorporated a card design pattern inspired by Google's Material Design language that posits the recording, editing, and publishing sections of Fan Funhouse as distinct but interconnected parts of the overall user experience.
During my second user study, which will take place in early 2017, members of the Tim and Eric Facebook group that I surveyed will remotely test a high-fidelity prototype of Fan Funhouse. These tests will directly involve members of my target audience and help me identify additional pain points and opportunities to improve the app's user experience.
In order to actualize Fan Funhouse with code, I am using several front-end APIs in tandem. As a designer, my goal is to create a funtional demo, rather than scalable, industrial-strength code. That said, elements of Fan Funhouse's user experience, such as real-time effects editing and fast video publishing, are directly tied to how my code runs.
I have designed the following effects inspired by Tim and Eric sketches for the Fan Funhouse prototype:
Fan Funhouse videos live on the "Tim and Eric's Fan Funhouse" website. Given that this project intends to encourage participation in the Tim and Eric fandom, I decided to design a community website where fans can watch, "like," and share each other's videos. I imitated YouTube's tabular home page navigation in order to give users the option of switching between "create" (for making videos) and "community" (for watching videos) pages. I'm also implementing an internal search engine that allows users to search for videos based on their title, author, and tags.
Aspects of the Tim and Eric's Fan Funhouse website hint at future directions for the project. The "create" page displays a card describing a "Brule's Rules" video making experience, which would incorporate effects used in the popular Tim and Eric sketch starring John C. Reilly. I included this to indicate that future iterations of this digital funhouse could potentially feature a variety of video making experiences inspired by specific Tim and Eric sketches or characters.
In addition, I could imagine the Fan Funhouse brand scaling to cater to other pop culture fandoms with reverent and creative fans. While the interface and experience design of the video making tool would largely remain the same, perhaps Star Wars fans could surround themselves with stormtrooper lasers and Twin Peaks fans could be green screened into the Black Lodge. Video production tools on the web are becoming easier for developers to implement and easier for users to operate — in turn, there has never been a better time to design tools for creative video making in fandoms and elsewhere.
Although I am optimizing Fan Funhouse for use in a desktop web browser, many users may want to film and edit with Fan Funhouse on their mobile devices. I decided it would make the most sense to prototype a native app version of Fan Funhouse that has UI elements and interactions that are ideal for mobile devices.
Rather than reinvent the wheel, I am designing interactions for the Fan Funhouse mobile app based on familiar patterns used in of antecedent apps like Snapchat and Instagram. An early design concept for the effect sliders drew inspiration from Snapchat's text effect, which appears as an icon in the top-right corner of the screen and, loads a text input field when tapped.
I am currently building the mobile prototype using Origami Studio and conducting guerrilla usability tests with it. This prototype will not create shareable video files like the web app does, but it will allow the user to simulate the recording, editing, and publishing processes on a mobile device.
In April 2017, I will have completed the following deliverables for this project: