Multimedia Annotation & Composition Tool for Columbia University

Project Dates: 2010-2011

Partners: Columbia University Center for New Media Teaching & Learning (CCNMTL), Columbia University Faculty

My Roles: Application Strategy, User Research, UX Design, UI Design, HTML and CSS


Many would say the digital landscape today offers an overabundance of potential educational resources, but these materials can actually hinder scholarship if they cannot be corralled with ease into analysis by instructors, students and researchers.

Serious study of multimedia objects is often particularly difficult because the focus, specificity, and proof that scholars have come to expect in text-based work can be thwarted by the very real difficulties of interweaving source material with analysis. The effort of selecting and recontextualizing pertinent pieces of text within critical discourse seems nostalgically simple when compared to the logistical challenges of invoking source materials across a range of formats and hosted in a variety of places, often with divergent rules and permissions.

MediaThread is an innovative, open-source platform for scholarly exploration, analysis, and organization of web-based multimedia content.

The MediaThread environment connects to online image and video archives, enabling users to lift items out of these sources and into the analysis environment using a simple browser-installed bookmarklet. Items can then be clipped, annotated, organized, and embedded into essays and other written compositions, allowing users to formalize thinking, clarify interpretations, and improve arguments with evidence.

Introductory Video

Annotation Creation


The MediaThread annotation tool makes serious study of multimedia objects possible across a range of formats. Selecting and contextualizing pertinent pieces of larger works allows for interweaving of source material with analysis. 

While this may seem simplistic by today's standards, it was innovative in a number of ways while we were working on it. Our work preceded annotation tools like those now YouTube and Flickr; we were experimenting with writing and drawing on top of media before any other examples of work like this were available. The rudimentary nature of CSS at the time meant that we had to experiment with using Javascript to detect viewport size and display and size elements accordingly, long before the days of responsive design.

Media With Collaborative Class Annotations


MediaThread especially supports collaboration. Groups of users can build and publish projects together, incorporating items that they have collected independently and even relevant annotations made by others outside the group. 

Collaborative annotation of media of different types and from different sources was seen as nearly impossible from both a technological and a legal standpoint when we began work on MediaThread. 

Panel Design  |  High-Fidelity Wireframe


The variety of workflows inherent in ongoing research (reviewing an assignment, collecting evidence, writing and embedding evidence) necessitates that all screens be available to users, in differing combined views, at all times. This vertical panel model I designed for the second iteration of the tool was extremely unconventional at the time, but was essentially a precursor to navigational patterns now quite common in mobile and tablet-based application design.