Sketches and Storyboards

Due: Tuesday, Mar 8 11:59PM
Point Total: ~15% of your TA grade (6.8% overall)

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 (Lectures 8 and 9) and the sketching and storyboarding readings.

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

A Brief Timeline
  • On Thursday, March 3, you will come to class with your full brainstormed list of tasks, your four 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, March 8, 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, use the brainstorm strategies discussed in class to generate a list of tasks for 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? What about the mobile vs. web experience? 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 four primary (representative tasks). One task should be focused on the mobile experience, one task should focus on the web experience, and the last two tasks are open (do what you think is best).

  3. Sketch four storyboards. For each of the four 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. Each team member 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 twelve primary interface designs. With your team, brainstorm the main interface screens for the mobile and webpage. Sketch six completely different designs for each (12 total). 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 mobile and webpage interface.

  5. Sketch six secondary interface designs. With your team, brainstorm three secondary interface screens to support your tasks (one on mobile, one one web, one open for you to decide. For each secondary screen, you must sketch two different 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, March 3, create one iterated storyboard and one iterated primary interface. Include both the draft used for the design critique and the improved design.

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.

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.