Design

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.

Grading

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 20 (week 3)
D1: Individual Research Due – 10 points
Due in class, Tuesday, February 10 (with parts due on January 27th and February 3rd)
D2: Making Sense of Data – 5 points
Due in class, Tuesday, February 17
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 24
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 3
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 class, Tuesday, March 10
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 6pm, Tuesday March 17 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 20 (week 3)

For this milestone, all you need to do is sign up for a project topic online, here is the link to the signup: https://eee.uci.edu/signupsheet/4KXATVg864 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 10

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.

D1.1 What to turn in for January 27th:

All data related to the observations:

  • Your fieldnotes (photos or scans of your fieldnotes)
  • Photos and/or sketches of your field site

D1.2 What to turn in for February 3rd:

All data related to your interviews:

  • An audio file of your second interview.
  • A photo or scan of the list of interview questions you used showing that you took notes during the interview.
  • In lieu of transcribing your interviews, I require that folks produce a 1/2-1 page summary of each interview highlighting key findings from that interview with at least 3 quotes pulled from the interview

What to turn in for the complete version of D1 due on February 10:

To be clear, you need to turn in all of your collected data for this submission, even if you have previously turned in different parts.

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 10. Your name and Student ID should be clearly marked on the front page.

A zip file containing

  • The audio files for all interviews conducted outside of discussion or other proof of actually conducting the interview.
  • A user research report in PDF or Word format, with the following sections:
    • I. The Executive Summary
      • 1-2 pages covering what you learned and where you will use design explorations to deepen your thinking.
    • II. Observations
      • Fieldnotes (photos or scans of your fieldnotes)
      • Observation Summary: 2-3 paragraphs highlighting key findings
      • Observation Reflection: 1-3 paragraphs about the experience
    • III. Interviews
      • For each interview:
        • A photo or scan of the list of interview questions you used showing that you took notes during the interview.
        • 1/2-1 page summary of each interview highlighting the key findings from that interview with at least 3 quotes pulled from the interview
      • Interview Reflection: 1-3 paragraphs about the experience
    • IV. Cultural Probe / Collage / Additional Interviews
      • If you chose to do a cultural probe:
        • A photograph of the cultural probe kit, and any accompanying material before giving it to participants
          • A cultural probe kit should contain at least 3 activities (i.e. photos + map + postcard or photos + diary + map, etc..)
        • Photograph(s) or Scan(s) of the completed kit items
        • A 2-3 paragraph summary of what you learned/discovered
        • A 1-3 paragraph reflection on the experience
      • If you choose to do a collage:
        • A photograph of the collage materials you gave you your participant(s)
        • At least 4 photographs of the collage-session in progress
        • A photograph of the completed collage(s)
        • A 2-3 paragraph summary of what you learned/discovered
        • A 1-3 paragraph reflection on the experience
      • If you choose to do additional interviews
        • Same as (II) + Additional 1-3 paragraph reflection on the experience

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:

  • Fieldnotes
    • If you only have hand-written notes, please scan these or take high resolution photographs that you can embed in a PDF or Word document.
    • Field notes should total at least 4 pages in length. It’s okay if they are really messy. Fieldnotes will not be graded for grammar, etc. We just want to see that you took notes in the field. I should see things like time stamps, written notes, small sketches or maps of the location. You can see examples of my own fieldnotes in the lecture slides from January 21.
    • Include at least 4 photographs from your observations. These can be interspersed with fieldnotes or attached separately, but they should each be captioned with a short 1-2 sentence description, explaining what they show and why it is interesting for your project. You can use the Stanford d.school what-how-why template for this.
    • If you are uncomfortable taking photos at your fieldsite, you may instead submit:
      • 2 photos — 1 photo from each observation session showing that you actually went somewhere, e.g. if you are observing at the gym, you could take a picture of the outside of the gym building if you don’t feel comfortable taking photos inside the gym.
      • AND a brief reflection (3-5 sentences) on why public photography is not acceptable in this setting (and what does this mean for the kind of technology that would be acceptable to design for this setting?)
      • AND 4 detailed sketches, depicting scenes from your fieldsite that are relevant to your project.
  • Observation Summary
    • Write 2-3 paragraphs summarizing what you observed. This should be a simple descriptive report that tells us where you went to observe, what days and times you were there, who you saw, and what they did.
    • If you would prefer to turn in more of a bulleted list, this summary should be approximately 1-2 pages long. You should still use complete sentences. The point of this exercise is to highlight the important parts of your observation in a way that another person could read and understand.
  • Observation Reflection
    • Write 1-3 paragraphs reflecting on your experience of conducting the observations. What surprised you? What did you learn that you might not have noticed otherwise? What did you think about what you saw – did you notice any problems that people were having with technologies or notice things that you think you could improve? What would you do differently the next time you do observations? What parts were easy? What was challenging? Did you get bored?

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 Wednesday, January 28. At least one additional interview should be conducted with someone who is NOT a member of this class.

