article: changing the intro, we're getting somewhere

src/data/app-feature.ts

@@ -1,3 +1,26 @@
+export const newsAppFeatures = [
+  'Accessing the latest news articles',
+  'Reading one new article',
+  'Breaking news alerts',
+  'Live news streaming',
+  'Search',
+  'Login / sign up',
+  'Personalized news feed',
+  'News article bookmarking',
+  'News article sharing',
+  'Commenting on articles',
+  'Multi-language support',
+  'News article recommendations',
+  'News article summarization',
+  'News article audio playback',
+  'Offline reading',
+  'Polls',
+  'News article ratings',
+  'News article history',
+  'News articles based on geolocation',
+  'Public access to data sources'
+]
+
 export const appFeatures = [
   'Login / Sign Up',
   'Search',

src/modules/pull-system/FlowArticle.vue

@@ -15,11 +15,11 @@ import SimulationDashboard from '@/modules/pull-system/simulation/SimulationDash
 <template>
   <div class="flow-article">
     <h1>Pull system</h1>
-    <h2>Ekiden (駅伝): long-distance running relay race</h2>
+    <!-- <h2>Ekiden (駅伝): long-distance running relay race</h2> -->
     <FlowIntro class="text" />
     <SeparatorIcon />
-    <FlowHypothesis class="text" />
+    <!-- <FlowHypothesis class="text" /> -->
-    <SeparatorIcon />
+    <!-- <SeparatorIcon /> -->
     <FlowSetup class="text" />
     <FlowDashboard class="above" />
     <FeatureSteps alias="playground" />

src/modules/pull-system/article/FlowConclusion.vue

@@ -17,8 +17,9 @@
     </p>
     <p>
       But the best way to succeed is to ask: "Is this what you need? How can I
-      help you?". Just like in Ekiden, handovers are where the real struggles
+      help you?".
-      happen but we're on the same race, together.
+      <!-- Just like in Ekiden, handovers are where the real struggles
+      happen but we're on the same race, together. -->
     </p>
   </div>
 </template>

src/modules/pull-system/article/FlowIntro.vue

@@ -1,14 +1,31 @@
 <template>
   <div class="flow-intro">
-    <h2>What's the fastest way to deliver an app?</h2>
     <p>
-      How good are we to succeed a project? Delivering the features at the good
+      In lean manufacturing, one key aspect is the notion of
-      quality and at the right time. We're pretty bad at it and there is a lot
+      <em>lead time</em>: the time needed by the company to deliver the product
-      of misconceptions on how to manage people to do what need to be done. I
+      requested by the client starting when the client makes the order. For lean
-      wanted to create a simulation to plan ahead and see what are the
+      practitioners, the way to deliver at the right time is by improving how
-      consequences of different strategy patterns and which is the most
+      their delivery system works with... The pull system!
-      effective.
+    </p>
+    <p>
+      The pull system is in opposition of the push system. Instead of trying to
+      make everyone work at their maximum capacity, we try to improve the time
+      it needs to deliver a feature.
+    </p>
+    <p>
+      I wanted to create a simulation to see what are the consequences of
+      different strategy patterns and which is the most effective.
+    </p>
+    <p>
+      Let's see what happens when we want to create a Newsletter mobile app. We
+      have some functionalities to implement and we want to measure how long it
+      takes.
+    </p>
+    <p>
+      <em
+        >Note: as we'll visualize work done between teams, it needs space so
+        this article has a better experience on desktop.</em
+      >
     </p>
-    <p><em>Note: better experience on desktop.</em></p>
   </div>
 </template>

src/modules/pull-system/article/FlowSetup.vue

@@ -8,7 +8,7 @@ import QualityIssue from '@/modules/pull-system/feature/QualityIssue.vue'
 import { Feature } from '@/modules/pull-system/feature/feature'
 
 const feature: Feature = {
-  name: 'As a user, in the homepage, I can login',
+  name: 'As a user I can have access to the latest news from the homepage.',
   complexity: 3,
   leadTime: 2,
   qualityIssue: 4,
@@ -20,30 +20,41 @@ const feature: Feature = {
 <template>
   <div>
     <p>
-      You're a Product Manager in a project who has just started, your goal is
+      The project who has just started, our goal is to make a product as fast as
-      to make a product as fast as you can. With you, you'll have the product
+      you can. With you, you'll have the product team, designers, developers and
-      team, designers, developers and a release team.
+      a release team.
+    </p>
+    <p>
+      First things first, what is a feature? A feature is a piece of software
+      that enables <em>things</em> for the user. It can be the capability to
+      read articles or to share them or even to be able to read one without the
+      need for internet connection. In our simulation, a feature will be
+      represented as follow:
     </p>
-    <p>This is a feature:</p>
     <FeatureItem :feature="feature" />
+    <p>
+      It starts with the intention "<code>{{ feature.name }}</code>". This is what we'll add to the mobile app.
+    </p>
     <p>
       <span class="numeric">({{ feature.complexity }})</span> is the complexity
-      of the feature. The more complex a feature is, the more chance to have
+      of the feature. The more complex a feature is, the more chance we introduce a defect.
-      defect we have.
     </p>
     <p>
       <span class="numeric">{{ feature.leadTime }}d</span> is the number of days
-      the feature started its journey. The ultimate goal is to reduce this
+      the teams work on the feature. The goal is to reduce this number and
-      number and deliver as fast as possible.
+      deliver as fast as possible.
     </p>
     <p>
       <QualityIssue class="inline" :quality-issue="feature.qualityIssue" />
-      are the number of defects the feature had during the flow.
+      are the number of defects the feature had during the flow. For the sake of
+      simplicity, we assume teams are capable of detecting every defects and we
+      never deliver defects.
     </p>
     <p>
-      You have 20 features to deliver, and each day you can choose between 3
+      Okay! We have 20 features to deliver. It takes one day for each team to finish
-      strategies:
+      their part for each feature.
     </p>
+    <p>Each day, you can choose between 3 strategies:</p>
     <ol>
       <li>
         Push system
@@ -58,19 +69,15 @@ const feature: Feature = {
         <ProblemSolvingIcon />
       </li>
     </ol>
-    <FlowControls :with-eraser="false" />
     <p>
       In this article we'll focus on how these strategies are efficient and what
-      are the impact on the quality the teams produce.
+      are the impact on the quality the teams produce. Let's dive in each
+      strategy!
     </p>
-    <h3>The push system: start features as many as possible</h3>
+    <h3>The push system: start as many features as possible</h3>
-    <h4>Seeking for the most of each team</h4>
     <p>
-      Pushing all the feature as fast as possible, this is the only strategy
+      By pushing features from the start, we try to maximize the time worked by teams on the product.
-      that allows us to target the best possible result: `# step × # status × #
+      This way, no money is wasted, everyone has everytime something to do.
-      features`. We may overburden teams in the process though. But as we
-      already invest money everybody to work so if there is someone who has
-      nothing to do, this is just money down the drain.
     </p>
     <h3>The pull system: produce features only when the next team needs it</h3>
     <p>
@@ -79,6 +86,12 @@ const feature: Feature = {
       waiting for next team to be ready before doing some extra work than having
       stock of feature pre-baked.
     </p>
+    <p>
+      To make this happen we first need to setup blue bins: our security stocks
+      Blue bins make sure teams can work without any blockers. The next team
+      will always have material to transform. Here, we'll have 2 blue bins per
+      team.
+    </p>
     <h3>Problem solving: no production, just reflection</h3>
     <p>
       We invest days where we are not productive at all to investigate and
@@ -87,15 +100,6 @@ const feature: Feature = {
       understand and limit rework. The more the team investigate, the more the
       team learn and start to be extremely good at problem solving.
     </p>
-    <h3>Blue bin: the security stock</h3>
-    <p>
-      Blue bins are your security stock, they make sure teams can work without
-      any blockers. The next team will always have material to transform. But it
-      comes with a cost: too many blue bins add overburden, stagnation
-      (increasing lead time) and duplicated mistakes. The less you have, the
-      more the team can focus. But the more you have, the more secure you are to
-      make teams work, we have to find the good balance.
-    </p>
   </div>
 </template>
 

src/modules/pull-system/feature/feature.fixture.ts

@@ -1,4 +1,4 @@
-import { appFeatures } from '@/data/app-feature'
+import { newsAppFeatures } from '@/data/app-feature'
 import { birds } from '@/data/bird'
 import { Feature } from '@/modules/pull-system/feature/feature'
 import { randomInteger } from '@/utils'
@@ -21,7 +21,7 @@ export const birdFeatures: Feature[] = birds.map((name) => ({
   qualityIssue: 0
 }))
 
-export const mobileAppFeatures: Feature[] = appFeatures.map((name) => ({
+export const mobileAppFeatures: Feature[] = newsAppFeatures.map((name) => ({
   name,
   complexity: randomInteger(1, 5),
   leadTime: 0,