Interaction Design Projects - Case Study

Video Annotation System Overview

This section is currently being updated. More content coming shortly.


Project Overview

The Video Annotation Project has three key project parts involved and while each is a project in its own right, there is a clear relationship between them. In chronological order;

  • Stage 1a: The Zebra Project - initial development and deployment
  • Stage 2: Project Panda Development
  • Stage 1b: Extension of Zebra deployment in design context

The underlying model of participant engagement which informs the development of the work is a common thread throughout all work.

Project Background

Design Objective: To create an accessible tool for the annotation of video footage while previewing the data.


Underlying Process

From a research context of deployment the underlying process is an important aspect. Empowerment of participants through a consultative process of ongoing user-driven engagement and transparency of process.

Empowerment Process
Empowerment and engagement process diagram (click for larger image). Outlines the general process for maintaining transparency of engagement and process with participants.

Stage 1a: The Zebra Project - initial development and deployment

Design considerations

Assorted screen grabs from the system showing interface and walking through aspects of the interaction flows of users.

Zebra Week view Zebra Video View
1. Weekly Video View. The default view for the system, displays each days video as a scrollable horizontal list. Individual thumb for video feed outlines length of video and level of tagging through colour coding. This gives a visual cue to whether a video contains an item of participant interest/ discussion (click for larger image). 2. Single Video View. Provides embedded video content with contextaul information including Discussion section, ability to tag video and attach files which may relate to the discussion (click for larger image).
Tag Cloud detail Tech Overivew diagram
3. Tag Cloud detail. Shows the usage of tags on this study revolves around names of participants. Some tags describe activities of the participants (click for larger image). 4. Technical Overview diagram. Shows the relationship of capture machine to web server and clients (click for larger image).

Test deployment and usability studies

Project Zebra was deployed in a research lab context to


Stage 2: Project Project Development

Overview: The .....

Two selected scenarios of use

Scenario 1a

Staff member adding their lecture presentation

Description: Staff member wants to add a video of lecture to Panda website for students to view and to keep an online record of the session.

Attributes and interactions involved:

Work and task flow: Staff member creates video file via:

  • Digitised video content of lecture session
  • Profcast (audio over keynote presentation)
  • Garageband (scripted audio over video, stills and associated media)

Options for upload: (note: no web based upload, time out on filesize an issue)

Version 1

  • Video files are mapped from a network home drive directory (video) to Panda server for streaming

Version 2

  • QT broadcaster - stream live video feed from machine to server (when on high bandwidth connection) OR, QT broadcaster - stream a local video feed to server for upload
  • Staff member creates new entry to house video file,selects video file from upload directory, selects ( or creates) appropriate category for video, provides a description and other meta data ( time taken, subject, relevance). Staff member chooses level of access for video (Version 1- annotate or view only) (Version 2- also choose whether annotations made to video are available for all to view or only for creator and annotator)

Associated potential system requirements:

Possible sketches of interaction considerations: TBC

Scenario 1b

Student annotating a lecture presentation

Description: A student views a lecture from a particular course through the system. They replay the lecture after the class on their computer and add their notes to the video stream.

Attributes and interactions involved:

  • Web browser (javascript enabled), Mouse interaction, Sound output
  • Ability to browse and view video material
  • Ability to pause, review and annotate video material for own purposes

Work and task flow:

  • Student leaves lecture and goes to lab
  • Student goes to Panda website and logs into system, using a pre-registered login and password
  • Student looks for Category of required video session ( ie. course code ) and plays back video footage
  • Student pauses video using web-based video controller and adds comments to sections
  • Student highlights areas of lecture for later viewing by dragging or adding timeline markers to a video timeline
  • Student adds tags to video material as a whole and to specific sections of video by selecting the point of the video before adding the tag.

Associated potential system requirements:

  • Version 1- Producer and Consumer/Annotater user types only. All consumers/annotaters have access to all material.
  • Version 2 - Create groups which administrators can associate individuals with. Grouping should occur on the basis of course enrolment.

Possible sketches of interaction considerations: TBC

Sketch designs

Below are some selected whiteboard discusion sketch designs outlining the user interface and the functional attributes of each section.

Whiteboard sketch design


Stage 1b: Extension of Zebra deployment in design context

Architectural firm, lead designers and directors work across two physically distinct cities.

Zebra will be used as an observational tool ( and a tool to elicit participant feedback) to monitor the usage of Scribblr as a collaborative social netowkring solution.

The aim is to use the process of engaging participants in the analysis to help develop further iterations of Scribblr's functionality for this particular design context.

The underlying model of participant engagement which informs the development of the work.

The Process:

Understanding the problem -

Exploring problem space -

Testing the interaction -

Reiteration, training and deployment -

Monitoring the deployment -

The work conducted as Stage 1a of Zebra has been submitted as a long paper for review to CHI 2007. The paper can be viewed here [ PDF - 1.8mb ].

- --------------------------------------- -

Previous interaction design project work can be viewed through the academic section of the website - [ projects ] .