Interactive Prototype II and Video

Due: Wed, Dec 14, 8-10AM (Final Exam Slot)

Assignment Overview

There are three primary goals to this assignment:
  • first, to polish and finalize the graphic and interaction design of your semester project;
  • second, to gain experience creating a video that helps motivate and depict your interactive application; and,
  • third, 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 final, interactive prototype.

We will watch these videos in class and collectively vote on our favorite prototype and video. Top projects and videos will be listed on the CMSC434 webpage (here's Fall 2014 and Spring 2016).

Note: this assignment is worth slightly more than others because it represents a culmination of work across the semester. This is often a chance for previously struggling teams to finish strong and gain more points for their final grade.

Final Prototype

The final prototypes will be evaluated based on: the evolution from early sketches, design decisions grounded in critiques and user testing, and the overall application of IxD and graphic design principles discussed in class. We will evaluate these things based on their presentation in the video. We will also perform random, spot-check code reviews on github. All code should be commented and sources referenced. A brief project overview and instructions on how to run the code should be included in the github readme file.

Final Presentations

Each team will have a total of 7 minutes to present their projects, including 3-5 minutes for the video followed by roughly 2-3 minutes of Q/A--during the CMSC434 finals slot (8:00-10:00AM in same room as always, CSIC2107). You supply the video, I will supply the food (you can bring food to share as well if you want but it should be breakfast food). I will use a timer to keep us on track.

The Video

The video should be long enough to include the following pieces but no longer. Concision is encouraged. I think you should aim for ~3 minutes but 4 minutes might be more of the norm.

Video Pieces

Each video should include (in any order--pick an order that makes the best sense for your project):
  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

  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 paper prototypes, mid-fidelity and final interactive prototypes (there is not time to comprehensively walk through the three tasks on the lo-fi, mid-fi, and final prototypes, so the focus here should be on showing progression). 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 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. It's helpful to include some kind of title screen or online text to help the audience track the tasks.

Video Creation Process

  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 including: 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. Upload the video to YouTube and send us a link to your video by 7AM on Dec 14th on Canvas. You can make the link "unlisted" if you do not want it to be publicly viewable.

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.

Examples from this Course

  • The "Paintdrip" video from CMSC434 Fall2014, which won the top project award that semester [link]. The video is clean, has an oral narrative mixed with on-screen text, provides a nice problem statement and overview of past work, provides a wonderful exposition of the design process and how the designs changed over time, and fluidly integrates real demos of their actual application.

  • The "Proactive Parent" video from CMSC434 Sp2012 is wonderfully scripted with fantastic production quality [link]. 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).

Examples from Other Courses

  • 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 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 [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. [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. [link]

Tips and Tricks

  • Pacing is important. A common trap is making video sequences too long. The video should have a fast and crisp pace, moving from one thing to the next fluidly. This will take iteration. You're likely not going to nail this on the first edit.

  • 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 if it fits the tone of your subject (but be professional)

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


You can download the rubric here (a screenshot below, which you can click to enlarge, is included for your convenience)