Individual Design Exercise, Part 2

From CS160 Spring 2014
Jump to: navigation, search


In this second part of the design assignment, you will turn your observations from last week into design ideas and obtain initial user feedback.You will:

  • brainstorm at least a dozen different ideas
  • select your favorite idea and justify why you chose it
  • create a low-fidelity prototype
  • get feedback from at least one user on your prototype


Brainstorm' ideas for how you would redesign a mobile application to work on the go, while people are walking, bicycling or driving. 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, as long as you list their names on your individual submission).

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). If you are using voice or other sound input, think about how you can draw communicate what can be said or done by the user.

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 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 right 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:

[[DesignAssignment2-FirstName_LastName|Design Assignment Part 2]]

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.

Uploading Images

To upload images to the wiki, first create a link for the image of the form [[File:firstname_lastname_image_name.jpg]] (replacing firstname_lastname_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: *[[DesignAssignment2-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: