Assignment by Mara Bravo-Santos.
Due Thursday, October 8 at 1:30 pm Pacific
This assignment is the first in a two-part series on design. In this part of the assignment, you will not build anything. Instead, you'll continue the work you started in class: formulating a research question, doing some research, conducting interviews, formulating a precise problem, and brainstorming solutions. In the next assignment, you'll flesh out your idea, vibecode a solution, and evaluate how well it worked.
Step One: Get the Starter Files
Your first step is to clone the repository for this project. Start off by entering the CS193V development environment. You should see a prompt indicating that you're in the folder ~/projects:
student@cs193v-development:~/projects$You will need to clone the repository containing your starter files. The repository lives at the URL https://github.com/cs193v-students/a4-<your-sunet>, where <your-sunet> is replaced by your SUNetID (e.g. htiek, szum, cbl, poohbear, etc.). For example, your TA Mara would use the URL https://github.com/cs193v-students/a4-mbravo13.
After you've done this, change into the directory you just checked out. Its name will be a4-<your-sunet>, as above. You'll see a file there named writeup.md. We'll describe what this does in more detail later.
Step Two: Choose and Refine Your Research Question
In Tuesday's class, you practiced learning from other students' experiences. In this assignment, you'll start by choosing a narrow area in the broader realm of "student life" that you will then learn more about. You'll then see how to investigate that area, learn more about how real students address challenges in those areas, and, based on what you find, come up with ideas for how to address those challenges.
Your first task is to formulate what the d.school calls a research question. For the purposes of this assignment, we would like you to use this template:
\[\underline{\color{blue} \textbf{(a specific group of students)}}\]How do
\[\underline{\color{blue} \textbf{(a specific activity or task)}}\]do / decide / choose / manage / navigate / experience
\[\underline{\color{blue} \textbf{(a specific situation or context)}}\text?\]in
For example:
- How do Stanford students manage their sleep during especially busy weeks?
- How do students decide where to study when they need to focus for several hours?
- How do Stanford students decide what to do over the weekend when they want to get off campus?
- How do students keep track of academic and extracurricular commitments during the quarter?
- How do students decide where to get help when they are stuck on coursework?
- How do students decide which classes to take each quarter?
Notice that these questions approach from a spirit of inquiry and curiosity. They ask what people currently do, not why they don't do something else. (Compare "How do Stanford students manage their sleep during especially busy weeks?" with "Why don't Stanford students sleep more?"). They don't presuppose what challenges people face. (Compare "How do Stanford students decide what to do over the weekend when they want to get off campus?" with "How do Stanford students explore the Bay Area given how expensive it is to own a car?"). And they don't begin with a proposed app or product (Compare "How do students decide which classes to take each quarter?" with "How would students use an app that used AI to recommend courses?").
Writing good research questions takes practice. To help you learn to do this, we've provided starter files in the repo you cloned that instruct your coding agent to assist you in writing one. Open your Coding Agent of Choice inside the repo you cloned. Think through what aspect of student life you would like to learn more about, and then propose a research question to the coding agent. The coding agent will help refine your research question into one that will surface more specific and useful insights later in the assignment. Expect the coding agent to ask you a lot of questions. Answer them thoughtfully. You'll learn a lot in the process.
Once you've come up with something that works, tell your coding agent that you're ready to write it up. The coding agent will then update the file writeup.md in your repository. You should then git commit and git push your changes so that they're backed up to GitHub.
When you're done with that, proceed to the next step.
Step Three: Analyze a Public Source
In lecture, you practiced looking at a public source about student life. Now find a public source that helps you learn more about the activity in your research question. This could be a Reddit thread, App Store reviews of a relevant app, a forum discussion, or another place where people describe their real experiences.
Make a note of the URL so you can refer to it later. Then, carefully read over what you found. You'll want to read ten or so entries in detail, where an "entry" might be one Reddit comment, one App Store review, or one forum post.
When you're done, do the following:
-
Summarize what you read. Why was your source pertinent to your question?
-
Write down two quotes from the source that seem most striking, relevant, or interesting to you.
-
Give three specific details that helped you better understand the space you're designing for.
We strongly recommend that you do this yourself without AI help. You are, after all, trying to build a mental model of how real people operate. Asking a coding agent to summarize the source means that the coding agent, not you, will be deciding what's salient. What's more useful: what you find interesting, or what an LLM finds interesting? Plus, if you're trying to design things for real human beings, you'll want to understand what those real human beings think and feel.
(There is one step we do think a coding agent is helpful for, and that's coding in the social sciences sense of the word. You may find it helpful to have the coding agent tag each entry with what information it conveys. For example, you might come up with tags like "describes a problem," "proposes a workaround," "asks a question," etc., then ask the coding agent to automatically read the text and attach these tags. This can make it easier for you to read over the entries when searching for particular terms. Just be aware that the coding agent isn't necessarily going to classify everything the same way you would, and you may end up missing things.)
Then, take your writeup and hand it to your coding agent. (You could write the results into a file in the directory you cloned, or copy-paste the information in.) Tell the coding agent you're done with Step Three of the assignment. It should offer to update writeup.md with what you've provided it. After it does, git commit and git push your work to back it up.
Step Four: Conduct Interviews
Your next step is to interview at least two people who have recent experience with the activity you are studying. Your interview should be guided by the following parameters.
-
Spend 15 - 30 minutes per interview. In professional generative research, interviews often run about 45-60 minutes and are part of a larger recruiting and synthesis process. But this is an assignment to help you practice with interviews, so the shorter timeframe is fine.
-
Come with a list of questions. Your interview should not consist of you reading the questions in order, but instead leading with something and asking follow-up questions until you reach a point where it's appropriate to move to the next question. Feel free to draft a list of questions and ask your coding agent to review it and suggest improvements.
-
Make a record of the interview. You'll want to refer back to what came up during the interview, and in order to do that you'll need to create some record of what happened. Some options:
-
Take notes by hand or in a Google Doc. Write down what's most salient. Put actual verbatim quotes "in quotes" to distinguish what was said from your interpretations and thoughts.
-
Record or transcribe the interview. If you do this, you must obtain the participant's permission first. You may use AI tools for this; if you do, ask your subject for consent and do the work to install and test the tool before the interview.
We recommend option 1 here. Taking notes by hand forces you to summarize and synthesize what's said.
-
You should follow established design practices when conducting your interview. Specifically:
-
Ask about a specific past experience. Start with a question like "tell me about the last time you $\blank{\text{."}}$ Then ask what actually happened, step by step. Specific past events are more useful than hypothetical answers. Useful follow-ups questions to ask:
-
What were you trying to do?
-
What happened next?
-
How did you decide what to do?
-
Was there a point where you got stuck or changed your plan?
-
What did you do when that happened?
-
What worked well?
-
What do you do now because of that experience?
-
-
Be curious! Your goal is to get useful information toward answering your research question. You're not going to get very far by asking questions like "what was your pain point?" (People do not naturally organize their lives into design-research categories!) Instead, stay open and curious. Ask to hear more about your subject's experiences. Ask follow-up questions to get your interviewee to volunteer more information. Everyone has a good story to tell if you're patient and ask the right questions.
-
Don't pitch an idea or app. As soon as you describe a solution, the conversation shifts toward evaluating your idea. People may try to be helpful, polite, or imaginative instead of telling you what actually happened. Instead of "would you use an app that tells you what food is about to expire?," ask "tell me about the last time you bought groceries for yourself for the week. What happened to the food you bought over the next few days?"
Need to find someone to interview? Post in Ed / the class chat to connect with peers. If a classmate matches your target group, you can interview them. Consider pairing up first to practice your interview guide with each other.
Once you've concluded your interview, we want you to write up your own answers to the following questions:
-
You started with a research question. What information did you learn that helps you understand that question?
-
What did you learn that surprised you or made you rethink your assumptions? (The answer may be "nothing," but we think that should be pretty uncommon.)
-
What would you do differently next time? Interviewing is a skill and you're just starting to get practice with it. Is there anything that, in retrospect, you would have wanted to change about how you set things up?
When you're done, give your answers to your coding agent, say you're giving information about Step Four, and check that the coding agent does what we've told it to do (update the relevant parts of writeup.md). Don't be surprised if the coding agent asks you to elaborate in more detail. We've asked it to do that. This is there to help you get more practice with this.
Step Five: Define a Concrete Problem
This is the synthesis step at the center of the assignment. You've now read some public sources and interviewed at least two people. Your goal now is to identify the specific problem you want to design something for. (That's not the same as the solution to the problem; that's a separate step.) Your goal is to fill in the following blanks:
\[\underline{\color{blue} \textbf{(perform a specific task / achieve a specific goal)}}\]struggles to
\[\underline{\color{blue} \textbf{(certain conditions occur)}}\]when
\[\underline{\color{blue} \textbf{(a specific problem exists)}}\text,\]because
\[\underline{\color{blue} \textbf{(what you saw)}}\text.\]as evidenced by
For example:
-
"People who shop for themselves struggle to estimate how much fruit they'll eat in a week when they have busy jobs because they sometimes prefer ready-to-eat processed food when stressed, as evidenced by posts on
fruit-lovers-forum.comand interviews with my dormmates." -
"New parents struggle to keep their carpets clean when their babies eat because infants sometimes throw food, as evidenced by forum posts at
babies-are-great-but-messy.comand interviews with my neighbors." -
"Bakers struggle to make the appropriate number of croissants on Sunday mornings because they can't predict when people will be sleeping in after all-night festivities, as evidenced by Reddit posts on
r/whywontyoueatmybreadand interviews with two bakery owners."
We've again instructed your coding agent to help you structure into this format. But that doesn't mean you should outsource the thinking to the machine. The more you think about your problem statement, the more you'll get out of this assignment.
Once you have this down, share your answers with your coding agent and say you're answering Step Five. It should write to writeup.md. You'll then want to commit and push your work.
Step Six: Brainstorm
You've now identified a problem worth solving. Your final task for this assignment is to brainstorm ideas for something you could vibecode that would help address the problem. We don't want you to converge on a final idea just yet. Instead, you'll come up with a collection of ideas - some of your own, some from the AI - and come to Thursday's class prepared to discuss them.
Out in The Real World™, whenever you are tasked with creating something, you have to do so subject to a set of practical constraints: on time, on budget, etc. The same is true here in CS193V. In Thursday's assignment, you'll be vibecoding an implementation of one of your ideas and demoing it. Thus you'll need to be careful to make sure what you're proposing is
- something that can be feasibly vibecoded in an hour or so, and
- something you can run locally from your laptop.
Instead of grand ambitious visions, think small. For example, if you want to reduce food waste, think "a shopping list website that reminds you what you bought last week," not "a custom refrigerator with conveyor belts to warn you about what's about to go bad." If you're not sure whether something is too ambitious, you can always ask your coding agent to estimate what would be involved.
Now that we've covered the constraints, here's specifically what we would like you to do.
-
Write at least five feasible ideas yourself before asking any AI tools for assistance. This will help you start thinking about the space of possibilities and is good practice.
-
Without first sharing your ideas, ask your coding agent to come up with five feasible ideas of its own for something you could create.
-
Finally, in light of your original ideas and the ideas the coding agent suggested, come up with five final feasible ideas. These could be ones you developed on your own, or more ideas sourced from the AI, or (hopefully) something representing a synthesis of the two.
When you're done, ask your coding agent to write down all fifteen ideas for Step Six. Confirm the coding agent wrote them to writeup.md, then commit and push.
Step Seven: Rejoice!
And that's it, you're done! Take a sunny seat on one of the benches near the plants in the Main Quad and listen for red-shouldered hawks.
If you're interested in learning more about design, feel free to check out these resources. They all come highly recommended.
- Steve Krug, Don't Make Me Think (chapters 1-2).
- Patnaik & Becker, "Needfinding: The Why and How of Uncovering People's Needs" (1999).
- Nielsen Norman Group, "Task Analysis: Support Users in Achieving Their Goals."
- Don Norman, The Design of Everyday Things (chapter on affordances and signifiers).
- Nielsen Norman Group, "10 Usability Heuristics for User Interface Design."
- Christina Wodtke, Pencil Me In: The Business Drawing Book for People Who Can't Draw.
- Christina Wodtke, Information Architecture: Blueprints for the Web.