forked from sarahbawabe/cs1300-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhome.html
More file actions
274 lines (244 loc) · 11.7 KB
/
home.html
File metadata and controls
274 lines (244 loc) · 11.7 KB
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
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta charset="utf-8">
<title>Personas & Storyboards</title>
</head>
<body>
<!-- top navbar -->
<nav class="navbar navbar-expand-sm navbar-light bg-light text-info">
<div class="container-fluid">
<a class="navbar-brand">
<h1>♥ </h1>
</a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"
style="border: none;">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="navbar-item"> <a href="../home.html">projects</a></li>
<li class="navbar-item"> <a href="../about.html">about me </a></li>
<li class="navbar-item"> <a href="../fake-resume.pdf" target="_blank">resume </a></li>
</ul>
</div>
</div>
</nav>
<!-- title -->
<div class="title">
CVS self checkout - user interaction
</div>
<!-- project menu -->
<div class="project-menu">
<nav class="navbar navbar-expand-sm navbar-light text-info">
<div class="container-fluid">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#projectMenuContent"
aria-controls="projectMenuContent" aria-expanded="false" aria-label="Toggle navigation" style="border: none;">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="projectMenuContent">
<ul class="navbar-nav ml-auto">
<li class="navbar-item"> <a class="nav-link text-info" href="#context">context </a></li>
<li class="navbar-item"> <a class="nav-link text-info" href="#interface">the interface </a></li>
<li class="navbar-item"> <a class="nav-link text-info" href="#observations-interviews">observations +
interviews</a></li>
<li class="navbar-item"> <a class="nav-link text-info" href="#takeaways">takeaways</a></li>
<li class="navbar-item"> <a class="nav-link text-info" href="#personas">personas</a></li>
<li class="navbar-item"> <a class="nav-link text-info" href="#storyboard">storyboard</a></li>
<li class="navbar-item"> <a class="nav-link text-info" href="#conclusion">conclusion</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="subtitle" id="context">
context
</div>
<div class="paragraph">
<p>Let’s face it - we all hate long lines. Whether you have a million things to do or are on vacation,
nobody wants to wait twenty minutes to buy a bottle of shampoo. This is how self checkout systems gained
momentum in recent years. Self checkout allow customers to quickly scan and purchase their items instead
of paying at a traditional staffed counter. Retailers, such as CVS, have implemented self checkout counters
across their many locations in order to increase checkout efficiency. But the question is, do self-checkout
counters actually improve customers’ shopping experience? <br> <br>Let’s find out...
</p>
</div>
<div class="subtitle" id="interface">
the interface
</div>
<div class="paragraph">
<p>Before we talk about user interactions with the interface, let's look at what the interface looks like. Here are
some sketches:
</p>
</div>
<div class="image">
<img src="interface_sketches.svg" alt="sketches" width=1000>
</div>
<div class="subtitle" id="observations-interviews">
observations + interviews
</div>
<div class="paragraph">
For my research, I observed three users use CVS’s self checkout system and then interviewed them about their
experience.
When I made these observations, the CVS was relatively empty and there was no line for the self checkout or the
staffed
checkout. The following is a summary of my observations about the users’ actions and any struggles or difficulties
that they encountered:
</div>
<div class="paragraph">
<ul>
<li>One user pressed on all of the buttons without hesitation, before the voice prompt would finish its sentence.
</li>
<li>One user waited until after the voice prompts to perform an action. </li>
<li>One user had to insert her credit card three times until the payment worked. The user mentioned that she was
frustrated by this. </li>
<li>One user was confused by where the bagging area was when the voice prompted him to place his items in the
bagging area. </li>
<li>While paying, users are prompted by a big block of text asking if they would like to round up their change to
support a food bank.
All of the users I observed quickly clicked “no”. </li>
</ul>
</div>
<div class="paragraph">
After observing the users, I interviewed them about their experience. Here are a sample of questions from the
interview:
</div>
<div class="questions">
<ol>
<li>Do you have a preference between self-checkout counters or staffed checkout counters?</li>
<li>Do you think the number of items you purchase impact your decision on whether to self checkout?</li>
<li>What was your first reaction to the self-checkout interface?</li>
<li>Were you able to self-checkout in your first language today?</li>
<li>Have you encountered a technical glitch with this interface before? If so, do you remember what it was?</li>
<li>Did you find the text on the screen easy to read?</li>
<li>On a scale of 1-5, how helpful did you find the voice prompt with 1 being not helpful at all and 5 being
very helpful.</li>
<li>On a scale of 1-5, how annoying did you find the voice prompt with 1 being very annoying and 5 being not
annoying at all.</li>
<li>On a scale of 1-5, how would you rate your experience with the machine with 1 being very bad and 5 being
very good?</li>
<li>Would you use the self-checkout counter again?</li>
</ol>
</div>
<div class="subtitle" id="takeaways">
interview takeaways
</div>
<div class="heading">
<b> olivia </b>
</div>
<div class="interview-takeaways">
<ul>
<li> Prefers self checkout over staffed checkout </li>
<li> First reaction to the interface was "impressed"</li>
<li> Doesn't like the fact that you have to specify your payment method before paying</li>
<li> Found the voice prompt helpful and overall had a good experience with the machine</li>
</ul>
</div>
<div class="heading">
<b> mark </b>
</div>
<div class="interview-takeaways">
<ul>
<li> Prefers staffed counters but would consider using self checkout when buying only a few items </li>
<li> Doesn't like that you have to answer many questions</li>
<li> Described the interface as "all over the place" and thought there was too much text and too many colors</li>
<li> Encountered a technical glitch in the past and had a difficult time finding bagging area when I observed him
</li>
</ul>
</div>
<div class="heading">
<b> burcu </b>
</div>
<div class="interview-takeaways">
<ul>
<li> Prefers staffed counters when buying many items but prefers self checkout when not feeling social or if in a
hurry </li>
<li> First reaction to the interface was "wow we don't have this in Turkey". Second reaction was "annoyed by how
difficult it is to pay" </li>
<li> Didn't find the voice prompt helpful and also found it annoying</li>
<li> Felt annoyed when she finished paying and had an okay experience overall</li>
</ul>
</div>
<div class="subtitle" id="personas">
personas
</div>
<div class="heading">
<b> Busy Burcu </b>
</div>
<div class="paragraph">
Busy Burcu is a graduate student with a part-time job. She goes on a run every morning, works during the day, and
studies in the evenings.
She ran out of shampoo and conditioner and decided to quickly go to a CVS near her apartment.
At the self checkout counter, Busy Burcu is having a difficult time paying - the payment only went through on her
third try.
</div>
<div class="image">
<img src="map1.svg" alt="empathy map 1" width=800>
</div>
<div class="heading">
<b> Stressed Steven </b>
</div>
<div class="paragraph">
Stressed Steven is a Junior at college. He is stressed because he has 2 midterms this week and 3 job interviews.
He has a headache and decided to quickly stop at CVS to buy advil. He still has so much to do and is not
in the mood for social interactions. At the self checkout counter, Stressed Steven doesn't understand where the
bagging
area is and finds the voice prompt unhelpful.
</div>
<div class="image">
<img src="map2.svg" alt="empathy map 2" width=800>
</div>
<div class="subtitle" id="storyboard">
storyboard
</div>
<div class="image">
<img src="storyboard1.svg" alt="storyboard" width=800>
</div>
<div class="image">
<img src="storyboard2.svg" alt="storyboard" width=800>
</div>
<div class="image">
<img src="storyboard3.svg" alt="storyboard" width=800>
</div>
<div class="subtitle" id="conclusion">conclusion</div>
<div class="paragraph">
<p> This project taught me how to design interviews and write questions in way that reduces bias and gets the most
accurate and honest responses out of interviewees.
For example, asking similar questions in different ways might cause interviewees to mention something that they
had previously left out. I also learned about how creating personas can help with
product development by shedding light on user behavior. Moreover, this project helped me understand how
storyboarding (and storytelling in general) can help designers empathize with users and better understand what
problems a product should be trying to solve. </p>
</div>
<div>
<hr>
</div>
<footer class="myfooter">
<div class="copyright"> coded with ♥ | anonymous</div>
<div class="social">
<a href=""><i class="fa fa-facebook"></i></a>
<a href=""><i class="fa fa-instagram"></i></a>
<a href=""><i class="fa fa-linkedin"></i></a></div>
</footer>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
</body>
</html>