Design Sketches and Critique

Assigned: Thursday October 1
Draft Deadline: Thursday October 8th
Final Deadline: Tuesday October 13th
Points: 50 points, 5% of your overall grade

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 (see the reading assignments).

A Brief Timeline
  • Identify three primary tasks for your application and sketch out a number of screen designs (on paper) to support these tasks.
  • On October 8, you must come to class with a set of draft interface sketches (focus is on the interface) and a draft storyboard (focus is on the narrative of use). The operative word is sketch. The artifacts need to be refined enough to elicit helpful feedback from your peers. We will use class time to "speed date" from team-to-team and collectively provide feedback on these artifacts.
  • You will then incorporate that feedback into a final set of sketches and post a report to Canvas by October 13.
  • In a subsequent team assignment, you will test these paper prototypes of your screen designs (see TA05).

What to Do

  1. Read the Sketching and Storyboarding readings that were assigned. I will also post some additional readings in the Resources section a so you can dig deeper 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 low-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. 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 a skit. 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 (a high quality cell phone picture is fine too). All storyboards should have accompanying text in at least some of the storyboard panes (just like comics or movie storyboards).
  4. 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.
  5. In class on Thursday, October 8th you will explain your application via the storyboard, 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.
  6. Iteration of your interface design: based on your classmate's feedback, 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.
  7. Finally, iterate/improve on your storyboard: revise your initial storyboard based on your use of them to explain your product to your classmates, or to incorporate ideas that inspired you in the other storyboards you critiqued. You need to include scans of both before and after versions of your storyboard in your report, with a description of what changed.

The Report (100 pts)


The report score is 100 points, but overall this assignment will be worth 50 points of the 1000 for the semester, and the report score will be scaled accordingly.
The report has a 5-page limit, exclusive of graphics and the Appendix. You will submit two PDFs: one of the formatted report, and the other the same text with all graphics and Appendix removed, to satisfy the page limit requirement.

Title and Top of Report

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. Incorporate a high-level description of the three tasks you identified and what you learned from peer feedback.

Section 1: Introduction (5 pts)

Your introduction should focus on describing the primary concept for your application. Again, iterate on previous incarnations. Briefly discuss how this assignment aided you in the design.

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. You can insert pictures/scans of at just the final version of your storyboard iterations here, but include a description of what changed after the in-class feedback session, and show the draft version (clearly labeled) in the Appendix.


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).
  • The draft version of your storyboard.

Submission

You will submit two PDFs to Canvas.
  1. PDF One: The full report
  2. PDF Two: The full report with all images, tables, etc. removed (and the pages repaginated accordingly). This will be used to assess the 5 page limit. We will deduct 20% for each page over the limit (prorated for partial pages). Note: there can be no other differences between PDF One and Two.