Anchored video annotation

Anchored video annotation

In huge classes with hundreds of students, the students and professors can easily disengage from each another and from the material. This system encourages engagement through video annotation, communication, and information visualization.


The Design Process

UX research

  • Market & Academic Research

    • Literature Reviews
    • Expert Interview – AJ Brush, Microsoft Research
  • User Research

    • Field Research – brief ethnographic study, observed and documented students and teachers during several classes over a period of weeks.
    • Interviews – Interviewed students, professors, Library & Information Services staff.
  • Personas

    • Developed personas based on observed behaviors and demeanors from classroom observations and interviews.


UX Design

  • Design Sketching & Ideation

    • Used white board and paper to ideate and formulate initial interface screens, interaction maps, information architecture and layout. Produced early wireframes in Visio.
  • Video | Teachers video record lecture. Students and teachers can review the video later.

    Annotation | Students can take notes during the lecture or later during video playback. Annotations are anchored to the time stamp in the video.

    Questions | Students can ask questions of teachers or other students during or after the lecture.

    Study Groups | Students can interact with other students in their quiz section.

    Feedback | Professors can get feedback on the lecture from students.


  • Wireframing

    First iteration (circa 2008, co-design with Kevin Wong)


    Home Screen

    From this screen, users can select any of their classes which are using the system.


    Search Results

    Users can search for key terms or phrases within the lecture sections and comments.


    Student Views

    Note-taking View

    Students can take notes during lecture and annotations are anchored to the current time-stamp within the lecture. Students can quickly flag notes as questions or other items by simply clicking an icon.


    Video Review

    Allows playback of lecture video, indexed by section. Students and teachers can identify sections with the most questions or comments by the number to left of the section. This allows teachers to quickly identify concepts that may require more discussion or explanation.



    There are multiple ways for students to ask questions. First, students can ask questions during the lecture via the notetaking view (if the teacher has enabled it), or they can ask questions during video review or in the discussion area.


    Teacher Views

    Recording Screen

    This screen is up during the lecture. The teacher simply hits the start button to begin recording, and hits the ‘break’ button between each topic to index the lecture video for students.


    Discussion Manager

    The discussion manager allows students, teachers and teaching assistants to identify and address questions.



    • Expert and design critiques

    • Present to department chair

    Second iteration (my re-design, circa 2016)

    (IN PROGRESS – more wires and mocks coming soon…)

    Primary design

    Watch class lecture video, take notes, ask questions…

    video review mode for brightly lit rooms

    Anchored annotations

    Sections of the video timeline are highlighted where students have asked questions or tagged their notes.

    yellow marks on video timeline denote questions or notes


    Lecture setup (Instructor view)

    Instructor enters lecture title, description, and adds sections and speaking notes.

    Lecture setup view

    Lecture recording (Instructor view)

    Instructor hits the play button to begin the recording, or stop to pause or stop the recording. During recording, the instructor can stamp the sections or insert new sections on the fly.

    Stopped/paused state

    lecture recording view

    Recording state

    Lecture recording view (during recording)

    Note-taking view – Bright light (Student view)

    Light version for taking notes in brightly lit classroom. Students take notes in the ‘Notes’ area and ask questions or comment in the ‘Discussion’ area.

    note-taking view for brightly lit rooms

    Note-taking view – Low light (Student view)

    Dark version for taking notes in low lighting

    note-taking view for low lighting

    Watch video (Student and teacher view) – Bright light

    View for reviewing video after lectures. Users can still take notes and ask questions.

    Video review screen - bright light

    Watch video (Student and teacher view) – Low light

    View for reviewing video after lectures. Users can still take notes and ask questions.

    Video review screen - low light


    Returns lectures, notes, and discussions.

    Search results pop-up


    Find search terms within notes or discussion.

    search terms highlighted using find feature