Final Video

Deadline: Tuesday, December 16 (before classtime)
Point Total: This assignment is worth approximately 11% of your project grade (4% overall).

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:00-10:00AM on Dec 16th in CSIC 1122). You supply the video, I will supply the food (you can bring food to share as well if you want but it should probably be breakfast food).

The videos should be a maximum of five minutes followed by roughly 5 minutes of Q/A. As before, I will use a timer to keep us on track (some of you have complained about timers but they are absolutely necessary to maintain fairness in class and they are commonly used at conferences to keep orators on track).

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).

Required Pieces

Each video should include:
  1. A title screen with tagline for your application
  2. Optional: 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). Please be sensitive to your teammates feelings about disclosing personal information in a video (even if the YouTube settings are set to unlisted).
  3. A narrative demonstrating the need/purpose for your application (skits seem to work well here)
  4. An overview of your solution and how you are using at least one sensor in your application
  5. A brief comparison to the most relevant competing applications
  6. A historical look at your design process illustrating 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? At a minimum, you should have full-motion video of your mid-fidelity and final interactive prototypes. 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.
  7. An exposition of your three primary tasks, which can either be done via a skit or as simple interface walkthroughs. This is up to you. For each task, you must clearly show the UI, screen transitions, and user interactions.

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 7AM on Dec 16th on Canvas. 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

As you watch these videos, remember that they are from different versions of this class at UMD or from other intro HCI courses. Thus, they 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).