forked from elstamey/skateboard
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
544 lines (481 loc) · 25.5 KB
/
index.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
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>What's Your Skateboard?</title>
<meta name="description"
content="User Story Mapping is a valuable tool that gives you strategies to view features alongside the problems they solve. It is a powerful approach that allows many people to prioritize features, regardless of technical expertise. Instead of planning our project as a building that we must build with a strong foundation, we begin to plan as a vehicle. This focus delivers the Most Valuable Features to the customer by answering the question, “What’s Your Skateboard?”">
<meta name="author" content="Emily Stamey">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/simple.css" id="theme">
<link rel="stylesheet" href="my-style2.css">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-background="img/cover_picture.jpg" class="titleblock">
<h3 class="title" id="whats-your-skateboard-">What's Your Skateboard?</h3>
<h5 class="attrib"><a href="https://www.flickr.com/photos/kwl/">photo by Kenny Louie</a></h5>
<h3 class="url"><a href="https://joind.in/talk/176b2">https://joind.in/talk/176b2</a></h3>
</section>
<section>
<h4 id="ripped-from-the-pages-of-not-really-">Ripped from the pages of (not really)</h4>
<p><img src="img/book.jpg" alt="User Story Mapping by Jeff Patton"></p>
<aside class="notes">
We're going to talk about a lot of really helpful ideas I've gleaned from this book. My map examples will be more trivial than what he shares, because I was nervous I could fit them readably on the slides. There is a lot that you can learn from this book. He shares a lot of project stories, successes and losses, so I recommend it. I'm going to share with you the biggest ideas that helped us change our strategies.
</aside>
</section>
<section>
<h1 id="emily-stamey">Emily Stamey</h1>
<p>Application Developer at NC State University</p>
<p><img src="img/developer.png" alt="developer">
<img src="img/ncsu_block_s.png" alt="NC State University logo"></p>
<p><img src="img/crochet.png" alt="crochet hooks">
<img src="img/family.png" alt="family">
<img src="img/kayak.png" alt="kayak">
<img src="img/skate_icon.png" alt="rollerskate">
<img src="img/violin.png" alt="violin"></p>
<aside class="notes">
Just a few fun facts about me: I've been writing PHP since 1999. I've also got a lot of hobbies. I spend time with my family; we hike and paddle; I like to make things like blankets, silly costumes, and music. And I'm a retired Carolina Rollergirl.<br><br>
I'm also a developer at NC State. We maintain about 70 legacy PHP applications that support the Business of the College of Engineering. We have reduced that from about 90 applications 3.5 yrs ago when I joined the team, and we only have 3 fulltime developers tasked with this.
</aside>
</section>
<section>
<h3 id="a-typical-project-workflow">A Typical Project Workflow</h3>
<ul>
<li>Research features and needs</li>
<li>Build a prototype or wireframes</li>
<li>Break the project into components or parts for implementation </li>
<li>Develop each over several months</li>
<li>At each release, deliver something unusable/incomplete</li>
<li>Finally learn if the big guess of the prototype was correct</li>
<li>Changes are much more costly, so most are left alone</li>
</ul>
<aside class="notes">
Historically, we would have a brief meeting with the customer where we discussed client needs. Then, we developed for a few months and delivered something that solved a problem, but didn't always solve THEIR problems or fulfill a need. As we noticed this, we were looking for techniques to improve our communication and effectiveness. User Story Mapping taught us a lot of things.
</aside>
</section>
<section>
<h3 id="learning-objectives">Learning Objectives</h3>
<ol>
<li>What is a story map, and why would you want to use it?</li>
<li>Sketch a simple narrative flow</li>
<li>Critique the Scholarships story map</li>
</ol>
<aside class="notes">
Today we're going to cover the broad strokes of how user story maps work and the bigger ideas that can help you transform the way your team works. <br><br>
We're going to use a simple example to learn about building the story of your application. And I will show you a simple map that illustrates a project I'm working on.
</aside>
</section>
<section>
<h3 id="what-is-a-story-map-">What is a Story Map?</h3>
<p>A diagram of a project that tells the story of the people and systems involved in a process.</p>
<p>Detail is added as we learn more about the project</p>
<p>The map can be built for an existing application or a new application.</p>
<aside class="notes">
<li>A visual of the application and the processes that happen inside and outside of your application.</li>
<li>It highlights areas where you need to know more, and allows you to investigate that before you begin implementing.</li>
<li>This technique works for new and existing projects of any size.</li>
</aside>
</section>
<section>
<p><img src="img/user_story_map.png" alt="Anatomy of a User Story Map"></p>
<aside class="notes">
Structurally, your map will look a bit like this.
The story flows from left to right
Details and steps are built from the top down.
You can involve user types that are users of the application or even a background system process
When we get the full story described, we will begin to slice it. But we'll talk about that soon.
</aside>
</section>
<section>
<h3 id="who-should-story-map-">Who should Story Map?</h3>
<p>Anyone who knows the process ... Not Just Developers</p>
<p>At least one knowledgeable person from each group of stakeholders</p>
<aside class="notes">
Who do you want to bring to your story mapping discussion?
Anyone who knows the processes you're automating.
The room should actually have fewer programmers in the beginning unless they are there to ask questions. Developers shouldn't fill in the story. You cannot learn what your application is doing or supposed to be doing from people who don't use it to solve a problem they have.
</aside>
</section>
<section>
<h3 id="when-to-story-map-">When to Story Map?</h3>
<p>*When you have questions about an application or process</p>
<p>*When you begin new work</p>
<p>*Preferably before you being development</p>
<aside class="notes">
Any time you are doing work and don't know the business process behind it. The application can already exist, and you can use this to discover how new features or fixes should be implemented.
</aside>
</section>
<section>
<h3 id="why-story-map-">Why Story Map?</h3>
<ul>
<li><em>Build shared understanding</em></li>
<li>Encourage full discovery before prototyping</li>
<li>Prioritize work to be done as a group</li>
</ul>
<p><strong>*Lowers problems with estimates and feature creep</strong></p>
</section>
<section>
<h3 id="the-big-picture">The big picture</h3>
<p><img src="img/panorama.jpg" alt="Panorama of mountains, a town, and fields far into the distance"></p>
<p>Photo by <a href="https://www.flickr.com/photos/75487768@N04/8852553227/in/photolist-h8HTU3-JSeov4-h8HPQd-h8HWim-e5dUvX-5fR919-aB8Zp5-sbN2aF-n43Zp-nAUXRk-pw3kjL-qrSmhY-jSiBep-pYPm8B-eugDE4-4Tx3Rt-gUegPw-2Ri5uw-s8m2Qd-7j49P5-reXhVH-dCFW2M-eeoR86-8h1TkG-gsrTKm-4Nxays-dpe7UV-eDky7z-5j5d7W-oXXQy1-nY2L7h-mCqdmy-8RGz3D-nfTd25-6syxwQ-8zLvWC-4y5R9z-8gXBot-aATCWo-NvqGx-67vcv1-nxc6qH-bKhCEr-8w9uH9-65wnjj-5UX21y-3eov4o-BBsrb-668yVg-5W63ti">Barnyz</a></p>
</section>
<section>
<h4 id="focus-during-development">Focus during development</h4>
<p><img src="img/narrow_focus.jpg" alt="Focus"></p>
<p><a href="https://www.flickr.com/photos/theilr/6991409092/in/photolist-bDNNm5-dei4BD-hPt5SL-rhRZNN-8a7A6N-c8F4a1-4hHTYQ-bULsP8-nFZm8R-npMA17-a7MRtV-aksL6R-ojpRNK-JtLhP-d1uCHu-6akRDL-nAPrzR-9LPpCP-dMHo1G-4Tb69M-3fK6eh-kEZkGe-5X9ePa-4UNFbB-TFs2-pg3VkM-qmgY5N-8BEgCx-dkYvQv-oVWE1S-dcfhQG-8Zre24-cNJ6sW-eksvWx-e2Woij-6ARqEj-7NcVUv-oiqrhR-9rfVkW-5W1swG-pzBSHK-EZB1y-6bays9-fyamKk-rhgNfR-bvcx6h-4Gaj4U-6vy3ei-kUcpkp-dCVdy">Photo by Theilr</a></p>
</section>
<section>
<h3 id="where-">Where?</h3>
<p>A large, clear wall or whiteboard.</p>
<p>A place central to the team, at least in the beginning.</p>
</section>
<section>
<h3 id="you-ll-need">You'll need</h3>
<ul>
<li>painter's tape</li>
<li>markers</li>
<li>post-its (many colors)</li>
</ul>
</section>
<section>
<h3 id="your-morning">Your Morning</h3>
<p>List the first five tasks or activities you did this morning after getting out of bed.</p>
<p>Put each one on a post-it provided</p>
</section>
<section>
<h3 id="your-typical-morning">Your Typical Morning</h3>
<p>Pick 3 things you normally do in the morning that you didn't do today</p>
</section>
<section>
<h3 id="my-morning-first-draft">My morning - first draft</h3>
<p><a href="img/morning1.png"><img src="img/morning1.png" alt="My morning - first pass"></a></p>
</section>
<section>
<h3 id="my-morning-revised">My morning - revised</h3>
<p><img src="img/morning2.png" alt="My morning - revised"></p>
</section>
<section>
<h3 id="users">Users</h3>
<p>Who are the Actors/Users in your morning routine?</p>
</section>
<section>
<h3 id="build-activity-groups">Build Activity Groups</h3>
<p>Sometimes several tasks can be grouped together.</p>
</section>
<section>
<h3 id="my-morning-with-activity-groups">My morning - with activity groups</h3>
<p><img src="img/morning3.png" alt="My morning - with activity groups"></p>
</section>
<section>
<h3 id="my-morning-alternate-path">My morning - alternate path</h3>
<p><img src="img/morning4.png" alt="My morning - first pass"></p>
</section>
<section>
<h3 id="building-the-narrative">Building the narrative</h3>
<p>Let's put them together to build a story of your morning!</p>
<ul>
<li><p>There are variations between people, days of week, local and out-of-towners</p>
</li>
<li><p>If we were automating or tracking some of these morning tasks, we might identify activity groups and prioritize those groups for our application.</p>
</li>
</ul>
</section>
<section>
<h3 id="where-to-learn-more">Where to Learn More</h3>
<ul>
<li>Risk</li>
<li>Assumptions</li>
<li>Uncertainty</li>
</ul>
<p>If you cannot elaborate, mark it and revisit</p>
</section>
<section>
<h3 id="clarifying-questions">Clarifying Questions</h3>
<ul>
<li>What could we learn to replace <strong>risk</strong> with <strong>REAL</strong> information?</li>
<li>Do we <u>really</u> know what has been mapped, or did we fill in <strong>assumptions</strong>?</li>
<li>Are you sure about the story you're telling?</li>
</ul>
</section>
<section>
<h3 id="thorough-discovery">Thorough Discovery</h3>
<ul>
<li>Understand the full process<ul>
<li>Understand "why" steps are needed in the process</li>
<li>Talk about things inside and outside of the app</li>
</ul>
</li>
<li>Simplify and lower risk at implementation<ul>
<li>Lowers the questions at the phase of implementation</li>
<li>Limits Feature Creep (beginning implementation w/o understanding, new features come in)</li>
</ul>
</li>
<li>Better estimates </li>
</ul>
<p>Discovery is cheaper at the beginning of a project, than during implementation</p>
</section>
<section>
<p><img src="img/user-story-mapping-6-638.jpg" alt="Anatomy of a User Story Map"></p>
<aside class="notes">
<p>Anatomy of a Story Map</p>
<ul>
<li><p>Users => actors in the story</p>
</li>
<li><p>Backbone => user activities</p>
</li>
<li><p>Walking Skeleton(blue) => major user tasks</p>
</li>
<li><p>User Stories => add detail to the story</p>
</li>
<li><p>Releases => organize and prioritize stories</p>
</li>
<li><p>Priorities => Lower Priority stories sink to the bottom</p>
</li>
</ul>
</aside>
</section>
<section>
<h3 id="building-the-map">Priorities</h3>
<p>Loosely prioritize stories based on everyone's needs; lower priorities sink</p>
<aside class="notes">
But we have seen that this gets swayed heavily by the person who wants the feature. Politics are heavy at a university.
</aside>
</section>
<section>
<h2 id="prioritizing-features">Prioritizing Features</h2>
<ul>
<li><strong>Differentiator</strong> - feature sets you apart from competition</li>
<li><strong>Spoiler</strong> - moves in on someone else’s differentiator</li>
<li><strong>Cost reducer</strong> - reduces organizational costs</li>
<li><strong>Table stakes</strong> - feature necessary to compete</li>
</ul>
</section>
<section>
<h2 id="prioritization-tools">Prioritizing the Project</h2>
<ul>
<li>Who will use this product?</li>
<li>What steps must they accomplish for success?</li>
<li>Remove/postpone the rest</li>
</ul>
</section>
<section>
<h3 id="focus-on-outcomes">Focus on Outcomes</h3>
<ul>
<li>What are you hoping to do with your application?</li>
<li>Prioritize features based on the problem they solve </li>
<li>Implement only what solves the problem or meets the objective</li>
</ul>
</section>
<section>
<h3 id="prototyping">Prototyping for Discovery</h3>
<ul>
<li>What is the smallest thing you could build to prove/disprove an assumption?</li>
<li>Sketch & prototype to test viability of the solution</li>
<li>Aim for less than minimum, get feedback, and iterate often</li>
<li>When you give prototype to <strong>development partners</strong> you can include metrics to see what they actually do</li>
</ul>
<aside class="notes">
When you begin developing for the project, a prototype is a lightweight way to prove you are moving in the risk direction. You may plan to implement a feature with a little extra time for exploration.
<br>{read the questions}
<br>And this leads me to one of my favorite concepts from this book...
</aside>
</section>
<section>
<h3 id="mvp-vs-most-valuable-features">MVP vs. Most Valuable Features</h3>
<p>Let's talk more about releasing valuable features every time.</p>
<p>Sometimes we look plan features in a chronological order</p>
<p>Or we divide the project into components</p>
</section>
<section>
<h3 id="when-we-build-in-parts">When we build in parts</h3>
<p><img src="img/car_in_parts.jpg" alt="Building a car in parts"></p>
</section>
<section>
<!--<h3 id="when-we-build-in-parts">When we build in parts</h3>-->
<p><img src="img/painting_in_parts.jpg" alt="Painting in parts"></p>
</section>
<section>
<h1>Instead we want to iterate</h1>
</section>
<section>
<!--<h3 id="iterate-on-the-design">Iterate on the design</h3>-->
<p><img src="img/iterative_mona_lisa.jpg" alt="Painting in layers as the image becomes cleared"></p>
</section>
<section>
<!--<h3 id="most-valuable-features-">Most Valuable Features!!!</h3>-->
<p><img src="img/mvp.png" alt="Building a car in parts"></p>
</section>
<section>
<h3 id="strategies">Prioritization Strategies Change Over Time</h3>
<h4><b>opening game strategy</b></h4>
<ul>
<li>When the number of features is too large, you can cut a slice across that gives you the minimum end-to-end functionality;</li>
<li>It doesn’t solve all user’s stories, but it affects the largest number of stories.</li>
<li>With this product, they can have test data, begin testing it for load, and see how it will work</li>
</ul>
</section>
<section>
<h3 id="strategies">Prioritization Strategies Change Over Time</h3>
<h4><strong>midgame strategy</strong></h4>
<ul>
<li>fill in and round out features</li>
<li>support optional steps</li>
<li>implement tough business rules</li>
<li>continue testing the product usability</li>
</ul>
</section>
<section>
<h3 id="strategies">Prioritization Strategies Change Over Time</h3>
<h4><strong>endgame strategy</strong></h4>
<ul>
<li>refine: make it look more polished and efficient </li>
<li>it’s here that you’ll have feedback from users that can be applied.</li>
</ul>
</section>
<section>
<h3 id="strategies">Strategies</h3>
<p><img src="img/opening_mid_end_game.jpg" alt="Opening Mid and Eng-game Strategies stacked on top of each other"></p>
</section>
<section>
<h1>My project</h1>
</section>
<section>
<h3 id="scholarships">Scholarships</h3>
<p><a href="img/scholarships_overview.jpg"><img src="img/scholarships_overview.jpg" alt="Engineering Foundation allocates funds to the Scholarships, the Selection Committee chooses the best candidates and the Financial Aid Office disburses the money to students each semester"></a><</p>
</section>
<section data-background="img/story_map_overview.jpg">
</section>
<section data-background="img/story_map_overview2.jpg">
</section>
<section data-background="img/story_map1.jpg">
</section>
<section data-background="img/story_map2.jpg">
</section>
<section data-background="img/story_map3.jpg">
</section>
<section>
<h3 id="summary">Summary</h3>
<ul>
<li>A tool you can use with non-technical subject matter experts, customers, etc</li>
<li>A visual guide for managing your workload</li>
<li>Focus on objectives when you prioritize</li>
<li>Plan to deliver a usable product at each deliverable</li>
</ul>
</section>
<!--<section>-->
<!--<h1 id="questions-">Questions?</h1>-->
<!--</section>-->
<!--<section>-->
<!--<h1 id="maybe-slides">maybe slides</h1>-->
<!--</section>-->
<!--<section>-->
<!--<h3 id="user-story">User Story</h3>-->
<!--<p>"A user story is a tool used in Agile software development to capture a-->
<!--description of a software feature from an end-user perspective. The user-->
<!--story describes the type of user, what they want and why. A user story-->
<!--helps to create a simplified description of a requirement."</p>-->
<!--<p>~Wikipedia</p>-->
<!--</section>-->
<!--<section>-->
<!--<h3 id="user-story-structure">User Story Structure</h3>-->
<!--<p>As a {role}, I want {feature} so that {reason}.</p>-->
<!--</section>-->
<!--<section>-->
<!--<h3 id="the-story-map">The Story Map</h3>-->
<!--<p>Composed of many user stories.</p>-->
<!--<p>Tells the story of your application. </p>-->
<!--<p>It can include parts of the story that happen outside of the application.</p>-->
<!--</section>-->
<!--<section>-->
<!--<h3 id="what-you-get-from-this">What you get from this</h3>-->
<!--</section>-->
<section>
<h1>Sooo...</h1>
</section>
<section data-background="img/cover_picture.jpg" class="titleblock">
<h3 class="title" id="whats-your-skateboard-">What's Your Skateboard?</h3>
</section>
<section data-background="img/cover_picture.jpg" class="titleblock">
<h3 class="title" id="questions">Questions?</h3>
</section>
<section>
<div class="author">
<h1 class="name">Emily Stamey</h1>
<h3 class="twitter">
<a href="http://twitter.com/@elstamey">@elstamey</a>
</h3>
<h3 class="url">
<a href="http://elstamey.com">http://elstamey.com</a>
</h3>
<h3 class="url"><a href="https://elstamey.github.io/skateboard/#/">https://elstamey.github.io/skateboard/#/</a> </h3>
<h3 class="url"><a href="https://joind.in/talk/176b2">https://joind.in/talk/176b2</a></h3>
</div>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
slideNumber: true,
history: true,
center: false,
loop: false,
showNotes: false,
viewDistance: 3,
transition: 'none', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{
src: 'lib/js/classList.js', condition: function () {
return !document.body.classList;
}
},
{
src: 'plugin/markdown/marked.js', condition: function () {
return !!document.querySelector('[data-markdown]');
}
},
{
src: 'plugin/markdown/markdown.js', condition: function () {
return !!document.querySelector('[data-markdown]');
}
},
{
src: 'plugin/highlight/highlight.js', async: true, callback: function () {
hljs.initHighlightingOnLoad();
}
},
{src: 'plugin/zoom-js/zoom.js', async: true},
{src: 'plugin/notes/notes.js', async: true},
{src: 'node_modules/socket.io/socket.io.js', async: true},
{src: 'plugin/notes-server/client.js', async: true}
]
});
</script>
</body>
</html>