CS 247 · Winter 2015
This class will deepen your fluency with design prototyping and critique for interactive technology. To do this, you'll learn techniques for rapidly brainstorming and prototyping multiple interface alternatives — and why rapid prototyping is essential to excellent interaction design. You'll learn to communicate your ideas visually. You'll deepen your experiences with needfinding and continuous feedback. And you will do all this in a design studio environment, learning to critique and be critiqued with industry leaders who hold years of experience.
Congratulations to the following teams for being picked by our guest judges for the Best in Class awards!
| Week | Studio | Lecture | Assignment |
|---|---|---|---|
1 |
January 5No studio |
January 7Reading: Understanding Comics, Ch. 1-3 concepts: sketching, storyboarding activities: in-class sketching exercises (a la Verplank) |
Due Wednesday, 1/7, 11:59pm PDTSign up for studios
Due Monday, 1/12, 11:59am PDTProject 1, On the Town: visual communication ensure that "finish reading understanding comics" is in the assignment, perhaps with a short response put a whoami.txt file in your dropbox that has your SUID, SUNet ID, and preferred contact email address |
2 |
January 12Studio welcome The art of critique Storyboard critique |
January 14Interaction design for the web I Optional tech training: Sketch 3, InVision concepts: review of {whitespace, typography, color}, collections and mood boards, cascading style sheets use this lynda video for concepts to draw on activities: rapid exercises to create whitespace, improve typography, improve color, etc. for a sample mobile site. Typekit: make a poster for your dorm or off-campus neighborhood. Use Typecast. (Alternate: style a how-to tutorial for Photoshop.) activities: rapid prototype a mobile homepage layout for your major or department in 20 minutes using proto.io tools: proto.io, Sketch3, HTML+CSS |
Due Tuesday, 1/20, 11:59am PDTProject 2, Hello World: mood board, sketches, and mocks portfolio inspiration board, five portfolio concepts (sketches and rough mockups) and two portfolio prototypes (mid-fidelity mockups in Sketch3/proto.io). If they already have a portfolio, variety is the spice of life, so please leave that one behind for the purposes of this assignment and consider this an opportunity to try out a redesign. consider who the user is of your portfolio, what they want to know. include sketches |
3 |
January 19MLK Day: no studio staff write up feedback before Wednesday's lecture, and email it by the conclusion of Wednesday's class January 20th (Tues) 8:30pm: |
January 21Interaction design for the web II Studio huddle for feedback on portfolio ideas 30min concepts: web UI approaches activity: show your parallel portfolio concepts to table and get critiques activity: get your CSS to match a template page we provide. for extra kudos, make it look as good as you can and we'll showcase it to the rest of the class. tools: CSS, JS, HTML5 |
Due Monday, 1/26, 11:59am PDTProject 2, Hello World: Revision and implementationpart I. write up the critiques you received on your parallel prototypes, and what it's going to influence you to do. part II. create your revised portfolio using html+css |
4 |
January 25Portfolio sharing and critique |
January 27P3 introduction Reading: Patnaik on Needfindingor sketching user experiences or bootcamp bootleg brainstorming+needfinding activities? please nominate any good ideas here concepts: what is a need, idea generation, brainstorming at volume, brainstorming as a team activities: need elicitation practice, on-campus needfinding activity for transportation right at a class boundary (do it from 2:55 to 3:25 to capture classes changing) |
Due Monday, 2/2, 11:59am PDTProject 3, Design Sprint: Needfinding and brainstorming basic project prompt: ambient or whole-body interaction in a room/public space. Exact domain is driven by your studio theme, but needs to have some element of public space or embodied interaction in a room. Assume you have a webcam pointing at a wall, we'll write a localhost Python background subtraction routine that you can access via Javascript (a la Myron Krueger). You get a projector pointed at the wall.
The assignment will basically have three components: 1) go do needfinding and synthesize what you see. 2) brainstorm, 3) implement a highly targeted prototype. Number 3 is critical, you only have a week, so you need to be very targeted about what you prototype. Take on too much and you'll be sunk. You can prototype a lot in a short period by focusing on the most important components to get across the idea one of the prototypes is a dark horse project prompt, parallel prototype 2: project prompt, parallel prototype 3: unspecified and determined by each studio --- pick your need within the studio theme limits and design for it |
5 |
February 2Needfinding and brainstorm critique |
February 4Parallel prototyping and rapid iteration Reading: Prototyping dynamics Concepts: not waiting too long to get feedback, prototype science (dow+klemmer) Activity: *start the feedback component with this, before you lecture about it, maybe after a break?* Classroom experiment given a design prompt. 1/3 of room gets 30min to get as far as they can using any tools, but can't get feedback until time is up ("demo time"). 1/3 of room gets to request feedback once. 1/3 of room must do it at least three times but no limit. evaluation by peers? objective evaluation on a benchmark task? Activity: brainstorm and (bodystorm) prototype a solution to make the airline boarding process more enjoyable |
Due Monday, 2/9, 11:59am PDTProject 3, Design Sprint: prototypes and feedback final presentations in studio on Monday |
6 |
February 9Final P3 critique |
February 11P3 project reports (one team per studio) TAs and instructors during class select one to present from their studio to the rest of the class. 2min*6teams, about 15min P4 introduction 5min Presenting and critiquing design work Due: Project 4: Team selection and needfinding plan Activity: sketch how you might present your P3 in your portfolio. OK, now do it as a poster. OK, now do it as a few slides for a pitch. |
Due Feb 14/15/16 (deadlines by studio)each studio TA organizes a needfinding trip for that studio's theme --- would probably need to be on Thursday due to ski trips over the long weekend? make sure it's announced in advance basic project brief: multiples. think about interactions that people have at different size scales (watch, phone, laptop, wall). or at different time scales (seconds, minutes, hours, days). design for a need that crosses several different size or time scales. project brief, parallel prototype 2: visualization. find an information need that is relevant to your studio theme. produce an interactive system that helps people understand their data in a new or insightful way. project brief, parallel prototype 3: studio-specific. you choose a group and need that is relevant to your studio and go wild. deliverable: report on needfinding, photo capture of their brainstorm with at least twenty ideas, and more developed sketches of five best ideas question for staff: should we give teams more responsibility in P3/P4 for determining their own schedules? it's an important skill. it would mean getting rid of the interim submissions. another approach with less grading burden would be to require the milestones (grade off by full letter grade for assignment if not submitted and up to snuff), give feedback and warn if not going well, but no rubric-based grade until the end. Michael continuing to brainstorm. Here's my suggestion: we launch all deliverables for P4 at the same time. They will be due at specified times, but we'll encourage teams to work ahead of schedule to get more iterations in --- +2.5% extra credit (up to 10%) on the overall project for each additional substantive iteration of prototype/user study. |
7 |
February 16Presidents' Day: no studio staff write up feedback before Wednesday's lecture, and email it at the conclusion of Wednesday's class |
February 18Social Computing and Computer Supported Cooperative Work Guest lecture on social computing and CSCW Peter Deng? Julie Zhou? Identity team lead @ FB? Nominations open. Reading: Ackerman's Socio-Technical gap, up through Section 3.1 |
Due February 21/22/23Project 4: Needfinding and brainstorming user feedback on that prototype will happen in studio via "Attack of the Users" (peer testing) |
8 |
February 23Needfinding and idea critique |
February 25Guest lecture on mobile and ubiquitous computing Johnny Lee? Jan Chipchase (if local)? Scott Forstall? Nominations open. P4 prototype sharing (one per studio) Reading: The Computer for the 21st Century Concepts (too much of a smorgasboard right now): designing for mobile, gestural interaction, Fitts' law, experience sampling studies |
Due February 28 / March 1 / March 2Project 4: prototypes, feedback, and skeleton implementation |
9 |
March 2Critique prototype |
March 4Quiz on readings and lectures Studio instructor riffs [1] [2] [3] [4] studio instructors can nominate 15-30min concepts and activities they'd like to see the class learn, and come present them. A great chance to introduce advanced topics, e.g., motion graphics, long-term feedback+iteration, product development processes |
Due March 7/8/9 |
10 |
March 9Critique prototype |
March 11Guest lecture on aesthetic design and interactive art Scott Snibbe? Camille Utterback? Nominations open. [1] [2]Reading: A Touch of Code (optional) alternate: P4 war room: feedback and iteration |
Due March 13 @ 5pmProject 4: User study, iteration, and final presentations Final presentations: March 13, 5-8pm @ Cubberley Auditorium |
