Individual Design Exercise

From CS160 Spring 2013
Jump to: navigation, search

Due: by 5pm on February 1 25 points


The goal of this assignment is to introduce iterative design. That way, during the main course project, the steps of the design process will be more familiar. You will observe and ask users, brainstorm, prototype, and get feedback.


Most events at Berkeley start 10 minutes after their listed time. Some people need the extra time to get across campus, others do not and end up waiting. To add to the confusion, not all events start on Berkeley time. What can we do with those 10 minutes that is more productive, more interesting, or more entertaining? Maybe it's a mini game show with questions about last lecture using the class projector, or an online poll about campus issues (think budget cuts). Maybe this is a time to check in with your housemates about dinner plans? Or maybe people could really use an app that reminds them when they need to leave the coffee shop around the corner to make it to class by 1:10pm...

How can user interfaces - mobile or not - help you accomplish those goals? No matter what you come up with, it should be something that improves the experience of the first 10 minutes of class, before the official lecture starts.

Your mission is to redesign the experience of Berkeley Time.


Observing people helps designers learn more about their needs, goals, desires, abilities, values, and situation. Talk to at least 3 other people (students, GSIs, professors) about their experiences - don't just extrapolate from your own perspective. Use insights from your observation as background material. One essential part of a designer's role is to frame the problem. There are many different perspectives you might take to change an existing situation for the better with your design. Use the observation material to inform who you will design for (the teacher? the early student? the perpetually late student?) and how you will improve their lives.

Then brainstorm ideas for how you would redesign the Berkeley Time experience. Go for volume when you brainstorm, you should come up with at least a dozen different ideas. Ask a couple of people (from CS160, or your friends) to get together and brainstorm with you, you will find that it's easier to find inspiration when you work together. (For the brainstorm only, you may collaborate with others in class).

Individually, select your favorite idea and give a 1-sentence explanation of why you chose that idea.

Take your selected idea and rapidly prototype it: Draw out your idea with markers on paper. 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. Use any props you think will effectively convey the look and feel of the user experience, but remember to keep it simple. Take pictures that document the prototype (e.g., photos of the screens you drew).

Now you are ready for feedback: find some users to try your prototype. Go to the place you intend your design to be used. Find someone 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.) Given that your prototype is made of pulp, markers, and imagination, you'll have to simulate what would happen by changing index cards. 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.

Use your notes to help you reflect on the feedback you received; distill a list of major insights that could inform a future revision.

Grading Criteria

  • Did you talk to target users to find out what they are currently doing during the first 10 minutes? (5pts)
  • Did you brainstorm at least 12 ideas? (5pts)
  • Did you make a prototype and describe it in your submission (w/ photos)? (5pts)
  • Did you test your prototype with a user? (5pts)
  • Did you write down a list of insights from the test? (5pts)

Submission instructions

Create a Wiki Page for this assignment

Begin by creating a new wiki page for this assignment. Go to your user page - you can get to it by clicking on your name in the top of the site window after logging in.

Edit your user page to add a link to a new wiki page for this assignment. The wiki syntax should look like this:

[[DesignAssignment1-FirstName_LastName|Design Assignment 1]]

Again replace FirstName and LastName with your name. Look at my user page for an example. Then click on the link and enter the information about your assignment. You should upload one file (described below) and in the wiki page, describe any extra credit functionality you implemented and want us to review.

Items to Submit

  • List of insights from observation/interviews
  • 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. You have to complete the remaining steps individually.
  • One sentence explaining why you chose the idea you did for prototyping.
  • Photos+description of your prototype
  • Photos+description of user testing
  • List of insights from testing.

Uploading Images

To upload images to the wiki, first create a link for the image of the form [[File:image_name.jpg]] (replacing image_name.jpg with a unique image name for use by the server). This will create a link you can follow that will then allow you to upload the image. Alternatively, you can use the "Upload file" link in the toolbox to upload the image first, and then subsequently create a link to it on your wiki page. To restrict how large an image is rendered, you can add an argument: [[File:image_name.jpg|500px]].

Add Link to Your Finished Assignment

One you are finished editing the page, add a link to it at the bottom of the page with your full name as the link text. The wiki syntax will look like this: *[[DesignAssignment1-FirstName_LastName|FirstName LastName]]. Hit the edit button for the last section to see how I created the link for my name.

Links to Finished Assignments

Add your submission below this line: