Informatics 131: Human Computer Interaction

Winter 2014 // UCI Department of Informatics // Ellie Harmon

Admin // Schedule // Sketching // Reading // Design

Design Project Overview

This project is meant to give you hands-on experience with a variety of techniques for HCI design. By the end of the quarter you will have engaged in substantive individual as well as group work, and should have material of appropriate quality for including in a portfolio to demonstrate your knowledge of HCI methods.

Possible project topic areas will be defined in class during week 2 of the quarter.

For weeks 3-5, you will engage in individual exploratory user research related to your chosen topic area.

For weeks 6-10, you will develop the project further in a collaborative group, working through data analysis, prototyping, and initial user evaluation.


The project counts for 45 points of your final grade. Grading will be split into 5 major milestones, plus a final report. Each milestone is due at the beginning of class, on the date specified. All assignments should be turned in in hard copy form in class.

D0: Topic Identification - 1 point
Due in class, Tuesday, January 21 (week 3)
D1: Individual Research Due - 10 points
Due in class, Tuesday, February 11
D2: Making Sense of Data - 5 points
Due in class, Tuesday, February 18
THIS IS A GROUP PROJECT. Only one member of your group should upload a file to EEE.
D3: Brainstorming Report - 5 points
Due in class, Tuesday, February 25
THIS IS A GROUP PROJECT. Only one member of your group should upload a file to EEE.
D4: Storyboards - 4 points
Due in class, Tuesday, March 4
THIS IS A GROUP PROJECT. Only one member of your group should upload a file to EEE.
D5: Paper Prototypes & Evaluation - 8 points
Due in discussion, Friday, March 14
THIS IS A GROUP PROJECT. Only one member of your group should upload a file to EEE.
Final Report - 12 points
Due no later than 3:30pm, Thursday March 20 LOCATION TBA

Project Milestone Details

More detailed requirements for later milestones will be added as the quarter progresses.

### D0: Topic Identification

Due in class, Tuesday, January 21 (week 3)

For this milestone, all you need to do is sign up for a project topic online here: Please include a comment with your signup that identifies a possible location for conducting observations as required for the first milestone of the design project.

Alternately, you can turn in a short statement in class on Tuesday January 21 which identifies which topic area you would like to do your project in, and a site for the observational part of the study.

For example,

Topic Area: People’s experience of their surroundings
Observation Site: Aldrich park

Topic Area: The transportation experience
Observation Site: Campus parking lots or the bus stop under the bridge

This assignment is only worth one point! Do it, and you get the point. Don’t turn it in, or turn in something incomplete, and you don’t get the point. Pretty straightforward.

D1: Individual Research Due

Due on eee no later than the start of class, Tuesday, February 11

This milestone will probably take the most work! That is why you have three whole weeks to do it. Don’t wait until the last week or you won’t be able to finish! However, if you complete each of the three sections of the project during the week in which we talk about it in class, it should be pretty straightforward to finish.

What to turn in

Please combine all relevant pieces into a single word or PDF document, and turn this document in on eee no later than the start of class time on Tuesday Feb 11. Your name and Student ID should be clearly marked on the front page.

A zip file containing

More details below

1. Observations

You should conduct observations totaling at least 40 minutes, at at least 2 different times or locations. All observation periods should be at least 15 minutes long. For example, you might observe for 20 minutes at Peet’s and 20 minutes at the campus Starbucks. Or, you might spend one hour watching people in Aldrich park in the morning, and 20 minutes watching people in Aldrich park again in the evening. More is better.

What to turn in:

2. Interviews/Contextual Inquiry

You should conduct at least 2 interviews, lasting at least 15 minutes each. You should record the interviews. There are many tools for making recordings, you should be able to do it on your phone or laptop fairly easily. If you do not have access to a phone or laptop with recording capabilities, contact the instructor ASAP for assistance.

One interview will be conducted during discussion on Friday, January 31. At least one additional interview should be conducted with someone who is NOT a member of this class.

What to turn in:

3. Cultural Probe/Collage/Additional Interviews

For this assignment, you will either design and deploy a cultural probe kit to at least 1 person AND get it back from them. Or, you will facilitate a collage session with at least 2 people. A collage session should last at least 30 minutes. Or, you will conduct at least 2 additional interviews.

What to turn in:

D2: Making Sense of Data

Due no later than the start of class on, Tuesday, February 18

THIS IS A GROUP PROJECT. Only one member of your group should upload a file to EEE.

