A place to cache linked articles (think custom and personal wayback machine)
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.

index.html 30KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang=fr>
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset=utf-8>
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Product Fail (archive) — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="http://www.svpg.com/product-fail">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. Product Fail (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="http://www.svpg.com/product-fail">Source originale du contenu</a></h3>
  445. <p class="p1"><span class="s1">NOTE: This article is a narrative version of a talk I’ve given for developers at the <em><a href="http://www.craft-conf.com">Craft Conference</a></em> and for product managers and designers at <em><a href="http://www.mtpcon.com">Mind The Product</a>.  </em></span></p>
  446. <p class="p1"><span class="s1"><em/></span>In this article I’d like to discuss the root causes of so many product failures.  </p>
  447. <p class="p1">I see the same basic way of working at the majority of companies, and I can’t help but notice that this is not close to how the best companies actually work.</p>
  448. <p class="p1"><span class="s1">Let me warn you that this discussion can be a little depressing, especially if it hits too close to home, so if that’s the case, I’ll ask you to hang in there.</span></p>
  449. <p class="p1"><span class="s1">Let’s start by walking through the process that the vast majority of companies still use to create products.  I’ll try not to editorialize yet; let me first just describe the process:</span></p>
  450. <p class="p1"><span class="s1">Everything starts with <em>ideas</em>.  In most companies, they’re coming from execs or key stakeholders or business owners, or big customers (or prospective customers), but in any case there are always a whole bunch of things that different parts of the business need us to do.</span></p>
  451. <p class="p2">Now most companies want to prioritize those ideas into a <em>roadmap</em>, and they do this for two main reasons.  First, they want us to work on the most valuable things first, and second, they want to be able to predict when things will be ready.</p>
  452. <p class="p1"><span class="s1">In order to do this, there is almost always some form of <em>quarterly or annual planning session</em> where the leaders consider the ideas and negotiate a product roadmap. But in order to prioritize, they first need some form of a <em>business case</em> for each item.  </span></p>
  453. <p class="p2">Some companies do formal business cases, and some are informal, but either way it boils down to the need to know two things about each idea: 1) how much money will it make? and 2) how much money or time will it cost?  This info is then used to come up with the roadmap, usually for the next quarter but sometimes as much as a year out.</p>
  454. <p class="p1"><span class="s1">At this point the product and technology organization has its marching orders, and they typically work the items from the highest priority on down.</span></p>
  455. <p class="p1"><span class="s1">Once an idea makes it to the top of the list, the first thing that’s done is for a product manager to talk to the stakeholders and flesh the idea out and come up with a set of “<em>requirements</em>.”  </span></p>
  456. <p class="p1"><span class="s1">These might be user stories or they might be more like some form of a functional spec but it’s purpose is to communicate with the designers and engineers what needs to be built.</span></p>
  457. <p class="p1"><span class="s1">Once the requirements are gathered up, the <em>user experience design</em> team (assuming the company has such a team), is asked to provide the interaction design, the visual design, and in cases of physical devices, the industrial design.</span></p>
  458. <p class="p1"><span class="s1">Finally the requirements and design specs make it to <em>engineers</em>.  This is usually where Agile finally enters the picture. </span></p>
  459. <p class="p1"><span class="s1">Anyway, the engineers will typically break up the work into a set of <em>iterations</em> - called “sprints” in the Scrum process.  So maybe it takes 1-3 sprints to build out the idea.  </span></p>
  460. <p class="p1"><span class="s1">Hopefully the <em>QA testing</em> is part of those sprints, but if not, the QA team will follow this up with some testing to make sure the new idea works as advertised, and also doesn’t introduce other problems (known as <em>regressions</em>)</span></p>
  461. <p class="p1"><span class="s1">Once we get the green light from QA, the new idea is finally <em>deployed</em> to actual customers.</span></p>
  462. <p class="p1"><span class="s1">In the vast majority of companies that I first meet, large and small, this is essentially how they work, and have worked, for many years.  Yet these same companies consistently complain about the<em> lack of innovation</em> and the <em>very long time </em>it takes to make it from idea to customer’s hands.</span></p>
  463. <p class="p1"><span class="s1">You might recognize that while I mentioned Agile, and while almost everyone today claims to be Agile, what I’ve just described is very much a <em>Waterfall</em> process.  In fairness to the engineers, they’re typically doing about as much Agile as they can given the broader Waterfall context. </span></p>
  464. <p class="p1"><span class="s1">OK, so that may be what most teams do, but why is that necessarily the reason for so many problems?</span></p>
  465. <p class="p1"><span class="s1">What I want to do now is to connect the dots for you to show you why this very common way of working is actually responsible for most failed product efforts.</span></p>
  466. <p class="p1"><span class="s1">Now I could literally talk all day long about the problems with this process, but what I’m going to do here is share what I think are the “top 10” most serious problems with this way of working.  To be clear, I’m arguing that all ten of these are <em>very serious issues</em>, any one of which could derail a team, but many companies actually have most or even all of these problems.</span></p>
  467. <p class="p1"><span class="s1">1. Let’s start at the top – the <em>source of ideas</em>.  This model leads to sales-driven specials, and stakeholder-driven products.  Lots more to come on this key topic, but for now let me just say that this is not the source of our best product ideas.  Another consequence of this approach is the lack of empowerment of the teams - in this model they’re just there to implement.  Mercenaries.</span></p>
  468. <p class="p1"><span class="s1">2. Next let’s talk about the fatal flaw in these <em>business cases</em>.  Now to be clear, I’m actually in favor of doing business cases, at least for ideas that need a larger investment.  But the way most companies do them, at this stage, in order to come up with a prioritized roadmap, is truly ridiculous. Here’s why. Remember those two key inputs to every business case?  How much money you’ll make, and how much it will cost?  Well, the cold truth is that at this stage, we have no clue on either of these, and we can’t know.</span></p>
  469. <p class="p1"><span class="s1">We can’t know how much money we’ll make because that depends hugely on how good the solution turns out to be.  If the team does an excellent job, this could be wildly successful and literally change the course of the company.  On the other hand, the truth is that many product ideas end up making absolutely nothing.  And that’s not an exaggeration for effect.  Literally nothing.  In any case, one of the most critical lessons in product is <em>knowing what we can’t know</em>, and we just can’t know at this stage how much money we’ll make.</span></p>
  470. <p class="p1"><span class="s1">Likewise, we have no idea what it will cost to build.  Without knowing the actual solution, this is extremely hard for engineering to predict.  Most experienced engineers will refuse to even give an estimate at this stage, but some are pressured into the old “t-shirt sizing” compromise - just let us know if this is “Small, Medium, Large and Extra Large.”</span></p>
  471. <p class="p1"><span class="s1">But company’s really want those prioritized roadmaps, and in order to get one they need some kind of system to rate the ideas, so people play the business case game.</span></p>
  472. <p class="p1"><span class="s1">3. An even bigger issue comes next.  Companies get very excited about their <em>roadmaps</em>.   I’ve seen countless roadmaps and the vast majority of them are essentially prioritized lists of features.  Marketing needs this feature for a campaign.  Sales needs this feature for a new customer. Someone wants a PayPal integration.  You get the idea.</span></p>
  473. <p class="p2">But here’s the problem, and it’s maybe the biggest problem of all.  I call this the “<em>two inconvenient truths about product</em><strong>.</strong>”  </p>
  474. <p class="p2">The first truth is that at least <em>half of our ideas are just not going to work</em>.  There are many reasons for an idea to not work out.  The most common is that the customers just aren't as excited about this idea as we are.  So they choose not to use it.  Sometimes they want to use it, but they try it out and it's so complicated that it's simply more trouble than it's worth, which ends up as the same result – the users don't choose to use it. Sometimes the issue is that the customers would love it but it turns out to be much more involved to build than we thought, and we decide we simply can't afford the time and money to actually deliver.</p>
  475. <p class="p1"><span class="s1">So I promise you that at least half the ideas on your roadmap are not going to deliver what you hope.  By the way, the really good teams assume that at least three quarters of the ideas won’t perform like we hope.</span></p>
  476. <p class="p1"><span class="s1">If that's not bad enough, the second inconvenient truth is that even with the ideas that do prove to have potential, it typically takes <em>several iterations</em> to get the implementation of this idea to the point where it actually delivers the necessary business value.  We call that “time to money.”</span></p>
  477. <p class="p1"><span class="s1">One of the most important things about product that I’ve learned is that there is simply no escaping these truths, no matter how smart you might be.  And I've had the good fortune to work with many truly exceptional product teams.  The real difference is how you deal with these truths.</span></p>
  478. <p class="p1"><span class="s1">4. Next let’s talk about the <em>role of product</em> in this model.  In fact, we wouldn’t even really call this role product at all.  It’s really a form of project management.  In this model it’s more about <em>gathering requirements and documenting them</em> for engineers.  At this point let me just say that this is 180 degrees away from modern product management.</span></p>
  479. <p class="p1"><span class="s1">5. It’s a similar story with the <em>role of design</em>.  It’s way too late in the game to get the real value of design, and mostly what’s being done is what we call the “lipstick on the pig” model.  The damage has already been done, and now we’re just trying to put a coat of paint on the mess.  The UX designers know this is not good, but they try to make it look as nice and consistent as they can.</span></p>
  480. <p class="p1"><span class="s1">6. Maybe the biggest missed opportunity in this model, is the fact that <em>engineering gets brought in way too late</em><strong>. </strong>We say if you’re just using your engineers to code, you’re only getting about half their value.  The little secret in product is that <em>engineers are typically the best single source of innovation</em>, yet they are not even invited to the party in this process.</span></p>
  481. <p class="p1"><span class="s1">7. Not only is engineering brought in way too late, but the principles and key benefits of <em>Agile</em> enter the picture far too late.  Teams using Agile in this way are getting maybe 20% of the actual value and potential of Agile methods.  What you’re really seeing is Agile for delivery but the rest of the organization and context is anything but agile.</span></p>
  482. <p class="p1"><span class="s1">8. This entire process is very <em>project-centric</em>.  The company usually funds projects, staffs projects, and pushes these projects through the organization and finally launches projects.  Unfortunately, <em>projects are output and product is all about outcome</em><strong>. </strong>This process predictably leads to orphaned projects.  Yes, something was finally released but it doesn’t meet its objectives so what really was the point?  In any case, it’s a serious problem and not close to how we need to build products.</span></p>
  483. <p class="p1"><span class="s1">9. The biggest flaw of the old Waterfall process has always been, and remains, that all the risk is at the end.  This means that <em>customer validation happens way too late</em><strong>.  </strong></span></p>
  484. <p class="p1"><span class="s1">You’ve hopefully heard of Lean Startup methods, which are very much at the heart of the alternative.  The key principle is to reduce waste, and one of the biggest forms of waste is to design, build, test and deploy a feature or product only to find out it is not what was needed.  The irony is that many teams <em>believe</em> they’re applying lean principles, yet they follow this basic process I’ve just described.  And then I point out to them that they are actually trying out ideas in one of the the most expensive, slowest ways we know.</span></p>
  485. <p class="p1"><span class="s1">10.  Finally, while we’re busy doing this process and wasting our time and money, the biggest loss of all usually turns out to be the <em>opportunity cost</em> of what the organization <em>could have and should have</em> been doing instead.  We can’t get that time or money back.</span></p>
  486. <p class="p2">To me it’s no surprise that so many companies spend so much time and money and get so little in return.  I warned you this could be depressing.</p>
  487. <p class="p2">The good news is that I promise you that the best teams operate nothing like what I’ve just described.</p>
  488. <p class="p2">I have written many articles about the various aspects of how the best teams work.  Product Discovery is how we come up with winning solutions to the problems we are attacking.  Discovery is an active and ongoing collaboration between product, user experience design, and engineering. Continuous Discovery and Continuous Delivery happen in parallel.  Features on roadmaps (output) are replaced by business problems to be solved (outcome).  The goal is product/market fit.</p>
  489. <p class="p1"><span class="s1">If your company is still running this old and long-obsolete process, then hopefully you can shine a light on this and start the transition to the future.  And hopefully you’ll do this before you find yourself disrupted by a startup or competitor that is able to move much faster and more effectively than you can.</span></p>
  490. </article>
  491. </section>
  492. <nav id="jumpto">
  493. <p>
  494. <a href="/david/blog/">Accueil du blog</a> |
  495. <a href="http://www.svpg.com/product-fail">Source originale</a> |
  496. <a href="/david/stream/2019/">Accueil du flux</a>
  497. </p>
  498. </nav>
  499. <footer>
  500. <div>
  501. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  502. <p>
  503. Bonjour/Hi!
  504. Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
  505. Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
  506. </p>
  507. <p>
  508. Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
  509. </p>
  510. <p>
  511. Voici quelques articles choisis :
  512. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  513. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  514. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  515. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  516. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  517. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  518. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  519. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  520. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  521. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  522. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  523. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  524. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  525. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  526. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  527. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  528. </p>
  529. <p>
  530. On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
  531. </p>
  532. <p>
  533. Je ne traque pas ta navigation mais mon
  534. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  535. conserve des logs d’accès.
  536. </p>
  537. </div>
  538. </footer>
  539. <script type="text/javascript">
  540. ;(_ => {
  541. const jumper = document.getElementById('jumper')
  542. jumper.addEventListener('click', e => {
  543. e.preventDefault()
  544. const anchor = e.target.getAttribute('href')
  545. const targetEl = document.getElementById(anchor.substring(1))
  546. targetEl.scrollIntoView({behavior: 'smooth'})
  547. })
  548. })()
  549. </script>