Low-Fidelity Prototype Video

From CS160 Spring 2013
Jump to: navigation, search

Due: before class on March 11, 2010


The goal of this assignment is to learn how to use low-fidelity prototyping in early stage design to present your ideas to stakeholders and to receive feedback and refine your design. For this assignment you will build a low-fi prototype and demonstrate how a user would interact with your system through a video.

In the next assignment you will then perform a simple usability test with the prototype and iterate on your design.


Now that you have had a chance to work with your teammates and develop your project idea, create a team mission statement that describes your goal for the project.

Consider the three tasks you developed in the last assignment. These benchmark tasks should include 1 easy task, 1 moderate task, and 1 hard task and they should give good coverage of your interface. In this assignment you will design a prototype to handle these three tasks and create a video demonstrating the intended interaction for those three tasks.

We suggest you start by sketching on paper. You will then create UI mockups in myBalsamiq, a rapid prototyping tool.

Once you have developed the prototype, you will create a narrated video illustrating each of the three tasks using your proposed interface. Make sure to set up the story at the start of your video rather than just showing the UI interactions (the finished videos should show both).

Video Prototyping

We suggest you create your video using a combination of live recorded segments and a sequence of still images.

There are a number of sources available to you to learn more about creating video prototypes. Here are some examples from previous offerings of this course. Note that some of these examples would not be sufficient for this assignment as they only show UI interactions and are not narrated (both are requirements for your video). In addition, prior courses used paper prototyping. You will use Balsamiq software.

Videos from CS160 Spring 2011:

Videos form CS160 Spring 2010:



Your writeup should follow the outline below and will be graded using the writing and experimentation guidelines detailed below.

  • Each team member’s name and role in this assignment
  • Mission statement (1 paragraph)
  • Prototype description, with sketches/images (1 page)
  • Link to the video
  • Discussion of Video Prototyping (1/2 page)
    • How did you make it?
    • Any new interesting techniques you came up with?
    • What was difficult?
    • What worked well?

Upload your videos and link them on the wiki. You should submit one single video showing all of the tasks in a consistent narrative (preferred!) You should refer to these in your description of the prototype.


Introduction and Mission Statement (5 pts)

The mission statement should represent the common purpose and goal of the project. Each member of the team should agree on and be committed to achieving the mission statement. Describe the role of each team member for this assignment.

Prototype Description (10 pts)

Describe your prototype. Reference sketches/screenshots of the interface screens in your description. Submit images of all screens you used, and also use the video prototype to help describe your system.

Video Prototype (35 pts)

You will be graded on how well your video illustrates each of the tasks and gives a flavor for your interface idea and how it will be used. You should show your prototype being used for at least three tasks, 1 easy, 1 moderate, and 1 hard. You will also be graded on whether the video properly shows the context of how the interface will be used (the back story). Your video must have audio narration.

Discussion of Video Prototyping (5 pts)

Describe your process of how you produced the video. Finally, we will grade you on the description of how you made the video and the critique (positive/negative) of the technique.


Uploading Files/Videos

Upload your file to YouTube and include it with the <mediaplayer> tag as you've done before for your individual programming assignments. Make sure the YouTube video is at least visible to people with the right link (i.e., not completely private - otherwise we cannot grade it).

Hand in Printout in Class

Print your assignment and hand it in at the beginning of class on March 11.

Add Link to Your Group's Page

Edit your group's page to add a link to a new wiki page for this assignment. The wiki syntax should look like this:

[[VideoProto-Group:ExampleGroup|Video Prototype]]

Again replace ExampleGroup with your group's name. Then click on the link and enter the information about your assignment. Be sure to clearly address everything mentioned in the writing guidelines above.

Add Link to Your Finished Assignment

One you are finished editing the page, add a link to it here with your group name as the title link. The wiki syntax will look like this: *[[VideoProto-Group:ExampleGroup|Group:ExampleGroup]]. Hit the edit button for this section to see how I created the link for the ExampleGroup.