What to turn in:

  • Interview Questions
    • A list of questions asked in each interview, marked up with the notes you took as you went through the interview.
    • I should see that you made changes to the protocol based on your work in the discussion workshop on Wednesday, January 25th
  • Interview Audio
    • Please turn in a copy of the audio files from your interviews.
  • Interview Summaries
    • You do not need to transcribe your interviews. Instead, for each interview, prepare a short (2-3 paragraph) summary, or 1-2 page bulleted-list summary.
      • First, please identify who you interviewed with some general background information: Is the interviewee in this class? What is your relationship to this person (friend, family, roommate, stranger?) How old is the interviewee? What year in school is he/she? What is his/her major? As well as any other relevant data for your project (e.g. if your project is about bicycles, does this person ride a bike? How often?). Do NOT include any personally identifiable information (e.g. name).
      • State where the interview was conducted and how long it lasted.
      • Highlight at least 3 key findings – what did you learn?
    • If you conducted a photo-elicitation interview, please include the photos used.
  • Interview Reflection
    • Write 1-3 paragraphs reflecting on your experience of conducting both interviews. What surprised you? What did you learn that you didn’t already know? What would you do differently the next time you interview someone? What parts were easy? What was challenging? How were the two interviews different? Why? Who would you interview next for this project if you had more time?

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:

  • Cultural Probe/Collage
    • Demonstration of work
      • Turn in a photo of either
        • the cultural probe kit that you made and photos of what you get back from the participant. A kit should contain at least 3 activities (i.e. photography + diary + map or diary + postcards + map, etc.)
        • OR at least 4 photos from the collage session showing the collage being put together and 1 photo of the end result.
    • Summary
      • Write 2-3 paragraphs summarizing how you designed the cultural probe kit or the collage kit, and how you deployed the probe or facilitated the collage session. What materials did you give or make available to participants? How did you decide? How did you find participants? Who participated? What prompts did you give participants either when they arrived at the session or when you gave them the kit? What did you learn or discover? What did participants tell you when they presented their completed collage to you?
    • Reflection
      • Write 1-3 paragraphs reflecting on the experience. How did it go? Did you learn different things from this technique than you learned from interviews or observations? What worked well? What was challenging? What would you do differently next time? Did you like this technique?
  • **Interview **
    • Demonstration of work
      • Same as interview requirements above
    • Summary
      • Same as interview requirements above
    • Reflection
      • Additional 1-3 paragraphs reflecting on the experience. Why did you choose to conduct interviews instead of doing a cultural probe or collage? How was this experience different (or not) than the first interviews that you conducted? Was it easier? Did you learn something different this time, or did it reinforce what you already learned in your first 2 interviews? Did you try a different interview technique (e.g. Photo Elicitation Interviews)? Why or why not? Did you change your interview questions? Why or why not?

4. Executive Summary

For this part of the assignment, you need to start synthesizing what you learned and what you think might be some productive avenues for design to pursue in the second half of this course. This part of the turn in will need to be 1-2 pages. The purpose of this document is to help you imagine if you conducted this work and need to report back to your organization what you learned and your thoughts on where design would be most useful for the project. 

What to turn in:

  • A 1-2 page executive summary addressing two major components.
  • The first half of the executive summary should articulate what you learned. You should include at least 3 quotes and 1 observational note. These should discuss the more important and relevant things you learned. Additional, if your initial study suggests the need for an additional user study you can suggest that here as well.
  • In the second half, you should articulate that given what you learned, where should design explore? In other words, what are your next steps of the project. You should articulate at least 3 areas where design explorations or design directions could be fruitful.  I expect these design exploration ideas to be in bulleted list.  To help you think about what these could be, here are some questions that could help generate those ideas: Were there needs you discovered? What do you think designers should try to design for? How are you thinking design might improve a situation or create novel technologies that help people connect, work, and live with each other? Your design exploration could be a specific design ideas (e.g., We should build a mobile app to help people manage their running routine), but they could also be a bigger design space (e.g., We need to explore how presenting data to runners about their routines might help improve their experience of running).

 

 


D2: Making Sense of Data

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

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 10.
    • 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 Wednesday, February 11th.
  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 12th.

List of diagramming & mapping techniques:

HOW TO TURN IN

  • Combine all three parts into a single well-organized document. HERE IS AN EXAMPLE!
  • Export the document to a PDF, choose ‘Good’ setting to reduce image sizes.
  • Turn in the PDF on EEE into dropbox named D2: Making Sense of Data no later than the start of class on Thurs, February 12th.

GRADING

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

  • .5 – Document is well organized as discussed in class
  • .5 – Photo of affinity diagram made in class
  • 1 – Additional diagram made outside of class:
    • (.5) for a photo of the diagram (.5) for answering related questions
  • 1 – Problem statement: Clearly communicates a single problem; meets criteria as explained in discussion
  • 2 – Personas/Persona Stories/Modular Personas (1 point each) Clearly communicates a story about 2 potential users that meets guidelines discussed in class on Thurs, Feb. 12

D3: Brainstorming Report

Due at 10pm, Tuesday, February 24

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 this week 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)
  5. Midterm Team Evaluations
    • This form will be distributed through EEE. MAKE SURE YOU FILL IT OUT. These evals will impact your teammates’ grades. 

D4: Storyboards

Due at 10pm, Tuesday, March 3

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 at 10pm, Tuesday, March 10

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 6pm, Tuesday March 17

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. These evals will impact your teammates’ grades. 

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 d.school. 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

Leave a Reply

Your email address will not be published. Required fields are marked *