Design Project

Objectives

This course includes a project that will demonstrate that you are able to:

1. Conduct a user-centered design process, including needfinding, prototyping, and usability testing
2. Give and receive feedback on designs
3. Update designs based on feedback
4. Identify and critique potential impacts of a design on direct and indirect stakeholders to address concerns such as:
   • sustainability
   • accessibility and inclusion
   • privacy
   • security
   • potential for harm

Overview

Since we have a short time, we will be doing an abbreviated version of a user-centered design process. You will work in teams of 3-4 to design a system ¹ that helps people with a particular task. You will go through the following steps:

1. Needfinding: You will interview people who might use your system to understand their needs and constraints.
2. Prototyping: You will create a prototype of your system and do a heuristic evaluation.
3. Testing: You will test your prototype with users and get feedback.
4. Iterating: You will update your design based on feedback.

Pick from one of the following projects:

• Helping a writer revise a draft
• Helping a group of people run (or schedule? or debrief?) an important meeting
• Helping an organization leadership team communicate with stakeholders
• Helping a researcher (or similar person) manage notes and/or ideas

If your team has a different idea, please run it by me.

Milestones

Milestone 1: Needfinding

A draft of this milestone should be completed by the end of Week 2. It should be substantially complete by the end of Week 3.

These instructions are based on KIXLAB HCI Project 1

Skim through The Design Thinking Bootcamp Bootleg by Stanford d.school (CC BY-NC-SA 3.0).

Good design starts by gaining empathy and understanding needs of your target users. How? Observe them. Talk to them.

For this milestone, you will observe and interview three potential target users. Please make sure you meet with people who are experiencing the problem you are tackling. Ideally include at least one extreme user (bootleg p.11), who is experiencing non-average constraints and situations.

How? Preparing for an interview (bootleg p.9) is a good idea. For each participant:

Each member should observe and interview at least one person. Having multiple members join an interview session, of course, is recommended.

1. Observe them dealing with the experience you're trying to redesign in a real environment. Ask the participant to perform some part of the task as realistically as possible, so that you have a good understanding of what they actually do (not just what they think or say they do).
2. Record: Carefully take notes, sketch, and capture photos about what you observe. Do not record video, as the participant might feel uncomfortable and perform unnaturally.
3. Interview: Spend 10-20 minutes interviewing the participant about what you observed. Ask "why" questions, focus on "feelings", and seek "stories". The guidelines in "Interview for Empathy" (bootleg p.10) might help.

After completing your observations, your team needs to reflect on what you learned from the participants, and identify needs and insights. Needs are what your user is trying to accomplish, expressed as verbs. They indicate your user's activities and desires. Insights are discoveries that you might use in creating solutions. They are opportunities, not features or solutions. There are no bad ideas in this stage: go for volume, and generate at least 10 needs and 10 insights. Using an empathy map (bootleg p.15) might help, although it's not required.

Slides

Make a brief slide deck that includes the following:

• Experience you are planning to redesign (one sentence)
  • Problem-driven not solution-driven?
• Observations & Interviews: A narrative of the people you observed and interviewed.
  • How is each user related to the Experience?
  • Focus is on interesting moments and breakdowns: when the user is trying to do something but fails, takes long to do, or doesn't know how to do.
  • Use at least one photo or sketch for each person to highlight the specific points.
  • At least three people?
  • Extreme user included? Explain in what aspect they’re an extreme user.
  • Note: Do not use real names of the users, but describe who they were in detail.
  • Keep it concise and clear. A few bullet points or sentences are enough for each participant. Long reports often contain unimportant points.
• List Needs, without detailed explanations.
  • List at least 10 needs (distinct, relevant, non-trivial)
  • Needs are problem-driven not solution-driven
• Insights, without detailed explanations.
  • List at least 10 insights (distinct, relevant, non-trivial)
  • Insights are opportunity-driven not solution-driven

Upload your slides to Perusall in the Milestone 1 folder.

Example Slides

• Team What the Shell
• Team Brit

Milestone 2: Prototyping

Timeline

A draft of this milestone should be completed by the end of Week 3. It should be substantially complete by the end of Week 4.

