-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpersonasStoryboarding.html
205 lines (183 loc) · 11 KB
/
personasStoryboarding.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap.css" rel="stylesheet">
<link href="style.css" , rel="stylesheet">
<title>Personas and Storyboarding</title>
</head>
<body>
<!-- <nav class="navbar navbar-expand-sm navebar-dark bg-dark">
<div class="container-fluid")>
<a class = "navbar-brand" href="#"> CS1300Portfolio</a>
<div class="collapse navbar-collapse">
<ul class = "navbar-nav">
<li class="navebar-item"><a href= "#Introduction" class="nav-link">Introduction</a></li>
<li class="navebar-item"><a href= "#Observations" class="nav-link">Observations</a></li>
<li class="navebar-item"><a href= "#Personas" class="nav-link">Personas</a></li>
<li class="navebar-item"><a href= "#Storyboard" class="nav-link">Storyboard</a></li>
</ul>
</div>
</div>
</nav>
-->
<div class="d-flex flex-column justify-content-center align-items-center">
<img src="portAssets/microwave.png" alt="microwave" style="width:30rem;height:auto">
<h1>Microwave</h1>
<h2>Personas and Storyboarding</h2>
<p class="header">
This is a project conducted for CS1300 (UI/UX) centered on observing how and what kind of users interact
with a dorm microwave.
</p>
<a href="#Introduction"></a>
</div>
<div id="Introduction" class="d-flex flex-column justify-content-center align-items-center">
<img id="story" src="portAssets/interface.png" alt="interface" style="width:auto;height:auto">
<div class="sectionv2">
</div>
<p class="header2">
This is the interface of the brown dorm microwave. The key components of this interface are the timer/clock,
the number and settings pad, the door-open button, and the screen door. The goal of this interface is to
allow user to easily heat up their food, including determining heating times and levels. </p>
</div>
<div class="flex-container3 justify-content-center align-items-center">
<div class="flex-container1 justify-content-center align-items-center">
<h1>Testing Set Up</h1>
<h2 class="header">
3 Users were observed naturally using the dorm microwave. After which they were give a brief interview
of 5 questions about their experiences.<br>
This information was then used to develop user personas of this dorm microwave, as well as a storyboard.
</h2>
</div>
<a href="#Introduction"></a>
</div>
<div id="Observations" class="flex-container justify-content-center bg-white text-center">
<div>
<h1>Observations</h1>
</div>
<div class="flex-container justify-content-center align-items-between">
<div class="container fluid text-center">
<h2>User RL</h2>
<p class="explained">
RL is a frequent user off-meal plan who effectively and confidently interacts with the microwave
interface. They use a range of settings/buttons depending on the variety of items they are heating,
including frozen meals and lukewarm beverages. These buttons are limited to: time cook, express
time, add 30sec, stop, start and the open button. In particular, RL was sensitive to the remnants
left by previous users, such as noting there was extra time left in the timer and the microwave was
misaligned from being pushed back too hard.
</p>
</div>
<div class="flex-container justify-content-center align-items-center">
<h2>User GB</h2>
<p class="explained">
GB is an infrequent user on-meal plan who primarily uses the microwave to head up milk or other
beverages. They interacted with interface with some uncertainty, having to pause before choosing
their time option. In this case, they defaulted to settings that were familiar to them from their
home microwave, in particular the express settings. When using the microwave, they were
multitasking, making other parts of the coffee or checking their phone. They also occasionally
looked into the microwave to make sure their milk did not overflow and pushed the door-open button
before the timer reached zero (they did not clear the timer).
</p>
</div>
<div class="flex-container justify-content-center align-items-center">
<h2>User CE</h2>
<p class="explained">
CE is user on-meal plan who uses the microwave sporadically for when they need to heat up leftovers
or takeouts. They initially clicked the door-open button and then when the door popped out, they
pushed the door open even more to then place in their bowl. CE confidently interacted with the
microwave settings, quickly selecting the time cook button and the number pad. They were quick to
open the microwave before the timer hit zero, expressing that they greatly disliked the finish
sound.
</p>
</div>
<div class="flex-container2 justify-content-between align-content-between">
<div class="boxes justify-content-evenly align-items-center">
<h2>Questions</h2>
<p class="boxed">
1. When do you choose to use this microwave? <br>
Can you describe your state of mind? <br>
Can you describe where in your routine do you use the microwave?<br>
2. Can you walk me through what you first notice when using this microwave?<br>
How do you decide what amount of time to microwave your food?<br>
3. Why did you choose to use this series of buttons?<br>
4. What are the most frequently used settings?<br>
if they don’t talk about some specific feature, ask about it <br>
5. Can you describe any challenges in while using this microwave?<br>
</p>
</div>
</div>
<div class="flex-container2 justify-content-between align-content-between">
<div class="boxes justify-content-evenly align-items-center">
<h2>Takeaways </h2>
<p class="boxed">
1. Users all expressed being in “pilot mode” when they use the microwave, whether or not it was
part of their normal routine. <br>
2. Users first noticed the clock/timer when using the microwave, often checking for if there was
leftover time from the previous users. <br>
3. All users noted that they only really microwaved in 30sec intervals, up to 2 minutes unless
in a specific circumstance. <br>
4. In particular, user were unsure what the specific meal settings corresponded to and generally
avoided them. <br>
5. Users generally disliked seeing any time left on the microwave timer, finding it a chore to
clear before use. In addition, all the users tended to open the microwave before the timer hit
zero because they found the “ding” grating. <br>
</p>
<div>
</div>
</div>
<a href="#Observation"></a>
</div>
</div>
</div>
<div class="section">
</div>
<div id="Personas" class="flex-containerclear text-center justify-content-center align-content-baseline">
<h1 class="header">Personas</h1>
<div class="flex-containerclear justify-content-center align-items-center">
<div class="div1">
<img src="portAssets/1.png" alt="microwave" style="width:30rem;height:auto">
<div class="sectionv2">
</div>
<p class="boxes2">
Gabby is a college sophomore on the mandatory meal plan who loves to bake on the weekends. She often
uses the microwave at home but uses the one in her dorm room infrequently. Because of this, her
mental model of a microwave clashes with that of the dorm microwave interface. In addition, she is
not used to using a shared microwave and often gets disoriented from the leftover effects of other
students’ uses (uncleared timer, food stains, etc). Grace represents the portion of users that are
infrequent users of the dorm microwaves yet are used to the interface of the microwave at home, and
are unfamiliar with shared appliances.
</p>
</div>
</div>
<div class="flex-containerclear justify-content-center align-items-center">
<div class="div1">
<img src="portAssets/2.png" alt="microwave" style="width:30rem;height:auto">
<div class="sectionv2">
</div>
<p class="boxes2">
Grace is a college senior who lives off-campus and is off meal plan. She meal preps frequently and
thus regularly uses the microwave in the break room to heat up her food. Grace is often in a rush
and can’t be bothered to watch her food, but cooks things with many different heating times so she
just undershoots how much time the meal will take to heat. In addition, she hates the sound of the
microwave going off and is confused the the different microwave settings. Grace represents the type
of users who are frequent and familar users of the dorm microwave who care about getting their food
quickly and efficiently, and have not bothered to spend time explore anything other than what they
initially learned.
</p>
</div>
</div>
</div>
<div class="section">
</div>
<div id="Storyboard" class="container fluid text-center">
<div class="flex-containerPurple justify-content-center align-items-center">
<div class="div1">
<img id="story" src="portAssets/Thinks (11 × 17 in).png" alt="microwave">
<div class="sectionv2"></div>
</div>
<a href="#Storyboard"></a>
</div>
</div>
</body>
</html>