Like a Donut was my undergraduate senior project: a web video series, relying on fast edits and contextual hyperlinks to entice the visitor to explore. The site was Flash and no longer works, but below is the project brief.

Like a Donut: Your New Favorite Video Attraction Website

ATEC 4380 capstone / CV senior project
The University of Texas at Dallas
Luke McKenzie, Spring 2008

What is LAD?

Is it a blog? A podcast? A choose-your-own-adventure story? A Wikipedia and YouTube wannabe? In ways, it’s all of the above.

Put simply, Like a Donut is an entertainment website built around regular posting of short Flash videos featuring my erstwhile roommate and I doing funny things. While this content ultimately drives the traffic, it’s Like a Donut’s spatial user interface that makes it truly unique among its peer attraction websites – it presents the videos as nodes in a giant topical web, and encourages browsing the content topically rather than chronologically.

The concept

We used to sit on the couch in our Waterview apartment, spending hours talking about the ins and outs of life, issues of the day, and vagaries of contemporary pop culture. We’d start to build off one another’s ideas and get a comical synergy going, and when the denouement came, I’d find myself wishing I’d recorded it.

Last year, I was asked to produce a semester-long creative project for a Storytelling for New Media class. I came home and casually told my roommate I needed an idea. Within thirty seconds he came up with the topical web of videos which became the core of Like a Donut. The rest of the evening was spent on the couch, elaborating on the concept and laughing about how ridiculous it was going to be.

Considering the concept’s self-referential nature, the name Like a Donut was suggested because, as my roommate put it, “we go around in damned circles.” Despite our best efforts to find a better name, this one stuck. I registered the domain name, and the project was official.

The content

After experimenting with a few means of recording videos, we settled on a regular routine that’s simple but effective.

We set up the camera in front of the couch (“Friend Couch”), start it recording, and just start talking. (We may have a few topics prepared, but the conversation is improvised.) Thirty to forty-five minutes later, we’ll have touched on at least a dozen topics.

Then I import it into Final Cut Express for editing. Each topic gets condensed into a little video, no longer than about a minute and a half, composed subtractively and cut tightly so the conversation feels quick and engaging. After editing, I have at least a dozen videos (and one miscellaneous “scraps” video) per session, and at our current release rate of Mondays, Wednesdays and Fridays, this is enough content to fuel the website for a month.

Unfortunately, because these conversations are filmed, they’re necessarily different from the spontaneous conversations I’d hoped to capture. My roommate has even said he uses a persona on camera, and at any rate, we both do a lot of hamming; but this makes for funnier videos, too. I’ve tried making edits of more serious conversation topics, and it doesn’t work as well. In editing I have to keep in mind the main draw of our content, which is the comedy that arises from the interplay between him and me.

The experience

The home page features a giant spinning donut and some theme music. A handful of circle-shaped links pop out around the donut, introducing our visitor to the site’s main means of navigation. These link to the latest video and the introductory one, as well as “About LAD” and “Recent comments,” both of which appear in a “fake” popup window within the browser.

There are two kinds of media referenced in Like a Donut: the video and the external link. The former loads in the LAD video player and leads to further links; the latter opens in a new window. While most of the external links lead to content that is not ours (such as Wikipedia articles or news articles), they may also lead to LAD content that isn’t video (such as images).

A pie-chart-style loader appears as a video loads into the player, as well as a profanity warning if applicable. As soon as the video appears, it starts playing; and as we make references to other videos on the site, links pop out around the video, with differing colors, angles, sizes and captions. Links that have already been visited (according to the browser history) appear with dotted borders; external links are identified by a little arrow tab.

A row of controls are arranged around the bottom edge of the player. From left: Home, About, Search, Random, Play, Playhead (for rewinding and forwarding), Pause, Comments, Reveal Links, Suggest a Link, and Share (reveals links to Digg and other social networking sites).

The process of watching videos on LAD is a bit like getting to know people in real life: during conversation, the subjects slowly change toward commonly held interests. The LAD process is similar because, though it may seem like a one-sided show, it is actually quite interactive: after watching a video, you (the viewer) add your input by selecting another topic that interests you. You help shape the conversation by letting us know which topics you’d like to hear us talk about.

With this in mind, I’ve deliberately left out any directory listing of the videos. Its usefulness declines with scale: the more content there is, the less sense it makes to ask for a comprehensive list of it for the purpose of consuming all of it. It wouldn’t make sense to ask someone for a menu of every possible conversation topic; nor would it make sense to try to watch all the content on YouTube in an ordered fashion (chronologically, for example) – there’s so much, it simply can’t be done. An organic, topical, hit-or-miss approach is much more likely to target the content one actually wants to watch, and avoid pressuring viewers into watching more content than may actually interest them.

I hope that by eliminating the directory and removing the sense of the whole, LAD will keep a sense of mystery and depth about it, and LAD viewers won’t feel obligated to consume all of our content – just the parts they like, at their leisure. (The exception to this is the newly posted video(s), which is presented in a way that hopefully encourages compulsive repeat visits so as to “catch them all.”)

In place of the master list, however, we’ve offered several alternate means of finding videos of interest. There is a search window – so you can “ask” us about things that interest you – as well as a random button. Through our integration with Digg and a couple other social/bookmarking websites, popular videos will begin to attract viewers directly from these sites. (I have more such features planned; see “What’s next.”)