These instructions are simplified from KIXLAB HCI Project 3

Create several low-fidelity prototypes exploring a range of design approaches for your system. You can use any prototyping tool you would like, including paper.

Add to your slides from Milestone 1:

• A revised POV statement and core needs and insights you’re addressing
• Prototypes: Include images of your prototypes. You can take photos of paper prototypes or screenshots of digital prototypes.
  • At least three prototypes
  • Each prototype should be very distinct from the others (not just a small variation)
• Concepts: Briefly describe the concepts behind each prototype. What are you trying to explore or test with each one?
• Connection to Needs and Insights: For each prototype, explain how it connects to the needs and insights you identified in Milestone 1.
  • Highlight design choices that you made specifically to address these needs and insights.
  • Identify any needs or insights that your prototypes aren’t (yet?) addressing.

Tips and guidelines:

• Try to explore a range of design approaches. Don’t just iterate on the first idea you have. Force yourself to come up with many different ideas, then pick a few to sketch out in more detail.
• Connect your prototypes to the needs and insights you identified in Milestone 1.
• Question your unstated assumptions about how the system should work.
• Aim for end-to-end scenarios. Your prototype should support at least three distinct tasks. This does not mean you need to build three separate prototypes, but rather this means you need to build one complete prototype that is flexible enough to support the three tasks.
  • Task examples for a shopping app could be: “Put more than 6 items into a shopping cart and finish the purchase.”, “Put two items into a shopping cart, remove both, and add a new item.”, and “Cancel your purchase in the middle of a payment process.”.
  • But avoid functionality-focused examples such as “Use the ‘add’ button and put 6 items into a shopping cart”.

Anti-tips:

• Don’t implement all functionality. But for the functionality you do implement, use hard-coded realistic data and fake results.
• Don’t worry about making your prototype look polished. It’s more important that it’s clear and easy to understand.

Notice of Change

An earlier version of this milestone asked for heuristic evaluation and a walkthrough video already. In discussion with several students, we realized that this pushed students to narrow in on a specific design and create high-fidelity prototypes too early. I’ve updated the milestones to delay those steps until after you’ve explored a wider range of design possibilities.

If you have already done work towards the old Milestone 2, you don’t need to redo anything. But I would encourage you to try to create a wider range of prototypes to explore the design space more fully.

Milestone 3: Testing and Iteration

Timeline

A draft of this milestone should be completed by the end of Week 4. It should be substantially complete by the end of Week 5.

Refine your prototype through testing, both with heuristic evaluation and with users.

Heuristic Evaluation

Work with another team to perform a heuristic evaluation of each others’ systems. You may refer to Nielsen’s 10 Usability Heuristics or another set of heuristics, such as those in our reading. Write a description of what issues you found in your heuristic evaluation and what you might change to address them (you don’t need to actually change your prototype).

User Testing

Now let’s show your working prototype to representative users and get their feedback. At this point, find one or two users representative of the target population, let them test your prototype, and learn how you might improve your interface. Note that participants should not be students taking this class.

• Plan: Prepare a test plan. What tasks will you ask the user to do? What questions will you ask them? How will you record their responses?
• Run the test: Make sure to take notes. Record the session–with the user’s permission–if you can. Emphasize that you’re testing the system, not the user.
• Reflection: What did you learn about the usefulness and usability of your interface? Revisit your interface design, tasks, personas, POV, and user needs, and review if any of them needs revision or additional work.

Milestone 4: Iterating

Include an example walkthrough video of your system, showing a realistic user experience. Keep it short and clear, but don’t make it polished.

• To record a walkthrough video, you can:
  • use a phone camera (especially if it’s a physical prototype)
  • use screen recording software on your computer (e.g., QuickTime Player on Mac, PowerPoint, OBS, Teams, etc.)
  • use a dedicated tool like Loom, Tella, Screen Studio, or something of your own choosing.

Footnotes

1. Most students will probably design websites or mobile apps, but you could also design a physical system, a service, or a game. Note that you don’t need to build what you design, just create a prototype that you can test with users.