-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patharticle_punchpal.html
348 lines (298 loc) · 15.1 KB
/
article_punchpal.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
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="John Robb">
<title>Gamifying Workforce Timekeeping - John Robb, UX Designer</title>
<!-- Normalize -->
<link href="css/normalize.css" rel="stylesheet">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/6570aa56bc.js"></script>
<!-- Custom CSS -->
<link href="robbstrap.css" rel="stylesheet">
<link href="media.css" rel="stylesheet">
<!-- FancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,900' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,400i,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,900" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-M688J4"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-M688J4');</script>
<!-- End Google Tag Manager -->
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Jr</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html#projects">Projects</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="index.html#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="article">
<div class="jumbotron" style="padding-right: 0" id="article-pp">
<div class="container col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8">
<h1>Kronos: Gamifying Workforce Timekeeping</h1>
<p>May, 2016</p>
</div>
</div>
<!--Added "margin-bottom:96px" as a hack - otherwise the article would be blocked by the footer at the bottom on all articles-->
<div class="container col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8 col-lg-offset-3 col-lg-6" style="margin-bottom:96px">
<p>
Kronos approached our team of three (<a href="https://www.linkedin.com/in/kelsieoltman">Kelsie</a>, <a href="https://www.linkedin.com/in/nicholas-ranalli-ba888316">Nick</a>, and I) with a problem: although timekeeping technology has gone through significant advancement over the last few decades, employees still
punch in/out incorrectly. To alleviate this, Kronos wanted us to <b> explore using gamification and user-centered design to change employee behaviors, therefore
reducing the amount of time and money spent managing exceptions.</b>
</p>
<a class="fancybox" href="img/pp/intro-sketch.png">
<img src="img/pp/intro-sketch.png" class="img-responsive" style="box-shadow:none;">
</a>
<p>
Our project deliverables (<a href="https://vimeo.com/164313514">summed up in a 5-minute "protocast"</a>) were well-received by our stakeholders as well as the users we interviewed. We were able to create a product that targeted a broad range of
motivational factors, took no time away from current processes, and incorporated a game that was immediately understandable, yet sophisticated under the surface.
</p>
<p>
<h2>Challenges</h2>
</p>
<p>
<b>Scope: </b>
Although late and missed punches might be tied to factors other than motivation and habit, we were tasked with exploring gamification as a solution.
</p>
<p>
<b>Gamification Knowledge: </b>
We decided to take this project on as a challenge, as none of our team members had prior knowledge in the field of gamification.
</p>
<p>
<b>Class Constraints: </b>
Our class was focused on interaction design according to Cooper’s goal-directed design process (outlined in “About Face”), so we did not have much opportunity to explore
divergent processes through design thinking exercises. We also had to create a 3D component as a class requirement, which may not have been necessary if this was developed.
</p>
<p>
<h2>Process</h2>
</p>
<p>
Our team of 3 had a fairly regimented process ahead of us. Our professor split the project into 4 deliverables according to Cooper’s goal-directed design
process.
</p>
<a class="fancybox" href="img/pp/goal-directed.jpg">
<img src="img/pp/goal-directed.jpg" class="img-responsive" style="box-shadow:none;">
</a>
<p class="caption">Cooper's goal-directed design process</p>
<p>
<h3>Initial Research</h3>
</p>
<p>
To get our bearings on gamification (as we had no prior knowledge of the field), we started by conducting some academic research on gamification. We
quickly learned that gamification is a massive field, and in our final recommendations to Kronos we advised that they involve a gamification expert for any
future projects of this nature.
</p>
<a class="fancybox" href="img/pp/game-motivators.png">
<img src="img/pp/game-motivators.png" class="img-responsive">
</a>
<p class="caption">Game motivators and how we aligned them with our system</p>
<p>
Next, we looked into Kronos’ current offerings to see how a gamified product might fit into their current lineup, settling on the <a href="http://www.kronos.com/time-attendance/time-clocks/kronos-intouch.aspx">Kronos InTouch</a> as a
reference for our industrial design framework.
</p>
<p>
<h3>User Research</h3>
</p>
<p>
We interviewed three retail associates, narrowing our scope to the retail space in order to maintain a strong
focus on the problem at hand. Through our discussion guide, we learned about our interviewees’ typical routines and habits and how they might remember to
complete daily/weekly/monthly tasks.
</p>
<p>
After our interviews, we affinity-mapped our findings as a group:
</p>
<a class="fancybox" href="img/pp/affinity.jpg">
<img src="img/pp/affinity.jpg" class="img-responsive">
</a>
<p class="caption">Affinity-mapping our interview findings</p>
<p>
From these interviews, we developed our persona, Taylor Gray:
</p>
<a class="fancybox" href="img/pp/persona.png">
<img src="img/pp/persona.png" class="img-responsive">
</a>
<p class="caption">Our persona that would guide future design decisions</p>
<p>
One of our most important findings was the value that placed in efficiency and motivators outside the workplace (pursuing the career of their
choice, paying rent, etc.). Since we knew timekeeping wasn’t a priority in their life, we wanted to keep the interactions short, sweet, and to the point.
</p>
<p>
<h3>Creating the Game</h3>
</p>
<p>
We then set to work thinking about how the game would function. We wanted to incorporate principles we learned from our research like set-completion,
randomness, the paradox of choice (providing less choices when appropriate), and progressive disclosure.
</p>
<a class="fancybox" href="img/pp/gamify.jpg">
<img src="img/pp/gamify.jpg" class="img-responsive">
</a>
<p class="caption">Game mechanics ideation</p>
<a class="fancybox" href="img/pp/game-mech.png">
<img src="img/pp/game-mech.png" class="img-responsive">
</a>
<p class="caption">Game flow diagram</p>
<p>
<h3>Designing the Experience</h3>
</p>
<p>
Based on our user interviews, game mechanics, and user scenarios, we each created an initial paper prototype of the device’s interface. Our team then met
up to compare our designs, and we took the best elements from each design in a collaborative workshop.
</p>
<a class="fancybox" href="img/pp/nick.jpg">
<img src="img/pp/nick.jpg" class="img-responsive">
</a>
<p class="caption">Creating the paper prototype</p>
<a class="fancybox" href="img/pp/paperProto.jpg">
<img src="img/pp/paperProto.jpg" class="img-responsive">
</a>
<p class="caption">Completed low-fidelity paper prototype</p>
<p>
From this, I created an <a href="http://61jcxx.axshare.com/">interactive prototype in Axure</a> that would go through the scenarios we established. Another teammate created the email templates for reward notifications and progress updates.
</p>
<a class="fancybox" href="img/pp/axure.png">
<img src="img/pp/axure.png" class="img-responsive">
</a>
<p class="caption">Medium-fidelity interactive prototype (<a href="http://61jcxx.axshare.com/">See the full interactive prototype here</a>)</p>
<p>
This class project also required a 3D prototype component. I created sketches for the initial interaction framework, then my teammates created the physical prototype.
</p>
<a class="fancybox" href="img/pp/3d.jpg">
<img src="img/pp/3d.jpg" class="img-responsive">
</a>
<p class="caption">My sketches and the low-fidelity physical prototype</p>
<p>
And last but not least, we completed a quick brainstorming exercise with dot-voting to come up with "Punch Pal" as the name of our system.
</p>
<a class="fancybox" href="img/pp/naming.jpg">
<img src="img/pp/naming.jpg" class="img-responsive">
</a>
<p class="caption">Despite popularity, we did not go with "Accio Punchtronus"</p>
<p>
<h3>Final Deliverable</h3>
</p>
<p>
<iframe src="https://player.vimeo.com/video/164313514" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</p>
<p>
Our final deliverable consisted of a design summary document, <a href="img/pp/PunchPal_Presentation.pdf">a 15-minute presentation</a>, and a <a href="https://vimeo.com/164313514">5-minute protocast</a> (above) shown to our class and the
Kronos representative in attendance. I directed the protocast effort, while my teammates created the design summary and presentation. We received an A on our final deliverable as well as a great review from Kronos.
</p>
<p>
<h2>What I Would Do Differently</h2>
</p>
<p>
Focus on gamification earlier in the process by establishing a tighter scope.
</p>
<p>
Be in closer touch with the Kronos team throughout the process. The tight deliverable process made it difficult to get client reviews before submission
deadlines.
</p>
<p>
Conduct user testing throughout the design process to improve interface interactions.
</p>
<p>
<h2>What Went Well</h2>
</p>
<p>
The final deliverable was well-received by both the professor and Kronos.
</p>
<p>
The protocast was able to show the value of the system quickly and in an engaging way.
</p>
<p>
By taking on a challenging project, we were able to learn a significant amount about the field of gamification, which we were not familiar with upon starting the project.
</p>
</div>
</div>
<!-- <div class="container-fluid otherwork">
<div class="container col-xs-12 col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8 col-lg-offset-3 col-lg-6">
<h3 style="text-align:center">Other Work</h3>
<div class="col-xs-4">
<a href="article_ta.html">
<img src="img/cover_ta.png" class="img-responsive center-block" style="max-height:168px">
<p>Tissue Analytics Landing Page</p>
</a>
</div>
<div class="col-xs-4">
<a href="article_critter.html">
<img src="img/cover_critter.png" class="img-responsive center-block" style="max-height:168px">
<p>Critter Mobile App</p>
</a>
</div>
<div class="col-xs-4">
<a href="article_nhc.html">
<img src="img/cover_nhc.png" class="img-responsive center-block" style="max-height:168px">
<p>Nursing Home Compare: Usability Test</p>
</a>
</div>
<div class="col-xs-4 col-xs-offset-2">
<a href="article_pl.html">
<img src="img/cover_pl.png" class="img-responsive center-block" style="max-height:168px">
<p>Plainlanguage.gov: Information Architecture</p>
</a>
</div>
<div class="col-xs-4">
<a href="article_biz.html">
<img src="img/cover_biz.png" class="img-responsive center-block" style="max-height:168px">
<p>Business Magazine: UX Research</p>
</a>
</div>
</div>
</div> -->
<footer class="footer">
<p>Coded up by John Robb</p>
</footer>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</body>
</html>