A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 32KB

5 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821
  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>How to build great products (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.defmacro.org/2013/09/26/products.html">
  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. How to build great products (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.defmacro.org/2013/09/26/products.html">Source originale du contenu</a></h3>
  445. <p>If you believe
  446. that <a href="http://www.defmacro.org/2013/07/23/startup-lessons.html">sales
  447. fix everything</a>, it follows that most startups fail because they
  448. don’t ship a great product in a growing market before they run
  449. out of money. Assuming you’ve picked an explosive market, how do
  450. you go about building a great product?<sup>1</sup></p>
  451. <p>Building great products is hard, but the difficulty is greatly
  452. exacerbated if you have no good model for analyzing products and
  453. features. Without a model you’re left with a never-ending stream
  454. of feature ideas and half-informed shots in the dark. Some people can
  455. pull this off because they start out with a phenomenal product
  456. intuition. But most people aren’t blessed with this superpower
  457. on day one.</p>
  458. <p>I started out with terrible intuition (and didn’t even know
  459. it). Over the past three years I looked at our user metrics every day,
  460. creating a feedback loop to train my brain on what makes a good
  461. product. Eventually I got quite good at predicting the impact of any
  462. given feature, so I started thinking of a model that captures the
  463. essence of what I’ve learned.</p>
  464. <h1 id="the-three-bucket-model">The three bucket model</h1>
  465. <p>The most important aspect of product management is categorizing
  466. features into three buckets: gamechangers, showstoppers, and
  467. distractions. When I first started building products, all features
  468. looked roughly the same. Over time, I formed the three bucket model
  469. and now my mind automatically slots every feature into one of these
  470. buckets.</p>
  471. <p>Here is an example. Suppose you are building a new mobile phone. It
  472. has to be able to call people, or no one will buy it since it
  473. wouldn’t be much of a phone. But the reverse isn’t true
  474. — having voice calls won’t make anybody buy your phone
  475. because every other phone already does that. So for your mobile phone
  476. product, voice calls are a showstopper.</p>
  477. <p>On the other hand, suppose your phone could project videos onto a
  478. surface. No other phone does that, so this feature could be a
  479. gamechanger that excites a lot of consumers. Alternatively, it’s
  480. possible that most people won’t care about it at all, in which
  481. case it’s just a distraction.</p>
  482. <p>This example gives you three buckets to categorize any given feature:</p>
  483. <ul>
  484. <li><strong>A gamechanger.</strong> People will want to buy your product because of this feature.</li>
  485. <li><strong>A showstopper.</strong> People won’t buy your product if you’re missing this feature, but adding it won’t generate demand.</li>
  486. <li><strong>A distraction.</strong> This feature will make no measurable impact on adoption.</li>
  487. </ul>
  488. <p>Empirically, successful products have one to three gamechanging
  489. features, dozens of features that neutralize showstoppers, and very
  490. few features that are distractions. Your job is to build an intuition
  491. about your space to be able to tell these categories
  492. apart. That’s still pretty subtle (is a built-in phone projector
  493. a gamechanger or a distraction?), but at least this model gives you a
  494. plan of attack.</p>
  495. <h1 id="resource-allocation">Resource allocation</h1>
  496. <p>If you had infinite time, you could ignore these categories and
  497. blindly iterate on the product until it resonates with the market. But
  498. your time is finite. The longer you take to find a great product, the
  499. more likely you are to run out of cash, squander morale, or miss the
  500. market moving under your feet. Modeling product management in terms of
  501. the three categories is extremely valuable because it allows you to
  502. treat product management as a resource allocation problem.</p>
  503. <p>If you put any effort into distractions, you’re wasting
  504. resources. That much is obvious.</p>
  505. <p>If you’re doing more showstopper features than you absolutely
  506. need to, you’re wasting resources. Lack of copy-pasting on the
  507. first iPhone might have been a showstopper for some people, but Apple
  508. correctly determined that enough consumers would still buy the
  509. phone. There was no need to delay.</p>
  510. <p>If you put more effort into any given showstopper than the absolute
  511. minimum you can get away with, you’re wasting resources. The
  512. first iPhone had pretty bad voice quality, but it was good
  513. enough. Most people were willing to live with it. It made calls, and
  514. it wasn’t terrible. Improving the voice quality by another 10%
  515. would have made little measurable impact on adoption.</p>
  516. <p>If you’re doing more than three gamechanging features,
  517. you’re wasting resources. Empirically, few disruptive products
  518. are good at a dozen things. Shipping gamechanging features
  519. is <i>hard</i>. Three is probably the most you can get away with, and
  520. even that is a stretch.</p>
  521. <p>Finally, if you don’t pour enough creative energy into any given
  522. gamechanging feature, you’re wasting resources. If a
  523. gamechanging feature doesn’t absolutely blow people away,
  524. it’s not much of a gamechanger — it’s just a
  525. distraction. In this category you can’t go half way.</p>
  526. <p>You can get away with making some mistakes. Very few products
  527. absolutely nail this on launch. But most first time product managers
  528. break all of these rules all the time, probably because they’re
  529. not aware of them. Break these rules at your own peril. The fewer
  530. mistakes you make relative to your competition, the better. Every
  531. mistake can be incredibly costly. Make too many and someone else will
  532. run circles around you.</p>
  533. <h1 id="craftsmanship">Craftsmanship</h1>
  534. <p>The trickiest part of building products is learning how to tell the
  535. difference between the categories and knowing when a given category is
  536. full. Is a built-in phone projector a gamechanger or a distraction? If
  537. it’s a gamechanger, is it big enough to attract sufficient
  538. demand, or do you need another gamechanger? If you invented the
  539. technology to increase voice quality by 50%, does that become a
  540. gamechanger or is it still just a showstopping feature? How about
  541. 200%? How many showstoppers do you have to neutralize to build a
  542. compelling phone?</p>
  543. <p>I have no idea what the answers are for the mobile phone market, but
  544. in my area, unstructured data, I can look at any given feature and
  545. tell which category it falls into quite easily. Sometimes I’m
  546. wrong, but that’s ok. I just have to be wrong less often than my
  547. competitors.</p>
  548. <p>The best way to build this intuition is to talk to a lot of
  549. people. Talk to potential users. What do they think? Talk to people
  550. who tried to build a product in your space and failed. What can you
  551. learn from their failure? Talk to competitors. How do they approach
  552. the problem? Talk to engineers in big companies. What can they tell
  553. you about the state of technology? Talk to other entrepreneurs in
  554. adjacent spaces, investors, journalists, grad students, professors,
  555. even the naysayers. The best way to get a sense of taste in a given
  556. space is to inject yourself into the industry and talk to as many
  557. people as you can.</p>
  558. <h1 id="buyers-stakeholders-and-pundits">Buyers, stakeholders, and pundits</h1>
  559. <p>The sooner you can learn about the history of the space, the state of
  560. the technology, the opinions of potential users, and the direction of
  561. your competition, the sooner you can form a coherent view of the space
  562. and develop a unique vision for your product. But be
  563. careful. It’s easy to start taking advice from the wrong people.</p>
  564. <p>Suppose you’ve decided to design your mobile phone in a form
  565. factor of a walkie talkie for construction workers, and you’ve
  566. determined that the best way to sell it is to construction managers
  567. top-down. If you talk to construction workers, they might be enamored
  568. by beautiful icons and an unusual color scheme. You might determine
  569. that the unique design of your phone is a gamechanger. But ultimately,
  570. it’s the construction manager who’s writing the check. For
  571. the construction manager, a beautiful design is nice, but it
  572. isn’t a gamechanger. It doesn’t help him run the business
  573. any better than he did before.</p>
  574. <p>For complex business sales, you have to pay attention to all the
  575. parties and make sure all the stakeholders are satisfied. Are the
  576. construction workers strong influencers on the manager’s
  577. decision? If so, spending time on a unique design might not be a bad
  578. idea. If not, you might be wasting your time.</p>
  579. <p>It’s true even for consumer products. If you’re designing
  580. a luxury phone and pricing it above every other phone on the market,
  581. do your customers have to convince their spouse? Do most families make
  582. shared decisions about buying luxury items, or do people splurge on
  583. luxury items independently? If they have to convince their spouse, can
  584. you add a feature to make it easier? Find out!</p>
  585. <p>Beware of noise. Learn the difference between your users and people
  586. who are just commenting. Everyone you talk to will have an
  587. opinion. Early on it can be tempting to design a product based on
  588. feedback from industry pundits. But a feature is only a gamechanger if
  589. the person signing the proverbial check recognizes it as
  590. one. Otherwise, it’s a distraction. Industry pundits can be
  591. extremely useful for understanding the state of your field, but
  592. they’re rarely the ones to buy your product. If you design your
  593. product around their feedback, you’ll find that there is nobody
  594. to buy it in the end.</p>
  595. <p>A corollary of this is that you can’t design a great product
  596. unless you live, eat, and breathe like your users do. You need to
  597. know <i>exactly</i> who your user is, what their problems are,
  598. how <i>they</i> perceive your product, and who helps them make buying
  599. decisions. Your intuition has to mirror how the customers will
  600. perceive your product. Categorizing features is only useful if
  601. it’s a good predictor of your actual users’s
  602. response. Otherwise, you’re just wasting time.</p>
  603. <h1 id="aggregate-gamechangers">Aggregate gamechangers</h1>
  604. <p>There is a subtlety to the model we haven’t discussed so
  605. far. Some features aren’t sufficiently impressive on their own,
  606. but become gamechangers in aggregate. For example, suppose you design
  607. a unique set of icons for your phone. Is that a gamechanger? Probably
  608. not. What about a unique color scheme? It doesn’t seem like a
  609. gamechanger either. How about a unique family of phone cases?
  610. It’s hard to imagine people buying a phone because of a pretty
  611. case.<sup>2</sup> But what if you put these features together? A
  612. unique design direction that combines a novel icon set, color scheme,
  613. and family of phone cases sounds like it might be a sufficient
  614. gamechanger to attract consumers.</p>
  615. <p>Features that become gamechangers in aggregate are dangerous for three
  616. reasons. Firstly, it becomes harder to tell what combination of
  617. individual features is and isn’t a gamechanger. Secondly,
  618. aggregate gamechangers are expensive — instead of making a
  619. couple of good decisions on a feature, you have to make dozens or
  620. hundreds of good decisions for a whole family of features. Thirdly, it
  621. makes it easier to convince yourself that if you add just one more
  622. feature, you’ll strike a gamechanger. Building great products is
  623. already difficult. Introducing a subtlety like this makes it even
  624. harder.</p>
  625. <p>Many products do succeed in exactly this way, but if possible, try to
  626. avoid it. If you have no choice but to resort to aggregate
  627. gamechangers, it probably means you’re working in a relatively
  628. mature market. Often, that’s ok, but it should prompt you to do
  629. some soul searching. Is it really worth being in this market, or does
  630. it make sense to find another one where you can innovate more easily?</p>
  631. <h1 id="product-mission">Product mission</h1>
  632. <p>Suppose you’ve developed product intuition to apply the three
  633. bucket model to your field. You can easily (and correctly) categorize
  634. features. You’re now ahead of most product managers. But
  635. you’re still not quite done. There are a few problems with this
  636. approach:</p>
  637. <ul>
  638. <li>If you’re categorizing features ad-hoc, it’s easy to make mistakes and then construct a rhetoric in your mind to convince yourself that you’ve done the right thing.</li>
  639. <li>While you’re building the product, you’ll have to be a part of every single decision because other people have no guidance.</li>
  640. <li>Your engineers will get frustrated, because they’ll think you’re pulling decisions out of thin air.</li>
  641. <li>Before the product is done you’ll have to convince many other people to help you — journalists, investors, potential hires, and customers. Convincing people is hard if you’re making decisions ad-hoc.</li>
  642. </ul>
  643. <p>A great way to get around these problems is to write down a product
  644. mission. Think of it as a function that accepts a given feature as an
  645. argument, and returns one of the three categories above. A good
  646. function definition is concise, understandable, and
  647. repeatable. Ideally after reading it, most people on your team will be
  648. able to categorize features themselves in the same way you would.</p>
  649. <p><a href="https://github.com/rethinkdb/rethinkdb/issues/1000">Here</a> is a humorous product mission we came up with for RethinkDB that worked surprisingly well:</p>
  650. <blockquote>
  651. <p><strong>Database tools should be indistinguishable from magic</strong><br/>
  652. Surprise and amaze people with developer tools for building real-time, data-driven web applications they could only dream of building, and bring sheer joy and simplicity to the process of building great software.</p>
  653. </blockquote>
  654. <p>On the surface these two sentences don’t say very much, but if
  655. you dig in a little, this product mission has surprisingly high
  656. information density. It tells people we’re building a
  657. database. It tells people we treat the product as a developer tool
  658. first. This resolves the tension between developer features (like the
  659. query language) and operations features (like monitoring). All of our
  660. gamechanging features revolve around developers. We treat operations
  661. as a showstopper. It explains what we expect our users to do with
  662. RethinkDB (build real-time, data-driven web applications). It gives
  663. people a sense of how far we’ll go on certain features (surprise
  664. and amaze). Being good enough for developers isn’t enough. These
  665. people spend many hours a day using our software — we want to
  666. make the experience <i>pleasant</i>. It suggests that we are willing
  667. to accept more complex implementations to make our users’s lives
  668. easier. It guides us to build features that let developers build new
  669. types of applications, not just the ones that already
  670. exist. It’s self-aware and leaks a healthy sense of humor we
  671. have as a team. This gives people a sense of who we are. We can test
  672. feature proposals against this product mission, and with a bit of
  673. additional shared knowledge it lets our team members independently
  674. categorize features in roughly the same way.</p>
  675. <p>It took us three years to understand what we’re doing well
  676. enough to come up with this product mission. If we’d had it on
  677. day one, it would probably have cut development time in half —
  678. maybe more. When you’re building a product, the mission should
  679. be the first thing you work on. If your mental model is good enough to
  680. write a product mission that inspires everyone in your company,
  681. everything else will fall into place.</p>
  682. <hr/>
  683. <p><em><sup>1</sup> I don’t mean to imply that picking a good market
  684. is easier than building a great product. In fact, the opposite is
  685. true. It’s far easier to get a handle on product management, so
  686. I decided to tackle this subject first. Aside from great products and
  687. market growth, there are also questions of distribution, economics,
  688. regulated markets, and other subtleties. But the number of early stage
  689. software startups that fail for these reasons pales in comparison to
  690. the number of startups that pick small markets or don’t manage
  691. to deliver great products on time.</em></p>
  692. <p><em><sup>2</sup> In practice it often turns out that people do buy phones because of unique colors or cases. But I’m ignoring this subtlety to focus on a larger point.</em></p>
  693. <hr/>
  694. <p><em>Thanks to Michael Glukhovsky and Michael Lucy for reviewing this post.</em></p>
  695. </article>
  696. </section>
  697. <nav id="jumpto">
  698. <p>
  699. <a href="/david/blog/">Accueil du blog</a> |
  700. <a href="http://www.defmacro.org/2013/09/26/products.html">Source originale</a> |
  701. <a href="/david/stream/2019/">Accueil du flux</a>
  702. </p>
  703. </nav>
  704. <footer>
  705. <div>
  706. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  707. <p>
  708. Bonjour/Hi!
  709. 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>
  710. 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>).
  711. </p>
  712. <p>
  713. 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>.
  714. </p>
  715. <p>
  716. Voici quelques articles choisis :
  717. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  718. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  719. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  720. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  721. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  722. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  723. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  724. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  725. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  726. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  727. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  728. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  729. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  730. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  731. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  732. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  733. </p>
  734. <p>
  735. 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>.
  736. </p>
  737. <p>
  738. Je ne traque pas ta navigation mais mon
  739. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  740. conserve des logs d’accès.
  741. </p>
  742. </div>
  743. </footer>
  744. <script type="text/javascript">
  745. ;(_ => {
  746. const jumper = document.getElementById('jumper')
  747. jumper.addEventListener('click', e => {
  748. e.preventDefault()
  749. const anchor = e.target.getAttribute('href')
  750. const targetEl = document.getElementById(anchor.substring(1))
  751. targetEl.scrollIntoView({behavior: 'smooth'})
  752. })
  753. })()
  754. </script>