Assignments‎ > ‎

Week 02: Human Centered Design & WebApps

The Due Date for these assignments is 23:59 HST 3rd Feb (Sunday)

Learning Objectives Addressed This Week

  • ACM NC/MobileComputing [elective]  #4. Describe areas of current and emerging interest in wireless and mobile computing, and assess the current capabilities, limitations, and near-term potential of each → Looking at Mobile Web Apps this week
  • ACM HC/BuildingGUIInterfaces [core]  #4. Observe a user attempting to use the application and have the user critique the application  get feedback from people waiting in line

0. Respond to the instructors comments and/or questions on your blog post from week 1

1. Watch the "No this really is the proper introduction" video:

2. Watch video on Survey Results from "So you're taking an online class with Dr. Joseph" 

3. Watch video on web apps

4. Install a mobile development and emulator package (optional)
5. Blog a screen shot of running a mobile emulator or your HTML mobile site on Dropbox (optional)   

6. Add the instructor to your blogger blog (if you are on blogger), so he doesn't have to type in spam captchas every time he posts a comment on your blog ...

7. Watch video on Assignment

8. Watch week 1 and week 3 of Scott Klemmer's Coursera HCI Class and do the in lecture quizzes

9. Complete the following Human-Centered Design Exercise (modeled on an assignment from Scott Klemmer's CS147: Introduction to Human-Computer Interaction Design, Fall 2011).  Note this is a complete project in microcosm - by prototyping a particular idea here you are not committing to working on it for the rest of the semester.

"How many designers does it take to replace a light bulb?"
Designer: "Does it have to be a light bulb?"

Think about some of the designs that you consider to be great innovations. Quite likely, they came about because the design team was able to see a new problem or opportunity, or reframe things in a new way. As the light bulb joke illustrates, an important strategy of successful designers is to reframe things so that ... we can see things in a new light. This week's exercise is intended to work your perception and reframing "muscles". How creative can you be? (Later exercises will work different "muscles".) For this first project...

Your mission is to redesign the experience of waiting in line.
An important part of the designer's role is to come up with a point of view. For example, your point of view might be that standing in line is intrinsic, but being bored isn't. What can we do with our time that is more productive, more interesting, or more entertaining than just wait? Maybe it's reading the news, playing a game, or preempt the parents by giving them a surprise call? Alternatively, your point of view might be to eliminate the line by preordering, or hire people to act as placeholders in the line? Or maybe this is precious time for us to do nothing? A few minutes to space out, or quickly center ourselves. No matter what you come up with, it should be something that improves the experience of standing in line. You encouraged, but not required, to prototype ideas that use a smartphone in some way.
This assignment will introduce iterative design so that during the main course project, the steps of the design process will be more familiar. 
  1. Observing people helps designers learn more about their needs, goals, desires, abilities, values, and situation. In this assignment, the nice folks at Stanford bootstrapped this process for you by observing and interviewing people about standing in line. You can find the video here. Go through the video. If you like, observe and interview line-waiters yourself. Use insights from it as background material, and brainstorm ideas for how you would redesign the waiting in line experience. Go for volume when you brainstorm, you should come up with at least 20 different ideas. Ask a couple of people to get together and brainstorm with you, you will find that it's easier to find inspiration when you work together.

  2. Select your two favorite ideas and give a 1-sentence explanation of why you chose each.

  3. Take these two ideas and rapidly prototype them. Really rapidly. No computers. If it's screen-based, use 3 x 5 index cards and a sharpie. Anything that won't fit is too detailed. Go for very, very simple. If your idea is more conceptual, rapidly prototype the experience however you see fit. Use any props you think will effectively convey the look and feel of the user experience, but remember to keep it simple. As a rule of thumb, each prototype should take about a half-hour to produce. Take pictures.

  4. Now you are ready for feedback. Pick one of your prototypes and find people (people really waiting in line) to try it out. Go to the place you intend your design to be used, people who will use your prototype as if it was a real application. (Explain that you'd like their help, and that it'll take 5-10 minutes of their time. If the activity is quick, we recommend trying it on at least 5 people. If it takes some time, at least 3 users should be fine.) Given that your prototype is made of pulp, markers, and imagination, you'll need to be an active operator. For example, if a user "clicks" a button, you simulate what would happen by changing screens (new index card). Do not tell the user what to do. Prototypes are a probe; a way to get feedback and learn how to improve your design. Success is not blithely saying "people really liked it" but rather "I learned all of these cool things that will make the design better". Iterative design is about "failing" early and often, in order to rapidly arrive at a great design. Take notes and pictures of what users do and say. Pay attention to when people get confused or if they offer feedback on what they liked or didn't like.

  5. Use your notes to help you reflect on the feedback you received; distill a list of major insights that could inform a future revision. These insights should require some reflection on your part; it is not just taking what users take point blank.
  • Full list of ideas you brainstormed. Express your ideas as "headlines", explaining the main concept in less than one line.  For this brainstorm, you can work with as many people as you want (inside or outside the class). So their contribution is acknowledged, list their names.

  • For each of the two prototypes, one sentence explaining why you chose it.

  • Photos of your prototypes

  • Photos of user testing (make sure that at least one photograph shows the setting of the test so we can see it's an authentic setting.)

  • List of insights from user testing
Submission should take place by creating a blog post that includes all the above components, and posting a direct link to that blog though the assignment submission system.

Once you have submitted your work, please complete the self-grading form below.


Sam's version of Assignment 2  Don't look at this if you want to avoid being polluted by my ideas :-)

The Due Date for these assignments is 23:59 HST 3rd Feb (Sunday)

Evaluation criteria & Grading rubric

Grade value 100 points

Once you have completed the assignment, please use the self assessment form to grade yourself