Like a Donut also exhibits the “Wikipedia effect” – the nature of a self-referential body of hyperlinks, such as Wikipedia, to keep a visitor engaged for hours. Since LAD videos are short, they invite a daisy-chain of satisfying link-clicking that, unfortunately, threatens productivity. (We disclaim any and all responsibility for time lost to our site.)

We realized early that, since the videos are so one-sided, it was important to create opportunities for users to interact with our site and offer us feedback. We’ve implemented several, including searching, a comment thread for each video, and integration with social websites (Digg, Reddit, del.icio.us and StumbleUpon).

The most important of these is one that actually helps us maintain the site. We will be adding videos so quickly that we’ll have neither the time nor the presence of mind to create all the possible links between videos to continue to grow the giant and topical web. So we actively solicit link suggestions from our viewers: if they feel the video they’re watching should link to another they’ve seen, they can suggest it by entering the target video’s name.

Graphic design

From the beginning, I wanted Like a Donut to use circles as much as possible. They are organic and friendly, and refreshing on a platform dominated by tightly arranged rectangular shapes. They also encourage clustering the controls in the center, which I believe is a more intuitive user interface than controls anchored to the window edges, and helps to differentiate LAD from the browser that encloses it. (If we decide to advertise, the ads will likely get strung in a row across the bottom; so they, too, will appear visually distinct from the content.)

The circle motif is also echoed by the donut design and the circle formed by the links.

Color is used as a navigation aid and to help characterize the media. Each piece of media has a color associated with it – usually either sampled from the video or related to it conceptually – and all links that lead to that media are colored accordingly (though each has its own label). If it is a video, the pie-chart loader and the video player both take on the video’s color. For what it’s worth, one of my favorite aspects of Like a Donut is the unique color scheme that appears around each video on account of its
collection of links.

As for typography, I originally meant to use a neat script:

But that would have been entirely too cute and not very legible. So I chose to use Futura: crisp and cool, but still friendly, and very legible.

Its geometric shapes echo the circle motif as well, so it’s a very good fit. Unfortunately, not everyone has Futura installed on their computer; so while it is embedded in the Flash player, Verdana is used to render browser text in the floating windows.

How it works

The front end (home page and video player) is built mostly with Macromedia (now Adobe) Flash. It was built with Studio 8 and is designed to run on Flash Player version 7 and later.

Originally, the Flash was meant to handle all navigation, such that content would be loaded into the player dynamically and the browser page would never reload. However, this would have unnecessarily duplicated the browser’s own navigation controls, conflicted with users’ expectations, and meant more work for me.

So I left the browser responsible for navigating. The page reloads with each new video, and the video name is specified in the URL so that users can reference videos by URL (for bookmarking or sharing). Since the browser can track the page history, the back/forward buttons and browser history work as expected. (The name is used rather than the ID, both to be more user-friendly and to avoid giving indication of a video’s place in the whole.)

Like a Donut is powered by a MySQL database (with tables for media, links and comments), as well as scripting code written in PHP on the server side and JavaScript on the client side. For security, only the PHP scripts have access to the database. When the JavaScript scripts or Flash file need data, they use Ajax to make requests of PHP scripts, which return the data in plain text or XML as appropriate.

There is actually only one HTML document, index.php. It contains some PHP code that determines what to display (home page, specific video, random video, or 404) based on the parameters in the URL.

If it’s the home page, the PHP code consults the database to get information about the latest video, and passes it on to the Flash so it can link to that video.

If it’s a video, the PHP code simply passes the name to the Flash. The Flash then makes an XML request to a PHP script, which returns some XML containing information about the video (title, duration, profanity flag, etc.) as well as about the links that should appear with it.

Upon first user-testing Like a Donut, it became immediately apparent that a visited-link indicator was needed. As far as I know, Flash can’t consult the browser history, and JavaScript does only to an extent. So, in order to facilitate the visited links, I use a bit of JavaScript code that takes the URLs for the links, inserts them invisibly into the page, and asks the browser what color it rendered the links. If the color matches the visited link color I specified in the stylesheet, the link is known to have been visited. The JavaScript passes this info on to the Flash.

The “fake” popup windows are <div>s drawn by the browser and floated over the Flash player. I thought of building them in Flash, so as to avoid the occasional ugly rendering glitches that happen whenever anything is placed in front of Flash; however, building them in <div>s allowed me to design their content with HTML and use Ajax to have them interact with the database, and this way they can be dragged outside the bounds of the Flash player (which, being square, does not take up the entire browser). Some third-party code facilitates the dragging.

What’s next

The biggest likely setback to Like a Donut is that, as of July 2008, I will be moving to California for graduate school. I’m not sure I could carry LAD forward on my own (indeed, a forthcoming video highlights the inanity of a LAD video with only me in it).

However, we believe it is feasible to continue the project anyway: since a single session powers the site for a month, we can produce months’ worth of content whenever I visit Dallas.

Other possible developments include:

• Videos that break out of the living room: scripted videos, short films, class projects, and other kinds of time-based video content.
• Streaming video. The Flash video component I am using is designed to stream the video and play from a buffer, so I plan to implement that.
• The random feature needs to avoid videos you have already seen.
• The home page needs buttons that target our better content, such as “Editors’ picks,” “Most viewed,” and “Most commented.”
• Multiple donuts and new theme songs for the front page – perhaps seasonal.
• It was suggested in the Emergent Media class that the comments could be time-based and displayed as callouts, like links.
• Another class idea was a rating system, involving a unit of measure tentatively known as “sprinkles.”