Sketches, Storyboards, and Critique

Draft Deadline: Thursday, October 17 (before classtime)
Final Deadline: Tuesday, October 22 (before classtime)

Assignment Overview

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 at the Sketching and Storyboarding readings.

A Brief Timeline
On Thursday, October 17th, you must come to class with draft interface sketches. We will use class time to "speed date" from team-to-team and collectively provide feedback on these artifacts. Note: previously this paragraph stated that you must come to class with your storyboards. While ideally, you would have storyboards for a design critique to highlight the various ways you expect your application to be used, these are not required for Thursday. Instead, you will describe these usages verbally (rather than visually via storyboards).

On Tuesday, October 22, you must post a PDF of your report to your Wiki project page (before classtime).

What to Do

  1. To start, read the Sketching and Storyboarding readings (I've marked the readings that are required--feel free to dig deeper with the optional readings if you're so inclined). 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."

  2. Generate a list of tasks that users should be able to accomplish with your application. This is a brainstorm activity--so ballooning elaboration is essential (the full list of tasks should go in your report Appendix). Then, pare this list down to three primary tasks. Justify why these three tasks were selected in your report.

  3. Think about the interfaces and interactions necessary to accomplish these tasks: what does the "main" screen look like? What are the primary interface elements and why? For the primary interface screen, I want you to create six (yes, only six) completely different design sketches (with annotations). I then want you to choose two secondary interface screens and generate three different design sketches for each. These sketches must be done on paper and scanned in (a high quality cell phone picture is fine too); each sketch must be properly labeled, captioned, and annotated. You must come to class on Thursday, Oct 17th with this part completed.

  4. In class on Thursday, Oct 17th you will explain your application, show off your various interface sketches, and receive design feedback from your teammates. You will take notes on this feedback (please include the raw notes in your Appendix), synthesize the most important findings in your report, and iterate on the most promising sketch designs. For the iteration, you must create at least one new refined primary interface screen sketch and one refined sketch for the two secondary interface screens (so, at least three refined sketches in total). For each new sketch, please provide a justification on the changes--these justifications may be tied to the in-class design critiques or simply your further reflections about the design. Again, these sketches must be done on paper and should be labeled, captioned, and annotated properly in your report.

  5. Finally, create a storyboard of a user (or users) using your application and accomplishing the three primary tasks you identified above. You can think of this storyboard much like the opening skits in some of the presentations. They are quick, highly engaging and expressive ways of articulating the goals and reasons for your application. If your tasks are very disparate and non-intersecting, feel free to create a storyboard to help describe each task. It's up to you. Be creative. Again, this storyboard must be sketched on paper and scanned in. All storyboards should have accompanying text in at least some of the storyboard panes (just like comics or movie storyboards).

The Report (112 pts)

At the top of the report, please include a title (centered and bold) followed by the names of each team member. For each person listed, include 1-2 sentences on their primary role/accomplishments on this assignment.

Section 1: Abstract (5 pts)

We iterate nearly everything in this class. As such, include an updated version of your abstract for your project based on the feedback/thoughts you've had so far.

Section 1: Introduction (5 pts)

Your introduction should focus on describing the primary concept for your application. Again, iterate on previous incarnations.

Section 2: Task Descriptions and Storyboards (29 pts)

This section should start with an introductory paragraph describing, at a high level, the kinds of tasks that you think are relevant to your application. Also include a description of how you performed the task brainstorm and culling down to three primary tasks (include a reference to the Appendix of all the brainstormed tasks here). The next three paragraphs should then be dedicated to describing each of the three tasks in more detail. Begin each of these paragraphs with a bolded inline "task name" header, a brief prose description, and a reference to the appropriate storyboard. The storyboard(s) should not be in the Appendix--do your best to fit them into the report itself.

For grading, you will receive up to:
  • 5 pts for your introductory content
  • 4 pts per task description (12 pts total)
  • 12 pts for the storyboard(s)
  • ----------
  • 29 pts total

Section 3: Initial Interface Sketches (46 pts)

For the introductory paragraph, describe the concept/idea behind your primary interface screen and the two secondary screens (i.e., what purposes are they intended to fill). The next 1-2 paragraphs should describe how you approached the sketching process. Then, include three subsections: (i) Primary Interface Screen Sketches, (ii) Secondary Screen One Sketches, and (iii) Secondary Screen Two Sketches. For each subsection, include a bullet-pointed list that points to each of the sketches and provides a 1-2 sentence description. Again, I want these sketches in-line in the report itself rather than in the Appendix.

For grading, you will receive up to:
  • 10 pts for introductory content
  • 18 pts for (i) Primary Screen Sketches and descriptions (3 pts per sketch/desc)
  • 9 pts for (ii) Secondary Screen One Sketches and descriptions (3 pts per sketch/desc)
  • 9 pts for (iii) Secondary Screen One Sketches and descriptions (3 pts per sketch/desc)
  • ----------
  • 46 pts total

Section 4: Learnings from Design Critique (10 pts)

This should be a 3-4 paragraph section describing the design critique process and your primary findings.

Section 5: Refined Interface Sketches (12 pts)

In this section, describe your three refined interface sketches (or more) and explain what changed and why. Again, include the sketches directly in the report (to the best that you can).

For grading, you will receive up to:
  • 4 pts per refined sketch + description
  • --------
  • 12 pts total

Section 6: Appendix (5 pts)

The appendix should include:
  • A raw list of all the tasks you brainstormed relevant to your application
  • Notes from the in-class design critiques (and, perhaps, other critiques sessions that your team may have run on its own).