backup.html

<div class="reveal">
    <div class="slides">
        <section>
    <h2 id="whats-your-skateboard-">Whats Your Skateboard?</h2>
<p><img src="img/cover_picture.jpg" alt="Lego StarWars Figures riding a hoverboard, a skateboard, and a bicycle"></p>
<p>photo by [Kenny Louie(<a href="https://www.flickr.com/photos/kwl/">https://www.flickr.com/photos/kwl/</a>)</p>

  </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>

  </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>

  </section>
  <section>
    
  </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>

  </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>

  </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>

  </section>
  <section>
    <p><img src="img/user_story_map.png" alt="Anatomy of a User Story Map"></p>

  </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>

  </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>

  </section>
  <section>
    <h3 id="why-story-map-">Why Story Map?</h3>
<p><em>Build shared understanding
</em>Encourage full discovery before prototyping
*Prioritize work to be done as a group</p>
<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&#39;ll need</h3>
<ul>
<li>painter&#39;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&#39;t do today</p>

  </section>
  <section>
    <h3 id="my-morning-first-draft">My morning - first draft</h3>
<p><img src="img/morning1.png" alt="My morning - first pass"></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&#39;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> information</li>
<li>Do you really know what has been mapped, or did you fill in with <strong>assumptions</strong>.</li>
<li>Are you sure about the story your are telling?</li>
</ul>

  </section>
  <section>
    <h3 id="anatomy-of-a-story-map">Anatomy of a Story Map</h3>
<ul>
<li><p>Users =&gt; actors in the story</p>
</li>
<li><p>Backbone =&gt; user activities</p>
</li>
<li><p>Walking Skeleton =&gt; major user tasks</p>
</li>
<li><p>User Stories =&gt; add detail to the story</p>
</li>
<li><p>Releases =&gt; organize and prioritize stories</p>
</li>
<li><p>Priorities =&gt; Lower Priority stories sink to the bottom</p>
</li>
</ul>

  </section>
  <section>
    <p><img src="img/user-story-mapping-6-638.jpg" alt="Anatomy of a User Story Map"></p>

  </section>
  <section>
    <h3 id="building-the-map">Building the map</h3>
<ol>
<li>Build and iterate on the full story</li>
<li>Frame the structure by labeling the backbone activities and the walking skeleton</li>
<li>Loosely prioritize stories based on everyone&#39;s needs; lower priorities sink</li>
</ol>

  </section>
  <section>
    <h3 id="what-you-get-from-this">What you get from this</h3>

  </section>
  <section>
    <h3 id="thorough-discovery">Thorough Discovery</h3>
<ul>
<li>Understand the full process<ul>
<li>Understand &quot;why&quot; 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>
    <h3 id="focus-on-outcomes">Focus on Outcomes</h3>
<ul>
<li>Prioritize features based on the problem they solve </li>
<li>Implement only what solves the problem or meets the objective</li>
</ul>
<p>(instead of perceived importance)</p>

  </section>
  <section>
    <h2 id="prioritization-tools">Prioritization Tools</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>
    <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>
    <h3 id="prototyping">Prototyping</h3>
<ul>
<li>What is the smallest thing you could build to prove/disprove an assumption?</li>
<li>Sketch &amp; 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>

  </section>
  <section>
    <h3 id="mvp-vs-most-valuable-features">MVP vs. Most Valuable Features</h3>
<p>Before we get too deep into the prototype, let&#39;s talk more about releasing valuable features every time.</p>
<p>A lot of times we look at the flow of the story and plan features in a chronological order</p>

  </section>
  <section>
    
  </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>
    <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">Strategies</h3>
<ul>
<li><strong>opening game strategy</strong> - when the number of features is too large, you can cut a slice across that gives you the minimum end-to-end  functionality;<br>It doesn’t solve all user’s stories, but it affects the largest number of stories.
With this product, they can have test data, begin testing it for load, and see how it will work</li>
</ul>
<ul>
<li><strong>midgame strategy</strong> - fill in and round out features; support optional steps; implement tough business rules; continue testing the product usability</li>
<li><strong>endgame</strong> - refine: make it look more polished and efficient; 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>
    <h3 id="scholarships">Scholarships</h3>
<p><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"></p>

  </section>
  <section>
    <p><img src="img/story_map_overview.jpg" alt="Overview of Story Map"></p>

  </section>
  <section>
    <p><img src="img/story_map_overview2.jpg" alt="Overview of Story Map"></p>

  </section>
  <section>
    <p><img src="img/story_map1.jpg" alt="Top of Story Map"></p>

  </section>
  <section>
    <p><img src="img/story_map2.jpg" alt="Middle of Story Map"></p>

  </section>
  <section>
    <p><img src="img/story_map3.jpg" alt="Bottom of Story Map"></p>

  </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 useable 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>&quot;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.&quot;</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>
    <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>
</div>

  </section>

    </div>
</div>