generated from sarahbawabe/cs1300-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhome.html
250 lines (205 loc) · 8 KB
/
home.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!doctype html>
<html>
<head>
<title>Personas and Storyboarding</title>
<link rel="stylesheet" href="index.css">
<link href="https://fonts.googleapis.com/css2?family=Corben:wght@700&family=Roboto:wght@100&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=David+Libre&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap" rel="stylesheet">
<!-- TODO: add additional links here! e.g. fonts, icons, more stylesheets, etc. -->
<meta content="width=device-width, initial-scale=1" name="viewport" />
</head>
<body>
<h1>Fun With Strainers</h1>
<div class='row mid'>
<div class='column mid'>
<h2>Introduction</h2>
What happens when we show people an unusual kitchen tool? <br><br>I set out to find out. In my apartment,
we have a distinct kind of strainer - something most people have never seen before. <br><br> I asked three friends
to use the strainer. I documented their interactions and asked them questions about their experiences.
Based on their responses, I then created two personas that represent different users of the strainer. Finally, I designed a storyboard
for one of the personas.
</div>
<div class='column dub mid'>
<img src= "top_sketch.jpeg" width="700px">
</div>
</div>
<div class='row mid'>
<div class='column mid'>
<h2> Design </h2>
The hand-held strainer is a mostly flat, semi-circle of plastic. It is punctured with small holes
to facilitate straining and wide handles to comfortably hold the strainer. The bottom of the
surface contains small pegs to help anchor the strainer against the pot. <br><br>To use it, you place
the strainer on top of the pot and turn the pot over while keeping the strainer pressed to the rim.
</div>
<div class='column dub mid'>
<img src= "bot_sketch.jpeg" width="700px">
</div>
</div>
<br><br>
<h2>Observations</h2>
<div>
To begin my investigation, I watched three friends attempt to strain a pot of pasta. I chose these
three friends because they span the spectrum of general kitchen experience and whether they had seen the strainer
before.
</div>
<div class=row>
<div class=column>
<h3>Observee 1: Max, multi-time user</h3>
<ul>
<li>
Went directly to the sink before anchoring the strainer in place
</li>
<li>
Swifly strained the pot, achieving a near 180-degree rotation of the pot
</li>
</ul>
</div>
<div class=column>
<h3>Observee 2: Michael, first-time user</h3>
<ul>
<li>
Spent ~10 seconds inspecting the strainer, trying to decipher which side was the top
</li>
<li>
Originally misidentified the top and bottom, but corrected his mistake when he was about to begin straining
</li>
<li>
Some of the contents of the pot spilled into the sink while straining
</li>
</ul>
</div>
<div class=column>
<h3>Observee 3: Jake, first-time user</h3>
<ul>
<li>
Made ~3 attempts to anchor the strainer to the pot
</li>
<li>
On each attempt, he wiggled the strainer to check how loose it was
</li>
<li>
Placed his non-pot hand in the center of the strainer (near the holes) rather than on the grips
</li>
</ul>
</div>
</div>
<h2>Interview Questions</h2>
<div>
Prior to collecting observations from my three friends, I drafted a series of questions to ask them.
I asked the questions after I collected the observations. The goal of these questions was to gain a
deeper understanding of their interaction - expectations, challenges, background, etc. - with the strainer.
</div>
<div>
<ol>
<li>
<h3>What do you think the interface is used for? (asked after being shown the interface) </h3>
Max quickly identified that the interface was a strainer. <br><br>
Michael and Jake both guessed that
it was a strainer, but only after some consideration and inspection of the interface.
</li>
<li>
<h3>On a scale from 1-10 (10 being the highest), how confident were you that you knew how to properly use it?</h3>
<ul>
<li>
Max: 10
</li>
<li>
Michael: 5
</li>
<li>
Jake: 10
</li>
</ul>
</li>
<li>
<h3>Do you typically use other interfaces for straining food? If so, can you compare this interface to your usual strainer?</h3>
All three responded that they typically uses other interfaces for straining:
<ol>
<li>
Nested Perferated Pot (Max): Only lift the interior pot and the water drains to the outer pot.
</li>
<li>
Colander (Jake, Michael): Dump the contents of the pot into the collander. Must ensure that
the collander can fit the contents of the pot.
</li>
</ol>
</li>
<li>
<h3> What are a few words that describe how you felt when you were using it?</h3>
<ul>
<li>
Max: at ease and comfortable
</li>
<li>
Michael: concerned and anxious
</li>
<li>
Jake: on edge and uncomfortable
</li>
</ul>
</li>
<li>
<h3> Can you elaborate on why you chose those words?</h3>
Max said that the strainer was easy to use and intuitive. For him, it felt natural to use. <br><br>
Michael shared a different perspective. He said that he was nervous about being burned and also spilling
the food into the sink. Additionally, Michael noted that he didn't think the strainer was
the right size for the pot and wasn't sure if he was using it correctly. <br><br>
Jake said that he felt uncomfortable for two reasons. First, because of the potential burn risk.
Second, because his body got covered in the steam that emerged from the pot while straining.
</li>
<li>
<h3>On a scale from 1-10 (10 being the highest), how comfortable are you in the kitchen?</h3>
<ul>
<li>
Max: 10
</li>
<li>
Michael: 4
</li>
<li>
Jake: 7
</li>
</ul>
</li>
</ol>
</div>
<br>
<h2>Personas</h2>
<div>
These responses led me to create two personas: "Snackpass Sam" and "Chef Cece." These personas differ
in a few keys ways, most importantly with their experience in the kitchen. I designed the
empathy maps below to dive deeper into the personalities and motivations of the personas.
</div>
<div class=row>
<div class='column mid'>
<img src= "sam.png" width="660px">
</div>
<div class='column mid'>
<img src= "cece.png" width="660px">
</div>
</div>
<br>
<h2>Storyboard</h2>
<div>
I decided to base my storyboard on "Snapckpass Sam." After all, I think I'm far more like him
than "Chef Cece."
</div>
<div class=row>
<img src= "s1.png" width="400px">
<img src= "s2.png" width="400px">
<img src= "s3.png" width="400px">
<img src= "s4.png" width="400px">
<img src= "s5.png" width="400px">
<img src= "s6.png" width="400px">
<img src= "s7.png" width="400px">
<img src= "s83.png" width="400px">
<img src= "s9.png" width="400px">
</div>
<h2>Conclusion</h2>
<div>
Hand-held strainers can be great, but they clearly aren't for everyone!
</div>
<!-- TODO: put your HTML code here! -->
</body>
</html>