Deadline: Tuesday, December 15, 7:00AM (Final Exam).
Points: This assignment is worth 40 points (about 9% of your team project, 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:00AM-10:00AM December 15 in CISC 2117). You supply the video, I will supply the food.

The videos should be around seven minutes followed by 3 minutes of Q/A. I will use a time and be very strict about staying on track, so that every team has the same amount of time. AND we will start PROMPTLY at 8 am -- though I advise you to get there a little early to get some coffee and breakfast, and a good seat.

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 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). 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 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 ideally you will have recorded video along the way.
    2. You should include video shot of the TA05 and TA08 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 7AM on December 15th on Canvas. If you use a video sharing website like YouTube, you can make the link private if you do not want it publicly viewable.

  7. Briefly discuss your video making process in TA08 - Usability Testing and Report.

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