There are three deliverables that are part of this assignment:

  1. A photo of the affinity diagram you made in class to sort the findings from all of your teammates’ exploratory research + one additional diagram of your team’s choice. We will start making affinity diagrams as an in class exercise on Tuesday, February 11.

    • For the additional diagram/map, answer these questions:
      • What diagram did your team choose to make?
      • Why you chose this diagram?
      • Who participated in the diagramming activity?
      • How did this activity differ from affinity diagramming?
  2. You should also turn in a short problem statement (approximately 1-2 paragraphs) that specifies what problem your team has chosen to tackle for your project. You will develop these in discussion on Friday, February 14th.

  3. Turn in at least 2 personas/persona stories/modular personas that explain the problem you want to solve from the perspective of 2 prospective users. Each persona story should include at least 1/2 page of text as well as one image or visual, and follow the guidelines discussed in class on Thursday, February 13th.

List of diagramming & mapping techniques:



This project is worth 5 points towards your final grade and will be graded as follows:

D3: Brainstorming Report

Due in class, Tuesday, February 25

THIS IS A GROUP PROJECT. Only one member of your group should upload a file to EEE.

We will have a brainstorming session in class on Tuesday February 18th to get you started on this milestone.

The goal of this week’s project work is twofold:

1. User needs / criteria for a good solution

Expanding on your work from last week to scope your design problem space, this week you should clarify a set of user needs or user requirements that will be critical for the success of any solution to your identified problem.

At your first brainstorming session (at least 15 min)
Thinking about the user research you have all been conducting identify at least 20 different potential user needs or requirements.
After this session
Decide on 3-4 key requirements that will motivate your chosen design solutions

2. Design Ideas & Solutions

This week, you will move forward in also coming up with proposed design solutions to your identified problem.

You should have a brainstorming session at which your group comes up with at least 35 different ideas for solutions and facilitate a brainstorming session with other people. These can be far-fetched ideas – in fact, wild ideas are encouraged at this stage of the process!

At your second brainstorming session (at least 25 min)
Thinking about your identified problem area, identify at least 35 potential design solutions or innovations
At your third brainstorming session
Facilitate a brainstorming session with people who aren’t just group members. Identify at least 10 additional design solutions – or iterations on how you might implement one of your chosen solutions.
After sessions 2 & 3
Decide on 3 solutions that you will storyboard next week and consider in more depth. These should be sufficiently different from one another.

What to turn in & Grading - 5 points total

  1. Photos of all three brainstorming sessions – 1 point
  2. 1 paragraph reflection on the differences between brainstorming sessions 2 & 3. – 1 point
    • Which session produced the ideas that you chose for your project? Which method was more valuable, or did they each produce different results? What would you do differently the next time you need to brainstorm design ideas?
  3. Choose 3-4 user needs/requirements - 1 point
    • Explain how you chose these requirements. Why are they the most important? (~3 sentences)
    • Give a brief description of each one. (1-2 sentences each)
  4. Choose 3 design alternatives to pursue further. - 2 points
    • How did you choose these three alternatives? (~3 sentences)
    • Give a brief description of each one & how it addresses your chosen problem. (2-3 sentences each)
    • Explain how each proposed solution will satisfy your identified requirements. (1-3 sentences each)

D4: Storyboards

Due in class, Tuesday, March 4

For this assignment, you will create storyboards for each of your three proposed design solutions & decide on one solution to prototype and evaluate.

I am personally a big fan of simple paper sketches. However, you may prefer to use some online tool like, StoryboardThat

You should turn in **a single PDF file ** containing:

  1. Storyboards: For each proposed design solution, you should include two storyboards of 3-5 frames each. Each storyboard should depict a key use case for that design solution. You should include a short textual description of the use case beneath each storyboard.
  2. Design Solution Choice: Write a 1-3 paragraph explanation about which design solution you will move forward with (or how you will combine your different solutions together). This paragraph should clearly explain what the design solution is, how it addresses your design problem, and why you chose this particular solution over the others.

D5: Paper Prototypes & Evaluation

Due in discussion, Friday, March 14

For this milestone, you will create paper or other low-fi prototypes for your chosen design solution, and conduct some simple evaluations of the system.

For mobile apps, you might consider using a tool like POP App

For desktop apps, you can use presentation software like PowerPoint, also see this article on PowerPoint, or specialized tools like Balsamiq or Mockingbird or Stenciling Kits with a variety of diagramming applications.

