Sketches and Storyboards

Due: Tuesday, Oct 18 11:59PM

Assignment Overview
Sketching is critical to (interface) design--it serves a communicative function to articulate thoughts/ideas visually with your team and clients, it's lo-fidelity nature makes it more open to critique, and sketches serve a thoughtful/reflective function--the act of sketching is a dialogue with one's self. As Suwa and Tverskey (2002) note "designers do not draw sketches to externally represent ideas that are already consolidated in their minds. Rather they draw sketches to try out ideas, usually vague and uncertain ones. By examining the externalizations, designers can spot problems they may not have anticipated."

Your assignment is to sketch interface ideas for your project, identify three scenarios of use, and create storyboards depicting those uses. Your focus here is on visuals and visual storytelling rather than prose (whew, after TA02, right?). To help you with the assignment, please look over the sketching & storyboarding lectures and the following readings, which will be covered on the midterm and/or in-class quizzes.

Note: this entire assignment must be done on paper in your sketchbooks.

Readings

  1. Complete the readings from the IA06 Sketch assignment
  2. Read Johnny Holland's three part series on Storyboarding and UX Design--part one and part two (part three is optional).

A Brief Timeline
  • On Thursday, Oct 13, you will come to class with your full brainstormed list of tasks, your three selected tasks, two draft storyboards, and three draft primary interface sketches. The operative word is sketch. The artifacts need to be refined enough to elicit helpful feedback from your peers. Teams will be paired for design critiques.

  • On Tuesday, Oct 18, you will submit your final PDF.

What to Do
  1. Brainstorm list of key tasks to support. Based on the results of your formative user research and your discussions as a team, identify key tasks of your application. Go broad. Elaborate. Our focus here is on getting the right design and not yet on getting the design right. When you get stuck, think about your target users? What are their key needs--how will you help them? Your full list of tasks, organized into higher level categories, should go in your report Appendix.

  2. Discuss task list, cull, and focus. Discuss your list of tasks with your team. Pare it down to three primary (representative tasks). At least one task should include using the device's sensor.

  3. Sketch three storyboards. For each of the three tasks, create a minimum six-pane storyboard (maximum 12-pane). The storyboard should clearly establish who the user is, their motivation for using the app, and the user experience. Three of your four team members should take responsibility for a storyboard. The storyboard should include a title and a subtitle, which is a brief description of the task (1-2 sentences). Note: though this task is listed separately from Steps 4 and 5 below, the zoom-in shots in the storyboard panes will likely use interface designs you used in those steps.

  4. Sketch six primary interface designs. With your team, brainstorm your primary interaction screen (e.g., the screen that shows when you first open your application--think Facebook, Instagram, Twitter, etc.). For each, sketch out six different designs. By different, I literally mean completely different ways of rendering your interface--not simply moving a button from one corner to another. These sketches should be large; each sketch should take up at least half a 8.5" x 11" sketchbook page (if not the full page). Use annotations to help explain the interface and expected interactions. Each sketch should have a caption as well. Star your favorite designs.

  5. Sketch six secondary interface designs. With your team, brainstorm three secondary interface screens to support your tasks For each secondary screen, you must sketch two unique designs (6 total). Note: each of these can follow thematically and stylistically from the designs in Step 4 or can be completely different. You decide. Again, use annotations to help explain the interface and expected interactions. Each sketch should have a caption as well. Again, star your favorite designs.

  6. Sketch one iterated storyboard and one iterated primary interface. Based on the design critique in class on Thursday, Oct 13, create one iterated storyboard and one iterated primary interface. Include both the draft used for the design critique and the improved design.

Submission
Every storyboard and interface sketch should have an appropriate title and number. Scan in your sketches (or use your smartphone camera to capture them--but make sure they are extremely legible if you do this). Aggregate them into a PDF and include an appendix that has: (i) a picture of the raw list of tasks that you brainstormed and (ii) notes from the in-class design critiques. Submit the PDF to Canvas.

Examples

Here are a few high-quality examples from previous semesters. Note that we change our assignments each year (from small changes to significant overhauls), so please follow the instructions in this assignment and the rubric closely.

Rubric
You can download the rubric as an Excel file below:


We've also taken a screenshot of the rubric for your convenience. You can click on the image below to enlarge.
TA03-SketchesAndStoryboards-GradingRubric_v1b_MLM_cropped_650w.png