Design Sketches and Critique

Draft Deadline: ThursdayApril 3rd
Final Deadline: Tuesday April 8th

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
The dates are still being worked out, but the plan goes like this:
  • Identify three primary tasks for your application and sketch out a number of screen designs (on paper) to support these tasks.
  • You will bring a set of draft interface sketches to class, where we will use class time to "speed date" from team-to-team and collectively provide feedback on these artifacts.
  • You will have about a week to incorporate that feedback into a final set of sketches and post a report to your Wiki project page.
  • In a subsequent team assignment, you will test paper prototypes of your screen designs (see TA05).

What to Do

  1. To start, read the Sketching and Storyboarding readings (a couple of readings will be required--but there are plenty so you can 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 four to six completely different design sketches (with annotations). I then want you to choose two secondary interface screens and generate two or 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 the draft deadline with this part completed.

  4. In class on the draft deadline 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 each of 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. The storyboard can be like a comic book with characters (stick figures are fine) interacting with your design to accomplish your identified tasks, or they can be step-by-step narrations of how a user would proceed through your three screens to accomplish each of the three tasks you've identified. These should be quick, engaging and expressive ways of articulating the goals and reasons for your application. You may find that you can do this with a single storyboard, or you may need 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 (100 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.

Abstract (5 pts)

We iterate nearly everything in this class. So, this is 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 (30 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. You might include a brief description of how you brainstormed the tasks and what logic you used to cull them 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 be in this section as well, although they also need to be readable. If necessary, you can include small versions here and link to full-size versions in the appendix or on the web.

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

Section 3: Initial Interface Sketches (30 pts)

For the introductory paragraph, describe the concept/idea behind your primary interface screen and the two secondary screens (e.g., what should new users see first and why? how have you facilitated navigation for frequent tasks?). The next 1-2 paragraphs should describe how you approached the sketching process or what you learned by sketching. Then, include three subsections: (i) Primary Interface Screen Sketches, (ii) Secondary Screen One Sketches, and (iii) Secondary Screen Two Sketches. In each subsection, provides a 1-2 sentence description of each screen. I want these sketches in-line in the report itself rather than in the Appendix.

For grading, you will receive up to:
  • 6 pts for introductory content
  • 10 pts for (i) Primary Screen Sketches and descriptions (3 or 4 sketches)
  • 7 pts for (ii) Secondary Screen One Sketches and descriptions (2 or 3 sketches)
  • 7 pts for (iii) Secondary Screen Two Sketches and descriptions (2 or 3 sketches)
  • ----------
  • 30 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 (15 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:
  • 5 pts per refined sketch + description
  • --------
  • 15 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).