Final Video

Deadline: Tuesday, May 13, 10:00AM. This will give us time to download the videos on to a single laptop for viewing during our finals slot (May 16th, 8:00-10:00AM)

Assignment Overview

There are two primary goals to this assignment: first, to gain experience creating a video that helps motivate and depict your interactive application; and, second, to show the design evolution of your project from your initial ideas, to the sketches and storyboards, to the paper and mid-fidelity prototypes, and finally to the current incarnation: the interactive prototype. Each team will have 10 minutes to present their video during the CMSC434 finals slot (8:00AM-10:00AM May 16). The videos should be around seven minutes followed by 3 minutes of Q/A. You supply the video, I will supply the food.

Have fun with this assignment. For many of you, it will be your first video assignment at UMD. Pacing is important. Like everything in this class, brainstorm, sketch, and prototype ideas and get feedback before committing effort to one idea in particular. Use music. Use humor (but be professional).

The video should be a brief but comprehensive look at your application and all the work that you've done this semester.

Required Pieces

Each video must include:
  1. A title screen with tagline
  2. An introduction of all team members including names, year in university, and majors (this can be on the title screen or you can do the intros in a creative fashion--e.g., Brady Bunch style).
  3. A narrative demonstrating the need/purpose for your application
  4. An exposition of your three primary tasks, which can either be done via a skit or as simple walkthroughs of your prototype. This is up to you.
  5. A brief comparison to the most relevant competing applications
  6. A historical look at the evolution of your designs from initial ideas during the "pitch" period to the sketches and storyboards to the final interactive prototype (and everywhere in between) along with critical learnings from your user testing and design critiques. Try to be creative with this retrospective and focus on key points! Think about your audience, what are the key take aways from your design evolution? How did things change and why?
    1. At a minimum, you should have full-motion video of your final interactive prototype. For the other deliverables, you can use static screens (e.g., of the sketches, storyboards, paper prototypes) though I realize some of you may have recorded video of this as well.
    2. You should include video shot of the TA05 and TA07 user testing sessions. To the best of your ability, you must protect the anonymity of your participants.

What to Do

  1. Begin by brainstorming with your group on how you want to structure the video. Do you want a skit? How do you want to show the three tasks? Look at the example videos below for inspiration.

  2. Then write an outline of the basic structure of your video. There are two high level pieces: the narrative of your application and its usage (this is the "storyboard" or "skit" part) and then the exposition of your design process including sketches, storyboards, and the various prototypes as well as key findings from your user testing sessions and design critiques.

  3. Film the required scenes. You can use a smartphone, GoPro, DSLR, or any other video camera you can get your hands on.

  4. For recording your final interactive prototype, you can use an external video camera (e.g., to capture both the user, the interactions, and the screen at the same time), screen recording software (e.g., Quicktime or TechSmith's Camtasia Studio), or some combination of the two.

  5. Edit the video (and shoot more video as necessary, the process will likely be iterative). You can use whatever tool you want to make the video include Windows Live Movie Maker, Adobe Premiere, Adobe After Effects, Final Cut Pro, iMovie. Recall that UMD students get free access to Adobe tools (link).

  6. Send us a link to your video by 10AM on May 13th (e.g., via Dropbox, YouTube, Vimeo). If you use a video sharing website like YouTube, you can make the link private if you do not want it publicly viewable.

  7. Discuss your video making process in TA09.

Some Example Videos

These example videos are meant to give you ideas and to inspire your creativity. As you watch them, remember that they are from different intro HCI courses, and do not fulfill all of this assignment's criteria.
With the exception of the YouTube links below, I suggest downloading the movies locally before watching rather than viewing them in your browser. You may need VLC.
  • Anand Agarawala's video demo (YouTube) from his HCI class at the University of Calgary (Anand went on to create BumpTop for his MS thesis at Toronto, which was eventually acquired by Google; see him talk about that experience here). Anand's video shows how energy, creativity, and some fun can be used to highlight a project.

  • This "Buddy Map" video from UW CSE440 Fall2007 uses paper prototypes only but does a great job of showing off the three primary tasks in the interface and in creating a narrative around these tasks. The video also shows how costumes, a backdrop, some music, and a bit of humor can go a long way in creating an engaging story and in demonstrating the importance of the interactions in the application [source link].

  • This "ParkSmart" video from UW uses mid-fidelity prototypes but, again, does a great job of motivating and demonstrating their application via story. Also, they use background music to help create a rhythm, pace, and atmosphere in their video. [source link]

  • This video from UW comes from a "Visual Communications and Design" course but does a beautiful job of presenting the user interface and interactions. A voiceover or some subtitles would have made the video more engaging as would some motivation/context. Note: this video does not have a narrative; it simply shows a walk-through of their interface. [source link]

  • Finally, the "Proactive Parent" video from CMSC434 Sp2012 is wonderfully scripted with fantastic production quality. The video manages to show the three primary tasks within a coherent, motivating narrative that works really well. Note: this video was of a mid-fidelity prototype (the Sp2012 course had two video assignments one around the 9th week of class and the other for the final). [source link]

Tips and Tricks

  • Carefully choose background music to help set the proper tone in the video and to build engagement. Without music, a movie can feel flat (see parts of the "Buddy Map" video). Make sure, however, that the music fits with the mood/personality of your narrative and doesn't actually take away from what you are presenting (read: it should not be distracting).

  • Be creative. Have fun (e.g., Anand Agarawala's video demo)

  • The video doesn't have to be perfect. You can shoot all of the video with your smartphones, for example. I completely understand the time constraints of the class. Carefully spend your time on the most important parts of the video. If there are small editing mistakes, so be it.

  • Use subtitles, voiceovers, and/or title screens to help transition from the primary parts of your video (e.g., from one task to another).