Low-Fidelity Prototype Video
Due: before class on March 10, 2014
- 1 Overview
- 2 Requirements
- 3 Deliverables
- 4 Guidelines
- 5 Submission
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 parallel, we want you to start thinking about the feasibility of your design - you will start to investigate whether it is feasible to implement your idea by the end of the semester.
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. (Talk to us if you believe you have a compelling reason to change your 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).
We suggest you create your video using a combination of live recorded segments and a sequence of still images or screen capture videos.
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).
Videos from CS160 Fall 2013:
- Estimated Time of Arrival (ETA): https://www.youtube.com/watch?v=3BAskJ8mwd4
- Giving Goods: https://www.youtube.com/watch?v=Er1WWjd_G10
- Tagit (uses final version of app rather than balsamiq): https://www.youtube.com/watch?v=tNBAKnW2yqM&feature=youtu.be
Videos from CS160 Spring 2011:
- Group Awesomeness - YoDJ: http://www.youtube.com/watch?v=B3-vSO77gTU
- Group CaddyWhompus - photo guide app: http://www.youtube.com/watch?v=-c_fowRFzKo
Videos form CS160 Spring 2010:
- RollCall: http://www.youtube.com/watch?v=jQnfcJ8jZaU
- Beer Tasting App: http://www.youtube.com/watch?v=kHld5DTIWq0
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 paragraph)
- Link to the video
- Discussion of Video Prototyping (1 paragraph)
- How did you make it?
- Any new interesting techniques you came up with?
- What was difficult?
- What worked well?
- Audio Implementation Strategy (1 paragraph)
- What kinds of audio processing will you need to do?
- Any API's you will be using?
- What problems might you encounter? (How feasible is it to build this?)
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 (5 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.
Audio Implementation Strategy (5 pts)
This section addresses different concerns from the prototype.
Describe how you imagine audio and voice input will work in your app, and what your strategy will be to actually implement said features. The point of this is to make sure you've thought about audio processing and feasibility before moving ahead with your project idea. Make sure to tackle what kind of challenges you could face, what API's you would use, and whether something like this can actually be built and work well.
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:
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.
- Group:Ninja Narwhals
- Group:Knock Knock
- Group:Tech Transformers
- Group:Pesto Pasta
- Group:Jalapeño Jaguars
- Group:Bearly A Group
- Group:Laser Cats
- Group:D.E.A.N.S. of Design
- Group:Rad-ish Undergrads
- Group:Melodious Minds
- Group:Gnarly Gnomes