You can also totally just use paper! That is fine!

Here is an example of using paper prototyping for website development

  1. At least 2 of your team-members should conduct one self-reflective evaluation of your solution that is either a cognitive walk-through or heuristic evaluation.
    • For cognitive walkthroughs, you should follow one of Wharton et al 1994 OR Spencer et al 2000. Both of these have very detailed examples of using the method.
    • For heuristics, you could consider, Jakob Neilsen’s famous list or others that we discussed in class, or another of your choosing. If you choose your own, you must explain where you found it, why you chose it, and why I should believe it’s a legit list.
  2. You should also recruit at least 2 participants to participate in a short think-aloud exercise with the prototype.
    • See the Bill Buxton reading from March 4th for a great example of what this might look like.

Turn in A SINGLE PDF file:

  1. Pictures of your prototype
    • A short description of what prototyping method/tools you chose and why (~1 paragraph)
    • A reflection on the experience of protoyping (~1 paragraph)
    • What worked well?
    • What did not work well?
    • Would you use this type of prototyping again? Why or why not?
  2. You need to then write a short report detailing your evaluations:
    • Summary of the two self-reflective evaluations AND the two think-aloud exercises detailing the results:
      • For heuristic evaluations and think aloud evaluations, this should be in the form of a Usability Aspect Report [UAR Word Template]
      • For cognitive walk-throughs, include the cognitive walk-through form [CW Word Template]
    • Next Steps Based on all of these evaluations, write a brief report (~2-4 paragraphs):
    • What were the key problems that you identified?
    • If you had more time to work on this project:
      • What would you change in response do feedback?
      • What would you not change?
      • Would you want to conduct more evaluations before iterating the design or are you ready to change things now?
    • Reflection on the evaluation process (~1-3 paragraphs)
    • What kind of problems did each evaluation surface? Similar or different ones? Why do you think that is?
    • Which evaluation was most helpful (or were they all equally helpful)? Why?

You should also be prepared to give a SHORT presentation (between 3-4 minutes) in discussion about your project: - Summarize the problem you decided to solve - Show your prototype - Give an overview of what you learned in the evaluation - Summarize next steps (if the class weren’t ending, what would you do next?)

Final Report

Due no later than 3:30pm, Thursday March 20

There is both a group and individual part of this assignment, as well as a team member evaluation.

DF: 1 Group Assignment

As a team, you should pull together all of the work you’ve done this quarter into a project case study. The total length of text for this assignment should be no more than 2 pages. You should (hopefully obviously) include additional pictures, as appropriate.

This case study should give a summary and overview of how you worked through the design process from initial exploratory observations, interviews, and collages/cultural probes, through data analysis, story-boarding, persona stories, prototyping, and simple evaluation.

This should be something appropriate for using on your website as part of a portfolio that demonstrates your knowledge of and expertise in User-Centered Design. Ideally, at least one of the group members would just put something up on their website, and turn in a link. But, if you would prefer to make something in Word or whatever, that’s fine, too. I don’t want you to get hung up on your own website design, but think of that as your audience.

Here are some examples of how other people show off their class projects on their websites:

Please have ONE member of your team, submit a PDF to EEE of this assignment in the folder DF: Group. If you create a website, you can print the site to a PDF and upload that. If you create a website, please include a link to that site on the FIRST page of the PDF that you submit.

Individual Assignment

Each individual member of the team is responsible for this portion of the assignment on their own.

1. Evaluations of Teamwork

This form will be distributed through EEE. MAKE SURE YOU FILL IT OUT.

2. Individual Reflection on the Design Process

Write a ~2 page reflection on your experience going through one cycle of an HCI design process, and what you’ve learned in this class.

Please turn in a PDF file. I find a line spacing of about 1.3 is usually best for readability.

You should address all of the following questions:

  1. What are the three most important things you’ve learned this quarter? Why are these things important to you?
  2. The next time you have a design project, will you use a user-centered process like we used in the class project? Why or why not?
  3. Think about the different images of the HCI design process that we’ve seen this quarter – the messy cycle from Bill Moggridge’s book, the lifecycle loop from Rodgers et al., the hexagonal rainbow graphic from the Stanford What would your ideal HCI design process look like? Draw a picture or diagram. Explain the picture/diagram and give examples of the kinds of methods or tasks that should happen at each stage. Explain why this is your ideal process.

Upload this to EEE in the folder DF: Individual