Task Refinement, Storyboarding, and Video Prototyping

Write-up Due: Wednesday, April 10th at 11:59PM
Video Presentations Due: Tuesday, April 9th, 11AM (classtime)

Assignment Overview

In this assignment you will:
  1. Iterate on the tasks and sketches from the last assignment
  2. Create a storyboard for each task along with a written narrative
  3. Create paper or otherwise lo-fi prototypes to support each storyboard
  4. Create a short video of these storyboards using the techniques described in class.

Note: you will not be user testing these lo-fi prototypes for this assignment (that’s the next assignment) but rather focusing on the use-cases of these prototypes. You will very likely learn a lot about the usability, quality, and feasibility of the interface sketches from the last assignment simply by refining the narrative, creating storyboards, and implementing these storyboards as paper prototypes. In the next assignment, we will again iterate on the paper prototypes and run actual user studies.

Task and Sketch Iteration

Examine the interface sketches from the last assignment. If you produced similar designs for all three sketches, try to think of and sketch three independent designs. You need three very different interface design sketches such that you can vote, as a team, on the most promising design and use that for the storyboarding phase (below).

Three Scenarios: Storyboard with Written Narrative
Choose the best of your three interface designs. This is what you will be using as your primary interface for the storyboards and lo-fi prototypes. Explain the proposed interface by describing it in text (referencing the included sketches). Explain the rationale for your choice (e.g., data, platform constraints, or design reasoning and intuition).

Now, develop a written scenario for each of the three tasks that details how the task will be performed with the selected interface. Each scenario is probably one to two paragraphs. Use this narrative to generate three storyboards (one for each task). Each storyboard should have a minimum of six panes.

Note: you should write the scenarios first, then create the storyboards based on the scenarios. The storyboard panes themselves can have a textual description (at the bottom or top) and include talk bubbles (like in comics). The text used here is not meant to replace the written narrative; you need to turn in both.

Lo-Fi Prototypes

Build lo-fi prototypes using the methods described in lecture to support each task.

Short Video Prototype and Write-Up

Create a short video for each storyboard using the lo-fi prototypes. Remember, here you should focus not just on the interface but also the narrative around its use. That is, be sure you both set up the story and show the interaction with your design. Refer to the examples provided in lecture and videos from prior classes for more information on how to create a video prototype. We can loan you a low cost camera if your group does not have access to a camera (please email us as soon as possible if you need us to work with you to arrange this). The video should be a maximum of 4 minutes long.

You will also provide a short report regarding your video-making process (no more than 1 page of text). This should include answers to questions like how you made the video, any interesting techniques that were used, what worked well, what was difficult, how was the video edited, what sort of materials were used for the lo-fi prototypes, etc?

Past Video Prototypes

As promised here are some past video prototypes. Please bear in mind the following:
  1. These video prototypes are from past versions of this course either taught at UMD or at UW (when I was a TA!), so their exact requirements may differ from yours.
  2. I pulled out a range of videos that received between an A and a C+. For the most part, these videos show positive examples but very few are perfect and most can be improved upon. I suggest pulling various strategies/techniques from these videos that you think were done well and avoid those things that you found insufficient (e.g., confusing narratives, blurry cameras, not enough user-interface interaction).
  3. Given these examples, I expect you to do better than my previous courses. You can improve on past failings :)
  4. Remember that your interfaces should be lo-fi prototypes (despite some of the examples below). You will not earn more points for hi-fi interfaces. In fact, points will be deducted.
  5. These videos require our class login/pw to access. I do not want these videos shared widely. I am posting them only for educational purposes. You do not have the right to share them or upload them to any other website. You can only use them for the purposes of this class.

As students used a range of codecs to create these videos, I suggest downloading and using VLC to watch them. To download each file locally, right click and select "Save as..." (or something similar depending on your browser).

Examples from the University of Washington

  1. Cluster
  2. TransTracker
  3. BuddyMap

Examples from the University of Maryland

  1. GrassRoots
  2. StaySafe
  3. Sustainly
  4. FixC
  5. ProactiveParent

Writing Guidelines and Grading (70 pts)


Overall Writing Quality (10 pts)

Make sure your writing is easy to read: ensure it is clear and concise, use section headings, include images in the body of the write-up with appropriate figure numbers and captions, refer to the figures in the body of your text, and check for grammatical errors.

Overview of Problem and Solution (10 pts)

This overview should be a concise statement of the problem you are tackling and a brief synopsis of your proposed solution. This should be a refinement of the problem/solution portion from your last assignment (we iterate nearly everything in this class!).

Description of Selected Interface Design (10 pts)

Your team should discuss and then select the best interface design from the three sketches. Here, you should describe the selected interface design in detail and include justification for why it was selected. This section should clearly indicate the functionality of your artifact and what the interface will be like (described and sketched, explicitly referencing the figures in your text). Add more sketches or annotate them in multiple colors if that helps.

Three Storyboards and Written Narrative (20 pts)

Generate three storyboards (one for each task) that include the stepsa person will go through to accomplish the task as well as a motivating story/narrative. Your storyboards do not have to detail every little step, but they should be dependent upon the design you have chosen. You will be graded on how realistic your storyboards are, whether they show a proper balance with respect to referencing interface elements, and how well they are written to communicate how a person will accomplish the task.

Video Prototype Report (20 pts)

Your report should discuss and reflect on your video prototyping process. Include both aspects that worked well and aspects that were difficult or could still be improved. Your report should be easy to read and free of grammatical errors.

Video Prototype Grading (70 pts)

You will be graded on how well your video illustrates your design. It should present three scenarios, giving a flavor for your interface design and how it will be used. It should properly show the context for interaction (the backstory for the scenarios). It should be appropriately edited and paced (neither too slow to keep a viewer’s interest nor too fast to follow).

We will watch the video prototypes together in class on Tuesday, April 9th. I will prepare a peer critique survey so that we can collectively review the work.

Class Presentations

We will be showing video prototypes in the following (randomized) order in class:
1. Using Smartphones to Increase Condom Use
2. Choosing Healthier Food Options in the Supermarket
3. Pay it Forward UMD
4. Learn to Speak Doctor: Translating Your Medical Tests into Results
5. Energy Conservation Home Monitoring Team
6. Air Quality and UV Index Awareness Team
7. Protecting Activists with Automatic Face-Blurring Video Capture
8. Helping Shoppers Make Smarter Decisions
9. Making Healthy Eating Easier With Maps
10. Increasing K-12 Information Retention through Spaced Repetition
11. Dining for the Deaf
12. Using Mobile Technology to Remove Stress from Commuting
Each video is roughly 4 minutes. We have 12 teams, which means 48 minutes of video. We will also spend about 2 minutes filling out peer critique forms. Thus, (4 + 2) * 12 = 72 minutes. So, timing will be tight for a 75 minute lecture. We will have to smoothly transition between videos.

Deliverable Submissions

Please upload and link to a PDF of your report on your project wiki page. For the video, you can either upload a version to YouTube or link to a .mp4, .mov, etc. version online (e.g., via Dropbox or terpconnect, etc). Regardless, please link to the video as well on your project wiki page.