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 62KB

4 lat temu
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703
  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>So long MVP. Hello Minimum Loveable Product. (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="https://medium.com/the-happy-startup-school/beyond-mvp-10-steps-to-make-your-product-minimum-loveable-51800164ae0c">
  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. So long MVP. Hello Minimum Loveable Product. (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="https://medium.com/the-happy-startup-school/beyond-mvp-10-steps-to-make-your-product-minimum-loveable-51800164ae0c">Source originale du contenu</a></h3>
  445. <p name="1146" id="1146" class="graf--p graf--first"><em class="markup--em markup--p-em">Warning: This is a long one, so you may want to grab a cuppa</em></p>
  446. <p name="72cb" id="72cb" class="graf--p"><strong class="markup--strong markup--p-strong">Building products is hard</strong></p>
  447. <p name="5dd2" id="5dd2" class="graf--p">Building great products is harder.</p>
  448. <p name="8490" id="8490" class="graf--p">Whether you work in a startup, agency, non-profit or corporate – it seems product people want it all.</p>
  449. <h3 name="f77c" id="f77c" class="graf--h3">Whadaya want?</h3>
  450. <figure name="67f5" id="67f5" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 422px;"><div class="aspect-ratio-fill" style="padding-bottom: 60.3%;"></div><img class="graf-image" data-image-id="1*t5r0uC1edUqtfk3vgXjNyQ.png" data-width="750" data-height="452" data-action="zoom" data-action-value="1*t5r0uC1edUqtfk3vgXjNyQ.png" src="https://medium2.global.ssl.fastly.net/max/960/1*t5r0uC1edUqtfk3vgXjNyQ.png"></div></figure>
  451. <p name="0e98" id="0e98" class="graf--p">When launching any new product there’s always a tricky balance to strike between speed of delivery and quality of execution.</p>
  452. <p name="375c" id="375c" class="graf--p">To create a great product takes skill, dedication and discipline. And it requires us to make bold choices. Whether that is who to hire, when to launch, what to build or how <em class="markup--em markup--p-em">well </em>we build it.</p>
  453. <p name="c3a7" id="c3a7" class="graf--p"><strong class="markup--strong markup--p-strong">In essence, your product is defined by the decisions you make.</strong></p>
  454. <h3 name="b5d3" id="b5d3" class="graf--h3">You <em class="markup--em markup--h3-em">can’t</em> have it all</h3>
  455. <p name="5f0f" id="5f0f" class="graf--p">Part of the reason the lean startup movement took off was we were all frustrated with how things were working – bloated products being shipped that delivered on ‘the plan’ but little in the way of value. The product world had reached the peak of <a href="http://www.forbes.com/sites/dominiqueafacan/2014/01/23/stuffocation-an-interview-with-james-wallman/" data-href="http://www.forbes.com/sites/dominiqueafacan/2014/01/23/stuffocation-an-interview-with-james-wallman/" class="markup--anchor markup--p-anchor" rel="nofollow">stuffocation</a>.</p>
  456. <p name="3757" id="3757" class="graf--p">Then our ‘saviour’ Eric Ries came to save the day. Along with his BFF – the often misunderstood <a href="http://www.startuplessonslearned.com/2009/03/minimum-viable-product.html" data-href="http://www.startuplessonslearned.com/2009/03/minimum-viable-product.html" class="markup--anchor markup--p-anchor" rel="nofollow">Minimum Viable Product</a>.</p>
  457. <figure name="7567" id="7567" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 525px;"><div class="aspect-ratio-fill" style="padding-bottom: 75%;"></div><img class="graf-image" data-image-id="1*_Uwkwme7hqTjWSvi2EraHw.png" data-width="801" data-height="601" data-action="zoom" data-action-value="1*_Uwkwme7hqTjWSvi2EraHw.png" src="https://medium2.global.ssl.fastly.net/max/960/1*_Uwkwme7hqTjWSvi2EraHw.png"></div></figure>
  458. <p name="5fdc" id="5fdc" class="graf--p">It had <strong class="markup--strong markup--p-strong">good intentions</strong>.</p>
  459. <p name="769d" id="769d" class="graf--p">It had a <strong class="markup--strong markup--p-strong">purpose</strong>.</p>
  460. <p name="4451" id="4451" class="graf--p">But more often than not it was crappy…</p>
  461. <ul class="postList"><li name="65f3" id="65f3" class="graf--li"><strong class="markup--strong markup--li-strong">Cheap</strong>, yes.</li><li name="2109" id="2109" class="graf--li"><strong class="markup--strong markup--li-strong">Fast</strong>, yes.</li><li name="2426" id="2426" class="graf--li"><strong class="markup--strong markup--li-strong">Good</strong>, generally not.</li></ul>
  462. <p name="d212" id="d212" class="graf--p">So if like many out there, you struggle to get much traction with your MVP, how will you know why it didn’t work?</p>
  463. <p name="9456" id="9456" class="graf--p">If you’ve delivered a scaled-down, functional product but a second rate experience have you missed a trick to create an impression with your potential customers?</p>
  464. <p name="e658" id="e658" class="graf--p"><strong class="markup--strong markup--p-strong">Too many take Minimum too literally and skimp on the design as well as the scope</strong>. Rather than seeing an investment in a great experience as wasted effort, consider every interaction with your potential customers an opportunity to make an impression on them. A chance for them to engage in your mission And a chance for you to start building your tribe. Think of it as your marketing spend <em class="markup--em markup--p-em">before</em> you’ve launched.</p>
  465. <p name="3ed3" id="3ed3" class="graf--p">Thanks to the likes of design-led companies such as Apple, Nest, AirBnB people have become more savvy and now the price of entry is higher. So if you want to get your product noticed you’re going to have to raise your game too.</p>
  466. <p name="73b2" id="73b2" class="graf--p">Ryan Singer sums it up well:</p>
  467. <blockquote name="c9ae" id="c9ae" class="graf--pullquote pullquote graf--startsWithDoubleQuote">“If you decide to build a feature <strong class="markup--strong markup--pullquote-strong">you should live up to at least a basic standard of execution on the experience side.</strong>”</blockquote>
  468. <figure name="03b9" id="03b9" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 627px; max-height: 335px;"><div class="aspect-ratio-fill" style="padding-bottom: 53.400000000000006%;"></div><img class="graf-image" data-image-id="1*2hq2C1ohK-tUf-1DVBhqgg.png" data-width="627" data-height="335" src="https://medium2.global.ssl.fastly.net/max/960/1*2hq2C1ohK-tUf-1DVBhqgg.png"></div></figure>
  469. <p name="8a5c" id="8a5c" class="graf--p">It’s a competitive world out there and people only have a short attention span. You might only get one chance so make it count.</p>
  470. <h3 name="a0a6" id="a0a6" class="graf--h3">So long MVP, hello MLP</h3>
  471. <p name="7507" id="7507" class="graf--p graf--empty"><br></p>
  472. <p name="b68a" id="b68a" class="graf--p">So if the MVP is no longer fit for purpose in this new age of design-hungry users what’s the alternative?</p>
  473. <p name="5f3b" id="5f3b" class="graf--p">Enter<strong class="markup--strong markup--p-strong"> The Minimum <em class="markup--em markup--p-em">Loveable</em> Product</strong>.</p>
  474. <figure name="d5ef" id="d5ef" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 600px; max-height: 196px;"><div class="aspect-ratio-fill" style="padding-bottom: 32.7%;"></div><img class="graf-image" data-image-id="1*L0g4ck6jGoyLwfMVxxzvUQ.jpeg" data-width="600" data-height="196" src="https://medium2.global.ssl.fastly.net/max/960/1*L0g4ck6jGoyLwfMVxxzvUQ.jpeg"></div></figure>
  475. <p name="320b" id="320b" class="graf--p">Time for some definitions:</p>
  476. <ul class="postList"><li name="dfb7" id="dfb7" class="graf--li"><strong class="markup--strong markup--li-strong">MVP</strong><br>The version of a new product that brings back the maximum amount of <strong class="markup--strong markup--li-strong">validated learning</strong> about your <em class="markup--em markup--li-em">customers </em>with the least effort.</li><li name="bf6d" id="bf6d" class="graf--li"><strong class="markup--strong markup--li-strong">MLP</strong><br>The version of a new product that brings back the maximum amount of <strong class="markup--strong markup--li-strong">love</strong> from your <em class="markup--em markup--li-em">early</em> <em class="markup--em markup--li-em">tribe members </em>with the least effort.</li></ul>
  477. <blockquote name="c572" id="c572" class="graf--pullquote pullquote graf--startsWithDoubleQuote">“It’s better to build something that a small number of users love, than a large number of users like.” Sam Altman, Y Combinator</blockquote>
  478. <figure name="df52" id="df52" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 506px;"><div class="aspect-ratio-fill" style="padding-bottom: 72.3%;"></div><img class="graf-image" data-image-id="1*OfB2RkC5QRlEYpI3EJgfdA.png" data-width="726" data-height="525" data-action="zoom" data-action-value="1*OfB2RkC5QRlEYpI3EJgfdA.png" src="https://medium2.global.ssl.fastly.net/max/960/1*OfB2RkC5QRlEYpI3EJgfdA.png"></div></figure>
  479. <h3 name="3e7c" id="3e7c" class="graf--h3">Think big, start small</h3>
  480. <p name="4bc9" id="4bc9" class="graf--p graf--empty"><br></p>
  481. <figure name="b9bc" id="b9bc" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 397px;"><div class="aspect-ratio-fill" style="padding-bottom: 56.699999999999996%;"></div><img class="graf-image" data-image-id="1*nIpn0Ma1yGa3J4ZowYpibA.jpeg" data-width="3455" data-height="1958" data-action="zoom" data-action-value="1*nIpn0Ma1yGa3J4ZowYpibA.jpeg" src="https://medium2.global.ssl.fastly.net/max/960/1*nIpn0Ma1yGa3J4ZowYpibA.jpeg"></div></figure>
  482. <p name="1f06" id="1f06" class="graf--p">In the below example, the MVP <em class="markup--em markup--p-em">might</em> validate that people like cake, but it won’t get people talking. The MLP should validate that people <strong class="markup--strong markup--p-strong">love</strong> your cake, will come back for more and tell their friends. And you’ve still started small so you’ve got room to manoeuvre.</p>
  483. <figure name="2931" id="2931" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 263px;"><div class="aspect-ratio-fill" style="padding-bottom: 37.5%;"></div><img class="graf-image" data-image-id="1*QGDsctaB7Y7e0eBC8p11oA.png" data-width="1677" data-height="629" data-action="zoom" data-action-value="1*QGDsctaB7Y7e0eBC8p11oA.png" src="https://medium2.global.ssl.fastly.net/max/960/1*QGDsctaB7Y7e0eBC8p11oA.png"></div><figcaption class="imageCaption">Which looks tastier to you?</figcaption></figure>
  484. <p name="65ea" id="65ea" class="graf--p"><strong class="markup--strong markup--p-strong">Your Minimum Loveable Product allows you to gain a following while exploring opportunities.</strong></p>
  485. <blockquote name="f499" id="f499" class="graf--pullquote pullquote graf--startsWithDoubleQuote">“Don’t make customers happy. Make happy customers.” Dharmesh Shah</blockquote>
  486. <h3 name="a60b" id="a60b" class="graf--h3">10 tips to go from viable to loveable</h3>
  487. <p name="7572" id="7572" class="graf--p">So now you should have a feel of the context, here’s my top 10 (yes another of those…) for making your product Minimum Loveable:</p>
  488. <figure name="4b5c" id="4b5c" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 509px;"><div class="aspect-ratio-fill" style="padding-bottom: 72.8%;"></div><img class="graf-image" data-image-id="1*8aoL7yqz4fTW7P4B_qoarA.png" data-width="1138" data-height="828" data-action="zoom" data-action-value="1*8aoL7yqz4fTW7P4B_qoarA.png" src="https://medium2.global.ssl.fastly.net/max/960/1*8aoL7yqz4fTW7P4B_qoarA.png"></div></figure>
  489. <h3 name="818e" id="818e" class="graf--h3">1. Give it a point</h3>
  490. <p name="3d21" id="3d21" class="graf--p">Too often people focus solely on the solution they’re building without really considering why they’re doing it.</p>
  491. <blockquote name="930d" id="930d" class="graf--blockquote graf--startsWithDoubleQuote">“Your purpose is the wind in your sail. And without the why there is no wind.” David Hieatt, Hiut Jeans/Do Lectures</blockquote>
  492. <p name="5133" id="5133" class="graf--p"><strong class="markup--strong markup--p-strong">Without a clear purpose that drives decisions, a product can seem bloated and pointless. </strong>And when things get tough (which they inevitably will), you won’t have much to pull you or your team through. Having a clear purpose adds some real meaning to your work.</p>
  493. <p name="8bf1" id="8bf1" class="graf--p">Simon Sinek points out that <strong class="markup--strong markup--p-strong">you need to awaken an emotion with your early customers so that they feel something </strong>and that most buying decisions are based on emotion, rather than logic. This is where the Golden Circle comes in.</p>
  494. <figure name="f82e" id="f82e" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 535px; max-height: 424px;"><div class="aspect-ratio-fill" style="padding-bottom: 79.3%;"></div><img class="graf-image" data-image-id="1*y4I3wIEfeCJqQLjjGSTYeQ.jpeg" data-width="535" data-height="424" src="https://medium2.global.ssl.fastly.net/max/960/1*y4I3wIEfeCJqQLjjGSTYeQ.jpeg"></div><figcaption class="imageCaption">Simon Sinek’s Golden Circle framework: “People don’t buy what you do, they buy why you do it”</figcaption></figure>
  495. <p name="c55f" id="c55f" class="graf--p">By focusing on the ‘why?’ you can create much deeper connections with your audience and give your product a better chance of success.</p>
  496. <figure name="70c4" id="70c4" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 522px;"><div class="aspect-ratio-fill" style="padding-bottom: 74.6%;"></div><img class="graf-image" data-image-id="1*ASTmPTZN5KPRHpU7ZnthQQ.png" data-width="954" data-height="712" data-action="zoom" data-action-value="1*ASTmPTZN5KPRHpU7ZnthQQ.png" src="https://medium2.global.ssl.fastly.net/max/960/1*ASTmPTZN5KPRHpU7ZnthQQ.png"></div></figure>
  497. <h3 name="41ad" id="41ad" class="graf--h3">2. Do one thing well</h3>
  498. <p name="fbbd" id="fbbd" class="graf--p graf--empty"><br></p>
  499. <p name="2ebd" id="2ebd" class="graf--p">If there’s one thing that startups in particular are often guilty of, it’s trying to do too much, too soon. Having a clear focus means it’s easier to communicate what your product is and who it’s for. <strong class="markup--strong markup--p-strong">Take lead from success stories such as Dropbox and Instagram by doing one thing really well.</strong></p>
  500. <p name="6127" id="6127" class="graf--p">Before them companies like <a href="http://www.basecamp.com" data-href="http://www.basecamp.com" class="markup--anchor markup--p-anchor" rel="nofollow">Basecamp</a> (formerly 37 Signals) were breaking the mould and making simple, usable software. Their co-founder Jason Fried explains their thinking in the book <a href="https://gettingreal.37signals.com/" data-href="https://gettingreal.37signals.com/" class="markup--anchor markup--p-anchor" rel="nofollow">Getting Real</a>:</p>
  501. <blockquote name="90b1" id="90b1" class="graf--pullquote pullquote graf--startsWithDoubleQuote">“If you can’t fit everything in within the time and budget allotted then don’t expand the time and budget. instead, <strong class="markup--strong markup--pullquote-strong">pull back the scope.</strong>”</blockquote>
  502. <p name="4549" id="4549" class="graf--p">It’s not as easy as it sounds. Often there can be pressures from customers, investors or other team members, but <strong class="markup--strong markup--p-strong">learning to say no is something you’ll need to get to grips with if you want a usable product</strong>. Get the core right and you’ll make your life a whole lot easier.</p>
  503. <p name="4369" id="4369" class="graf--p">One thing we make a point of doing with each product we work on at <a href="http://www.spookstudio.com/" data-href="http://www.spookstudio.com/" class="markup--anchor markup--p-anchor" rel="nofollow"><strong class="markup--strong markup--p-strong">Spook Studio</strong></a> is to make a list of things we <em class="markup--em markup--p-em">won’t </em>do. This helps to add some constraints to the design process as everyone has a clear idea of what the product <em class="markup--em markup--p-em">isn’t. </em>In this way we can make better decisions and not take our eye off the ball. We also find that agreeing on some design principles for the product can be a great way to make better and quicker decisions.</p>
  504. <p name="2633" id="2633" class="graf--p"><strong class="markup--strong markup--p-strong">One way to achieve this focus is by developing your </strong><a href="http://blueoceanstrategy.com" data-href="http://blueoceanstrategy.com" class="markup--anchor markup--p-anchor" rel="nofollow"><strong class="markup--strong markup--p-strong">Blue Ocean Strategy</strong></a><strong class="markup--strong markup--p-strong">.</strong> A simple but effective framework for developing a targeted value proposition. It allows you to consider ways in which you can stay ahead of the competition and create new value.</p>
  505. <figure name="2308" id="2308" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 628px; max-height: 418px;"><div class="aspect-ratio-fill" style="padding-bottom: 66.60000000000001%;"></div><img class="graf-image" data-image-id="1*hAN_gyllUYd_LAf-qt8Wbg.jpeg" data-width="628" data-height="418" src="https://medium2.global.ssl.fastly.net/max/960/1*hAN_gyllUYd_LAf-qt8Wbg.jpeg"></div><figcaption class="imageCaption">The strategy canvas is one of the core tools at the heart of the Blue Ocean Strategy framework</figcaption></figure>
  506. <p name="0031" id="0031" class="graf--p"><strong class="markup--strong markup--p-strong">It takes discipline to stay on track and not lose focus, </strong>but it’s a valuable trait that all successful entrepreneurs and product owners seem to have.</p>
  507. <figure name="fa58" id="fa58" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 524px;"><div class="aspect-ratio-fill" style="padding-bottom: 74.9%;"></div><img class="graf-image" data-image-id="1*0BJj9LVUlkTl1z86sLysZw.png" data-width="837" data-height="627" data-action="zoom" data-action-value="1*0BJj9LVUlkTl1z86sLysZw.png" src="https://medium2.global.ssl.fastly.net/max/960/1*0BJj9LVUlkTl1z86sLysZw.png"></div></figure>
  508. <h3 name="ac35" id="ac35" class="graf--h3">3. Timebox it</h3>
  509. <p name="efaf" id="efaf" class="graf--p graf--empty"><br></p>
  510. <figure name="4f69" id="4f69" class="graf--figure graf--layoutInsetLeft"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 350px;"><div class="aspect-ratio-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="1*VBkxtqC-jutzfA_pVBER1Q.jpeg" data-width="800" data-height="800" data-action="zoom" data-action-value="1*VBkxtqC-jutzfA_pVBER1Q.jpeg" src="https://medium2.global.ssl.fastly.net/max/720/1*VBkxtqC-jutzfA_pVBER1Q.jpeg"></div></figure>
  511. <p name="45a6" id="45a6" class="graf--p">In his book <a href="http://austinkleon.com/steal/" data-href="http://austinkleon.com/steal/" class="markup--anchor markup--p-anchor" rel="nofollow">Steal Like An Artist</a> author Austin Kleon writes:</p>
  512. <blockquote name="8fda" id="8fda" class="graf--blockquote graf--startsWithDoubleQuote">“In this age of information abundance and overload, those who get ahead will be the folks who figure out what to leave out, so they can concentrate on what’s important to them.”</blockquote>
  513. <p name="ff18" id="ff18" class="graf--p"><strong class="markup--strong markup--p-strong">You need to prioritise.</strong></p>
  514. <p name="a31b" id="a31b" class="graf--p">Without prioritising what’s important to you the road ahead will be a rocky one. By setting constraints on time and budget this forces you to reduce the scope.</p>
  515. <p name="cd60" id="cd60" class="graf--p">After years of trying different approaches, we’ve come to develop a <a href="http://spookstudio.com/services" data-href="http://spookstudio.com/services" class="markup--anchor markup--p-anchor" rel="nofollow">12 week process</a> for launching an MLP as we’ve found it to be the ideal timeframe to take a new product idea to market.</p>
  516. <p name="2af5" id="2af5" class="graf--p">FutureLearn’s Head of Product <a href="https://twitter.com/matt_walton" data-href="https://twitter.com/matt_walton" class="markup--anchor markup--p-anchor" rel="nofollow">Matt Walton</a> has reached a similar conclusion:</p>
  517. <blockquote name="71da" id="71da" class="graf--blockquote">3 months is enough time to <strong class="markup--strong markup--blockquote-strong">deliver on your vision </strong>but not long enough to lose sight of it</blockquote>
  518. <blockquote name="507b" id="507b" class="graf--blockquote">It’s enough time to<strong class="markup--strong markup--blockquote-strong"> make something high quality</strong> but not long enough to get bogged down in perfectionism</blockquote>
  519. <blockquote name="d665" id="d665" class="graf--blockquote">It’s enough time to <strong class="markup--strong markup--blockquote-strong">develop a rhythm and habits</strong> but not long enough that you stop questioning them</blockquote>
  520. <blockquote name="9d16" id="9d16" class="graf--blockquote">It’s <strong class="markup--strong markup--blockquote-strong">enough time for a team to gel</strong> but not long enough for it to get stale</blockquote>
  521. <blockquote name="db1c" id="db1c" class="graf--blockquote">It’s <strong class="markup--strong markup--blockquote-strong">enough time to spend the budget efficiently</strong> but not enough time to spend too much or go too far astray</blockquote>
  522. <blockquote name="3cc9" id="3cc9" class="graf--blockquote">It’s<strong class="markup--strong markup--blockquote-strong"> enough time to develop what you need to</strong> but not enough time to develop things that might start diluting the product</blockquote>
  523. <figure name="2692" id="2692" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 524px;"><div class="aspect-ratio-fill" style="padding-bottom: 74.8%;"></div><img class="graf-image" data-image-id="1*-2e2kFRGrscvbH4qQWP8VQ.png" data-width="803" data-height="601" data-action="zoom" data-action-value="1*-2e2kFRGrscvbH4qQWP8VQ.png" src="https://medium2.global.ssl.fastly.net/max/960/1*-2e2kFRGrscvbH4qQWP8VQ.png"></div><figcaption class="imageCaption">Thanks to Ash Maurya for the quote. And Sir Clive Sinclair for the C5…</figcaption></figure>
  524. <h3 name="04e8" id="04e8" class="graf--h3">4. Solve only high value problems</h3>
  525. <p name="735c" id="735c" class="graf--p">When deciding what to include for your first release it’s wise to zoom in on problems that are <em class="markup--em markup--p-em">real</em> pain points for your customers. Yes it would be nice to solve all of their problems but if you try and do that you won’t achieve an elegant simplicity in your product. <strong class="markup--strong markup--p-strong">Only</strong> focus on building features that relieve your customers’ pain and allow them to get their jobs done simply and easily.</p>
  526. <figure name="838a" id="838a" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 500px; max-height: 248px;"><div class="aspect-ratio-fill" style="padding-bottom: 49.6%;"></div><img class="graf-image" data-image-id="1*c12Nm041EUe0-LW9PH1vfQ.jpeg" data-width="500" data-height="248" src="https://medium2.global.ssl.fastly.net/max/960/1*c12Nm041EUe0-LW9PH1vfQ.jpeg"></div></figure>
  527. <p name="2e54" id="2e54" class="graf--p">Use tools such as the <a href="https://strategyzer.com/value-proposition-design" data-href="https://strategyzer.com/value-proposition-design" class="markup--anchor markup--p-anchor" rel="nofollow">Value Proposition Canvas</a> to help you decide which features will create real value that you can build your product around.</p>
  528. <figure name="d52a" id="d52a" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 524px;"><div class="aspect-ratio-fill" style="padding-bottom: 74.8%;"></div><img class="graf-image" data-image-id="1*6h0GrTYg3NGDUVCzILsc3Q.png" data-width="802" data-height="600" data-action="zoom" data-action-value="1*6h0GrTYg3NGDUVCzILsc3Q.png" src="https://medium2.global.ssl.fastly.net/max/960/1*6h0GrTYg3NGDUVCzILsc3Q.png"></div><figcaption class="imageCaption">The Kano Model is a powerful technique for creating profitable products and services that genuinely excite customers</figcaption></figure>
  529. <h3 name="473e" id="473e" class="graf--h3">5. Add surprise &amp; delight</h3>
  530. <p name="595e" id="595e" class="graf--p">If you go to a hotel room and there’s no bed there you’ll be a little disappointed, possibly angry. If there’s a bottle of champagne, some flowers and a box of chocolates you’ll be taken aback and probably over the moon.</p>
  531. <p name="42cb" id="42cb" class="graf--p">What can you do to create a positive response from your customers? Go above and beyond what’s expected of you and you’ll reap the rewards.</p>
  532. <p name="5195" id="5195" class="graf--p graf--last">Design for emotion.</p>
  533. <p></div></div></section><section name="37c4" class=" section--body section--bottomCenter section-image--aspectRatioViewport is-imageBackgrounded is-backgrounded is-darkBackgrounded is-aboveSectionCaption"><div class="section-background" data-scroll="aspect-ratio-viewport"contenteditable="false" data-image-id="1*nN9tUejHvPYTyW4uM4YXSA.jpeg" data-width="3224" data-height="2747"><div class="section-backgroundImage"style="background-image: url(https://medium2.global.ssl.fastly.net/max/2000/1*nN9tUejHvPYTyW4uM4YXSA.jpeg);"></div><br></div><div class="section-doubleWidthTable u-table u-ignoreBlock"><div class="u-tableCell u-verticalAlignTop u-ignoreBlock"><div class="section-aspectRatioViewportBottomSpacer u-ignoreBlock"><div class="u-ignoreBlock" style="padding-bottom: 42.6024%;"></div></div><div class="section-doubleWidthTable u-table u-ignoreBlock"><div class="section-contentCell u-tableCell u-ignoreBlock"><div class="section-content"><div class="section-inner layoutSingleColumn"><h3 name="51ba" id="51ba" class="graf--h3 graf--first">Still with us?</h3><p name="0d88" id="0d88" class="graf--p">Great – halfway there ☺</p><p name="c1e8" id="c1e8" class="graf--p graf--empty"><br></p></div></div></div><div class="u-tableCell u-verticalAlignTop u-ignoreBlock"><div class="section-aspectRatioViewportPlaceholder u-ignoreBlock"><div class="u-ignoreBlock" style="padding-bottom: 85.2047%;"></div></div><div class="section-aspectRatioViewportBottomPlaceholder u-ignoreBlock"><div class="u-ignoreBlock" style="padding-bottom: 42.6024%;"></div></div></div></div></div><div class="u-tableCell u-ignoreBlock"><div class="section-aspectRatioViewportCropPlaceholder u-ignoreBlock"><div class="u-ignoreBlock" style="padding-bottom: 85.2047%;"></div></div></div></div><div class="section-captionContent u-ignoreBlock"><div class="section-inner sectionLayout--caption"><label name="aeda" id="aeda" data-default-value="Type caption for image (optional)" class="graf--sectionCaption graf--last">Thanks to <a href="http://www.twitter.com/clairehol" data-href="http://www.twitter.com/clairehol" class="markup--anchor markup--sectionCaption-anchor" rel="nofollow">Claire Holgate</a> for the illustration</label></div></div></section><section name="b1db" class=" section--body section--last"><div class="section-divider layoutSingleColumn"><hr class="section-divider"></div><div class="section-content"><div class="section-inner layoutSingleColumn"><figure name="57c7" id="57c7" class="graf--figure graf--first"><div class="aspectRatioPlaceholder is-locked" style="max-width: 610px; max-height: 344px;"><div class="aspect-ratio-fill" style="padding-bottom: 56.39999999999999%;"></div><img class="graf-image" data-image-id="1*-USJFL4b2THo8vDGonU94Q.jpeg" data-width="610" data-height="344" src="https://medium2.global.ssl.fastly.net/max/960/1*-USJFL4b2THo8vDGonU94Q.jpeg"></div></figure><h3 name="31dd" id="31dd" class="graf--h3">6. Put your money where your mouth is</h3><p name="d704" id="d704" class="graf--p">Whilst the tide is turning, there’s still a need to educate startup founders in particular about the competitive advantage well-designed products and services can bring.</p><blockquote name="8015" id="8015" class="graf--pullquote pullquote graf--startsWithDoubleQuote">“Design is not just what it looks like and feels like, design is how it works.” Steve Jobs</blockquote><p name="28e8" id="28e8" class="graf--p"><strong class="markup--strong markup--p-strong">It’s been proven that there’s a direct correlation between a positive user experience and loyalty. </strong>Happy customers tend to spend more, more often and tell their friends.</p><p name="e78e" id="e78e" class="graf--p">With this in mind, hire the best designer you can afford. It could be the best money you ever spend.</p><p name="81f1" id="81f1" class="graf--p">Don’t just say that design is important to you. Show it through your actions.</p><figure name="9430" id="9430" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 522px;"><div class="aspect-ratio-fill" style="padding-bottom: 74.6%;"></div><img class="graf-image" data-image-id="1*PtBePuBjYtH1gT0hic4tRw.png" data-width="802" data-height="598" data-action="zoom" data-action-value="1*PtBePuBjYtH1gT0hic4tRw.png" src="https://medium2.global.ssl.fastly.net/max/960/1*PtBePuBjYtH1gT0hic4tRw.png"></div></figure><h3 name="6e7f" id="6e7f" class="graf--h3">7. Make ‘em hungry for more</h3><p name="1c0c" id="1c0c" class="graf--p">One of the hardest things to crack is how you can get people to use your product again and again. You may be able to get them interested but how do you get them in the <em class="markup--em markup--p-em">habit </em>of using it on a regular basis.</p><p name="4f28" id="4f28" class="graf--p">This is where Nir Eyal’s <a href="http://www.hookmodel.com/" data-href="http://www.hookmodel.com/" class="markup--anchor markup--p-anchor" rel="nofollow"><strong class="markup--strong markup--p-strong">Hook Model</strong></a> comes in – a 4 step process companies can use to build customer habits.</p><figure name="3d12" id="3d12" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 540px; max-height: 419px;"><div class="aspect-ratio-fill" style="padding-bottom: 77.60000000000001%;"></div><img class="graf-image" data-image-id="1*AOu9GJFPXZ4q9cMrN7LdDw.png" data-width="540" data-height="419" src="https://medium2.global.ssl.fastly.net/max/960/1*AOu9GJFPXZ4q9cMrN7LdDw.png"></div></figure><p name="df2c" id="df2c" class="graf--p">Nir elaborates in <a href="http://www.nirandfar.com/2012/03/how-to-manufacture-desire.html" data-href="http://www.nirandfar.com/2012/03/how-to-manufacture-desire.html" class="markup--anchor markup--p-anchor" rel="nofollow">this post</a>:</p><blockquote name="483e" id="483e" class="graf--blockquote"><strong class="markup--strong markup--blockquote-strong">Trigger<br></strong>The trigger is the actuator of a behavior — the spark plug in the engine. <a href="http://www.google.com/url?q=http%3A%2F%2Fwww.nirandfar.com%2F2012%2F04%2Fbillion-dollar-mind-trick.html&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNGt9UJnAPkm7zHsotaJlm5A_G_kLQ" data-href="http://www.google.com/url?q=http%3A%2F%2Fwww.nirandfar.com%2F2012%2F04%2Fbillion-dollar-mind-trick.html&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNGt9UJnAPkm7zHsotaJlm5A_G_kLQ" class="markup--anchor markup--blockquote-anchor" rel="nofollow">Triggers</a> come in two types: external and internal. Habit-forming technologies start by alerting users with external triggers like an email, a link on a web site, or the app icon on a phone.</blockquote><blockquote name="81e8" id="81e8" class="graf--blockquote"><strong class="markup--strong markup--blockquote-strong">Action<br></strong>After the trigger comes the intended action. Here, companies leverage two pulleys of human behavior – <a href="http://www.google.com/url?q=http%3A%2F%2Fbehaviormodel.org%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHCAl7tqRkI3MraZqVb1EmLbtCZNQ" data-href="http://www.google.com/url?q=http%3A%2F%2Fbehaviormodel.org%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHCAl7tqRkI3MraZqVb1EmLbtCZNQ" class="markup--anchor markup--blockquote-anchor" rel="nofollow">motivation and ability</a>. This phase of the Hook draws upon the art and science of usability design to ensure that the user acts the way the designer intends.</blockquote><blockquote name="7013" id="7013" class="graf--blockquote"><strong class="markup--strong markup--blockquote-strong">Variable Reward<br></strong>Variable schedules of reward are one of the most powerful tools that companies use to hook users. Research shows that levels of dopamine surge when the brain is <a href="http://www.google.com/url?q=http%3A%2F%2Ffora.tv%2F2011%2F02%2F15%2FRobert_Sapolsky_Are_Humans_Just_Another_Primate%23fullprogram&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFkA0Ja27Z6mcjIj2Q1O8mPSdTXIg" data-href="http://www.google.com/url?q=http%3A%2F%2Ffora.tv%2F2011%2F02%2F15%2FRobert_Sapolsky_Are_Humans_Just_Another_Primate%23fullprogram&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFkA0Ja27Z6mcjIj2Q1O8mPSdTXIg" class="markup--anchor markup--blockquote-anchor" rel="nofollow">expecting a reward</a>. Introducing variability multiplies the effect, creating a frenzied hunting state, activating the parts associated with wanting and desire. Although classic examples include slot machines and lotteries, <a href="http://www.google.com/url?q=http%3A%2F%2Fwww.nirandfar.com%2F2012%2F03%2Fwant-to-hook-your-users-drive-them-crazy.html&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNGiXoUc9nNInMvCepJBsMT-A_aj-Q" data-href="http://www.google.com/url?q=http%3A%2F%2Fwww.nirandfar.com%2F2012%2F03%2Fwant-to-hook-your-users-drive-them-crazy.html&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNGiXoUc9nNInMvCepJBsMT-A_aj-Q" class="markup--anchor markup--blockquote-anchor" rel="nofollow">variable rewards</a> are prevalent in habit-forming technologies as well.</blockquote><blockquote name="b529" id="b529" class="graf--blockquote"><strong class="markup--strong markup--blockquote-strong">Investment<br></strong>The last phase of the Hook is where the user is asked to do bit of work. The investment implies an action that improves the service for the next go-around. Inviting friends, stating preferences, building virtual assets, and learning to use new features are all commitments that improve the service for the user. These <a href="http://www.google.com/url?q=http%3A%2F%2Fwww.nirandfar.com%2F2012%2F07%2Fmakeyourusersdothework.html&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFzY_M3j37E0KUSy6OwFo6hXu73ZA" data-href="http://www.google.com/url?q=http%3A%2F%2Fwww.nirandfar.com%2F2012%2F07%2Fmakeyourusersdothework.html&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFzY_M3j37E0KUSy6OwFo6hXu73ZA" class="markup--anchor markup--blockquote-anchor" rel="nofollow">investments</a> can be leveraged to make the trigger more engaging, the action easier, and the reward more exciting with every pass through the Hook.</blockquote><p name="d367" id="d367" class="graf--p">We’ve found this model (and the accompanying <a href="http://www.amazon.com/Hooked-How-Build-Habit-Forming-Products-ebook/dp/B00HJ4A43S" data-href="http://www.amazon.com/Hooked-How-Build-Habit-Forming-Products-ebook/dp/B00HJ4A43S" class="markup--anchor markup--p-anchor" rel="nofollow">book</a>) to be a great starting point for a customer acquisition and retention strategy.</p><figure name="91d5" id="91d5" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 523px;"><div class="aspect-ratio-fill" style="padding-bottom: 74.7%;"></div><img class="graf-image" data-image-id="1*4voGpuvjBoLIk4joa-LY1w.png" data-width="802" data-height="599" data-action="zoom" data-action-value="1*4voGpuvjBoLIk4joa-LY1w.png" src="https://medium2.global.ssl.fastly.net/max/960/1*4voGpuvjBoLIk4joa-LY1w.png"></div></figure><h3 name="fc39" id="fc39" class="graf--h3">8. Build your tribe</h3><p name="37f9" id="37f9" class="graf--p graf--empty"><br></p><p name="58ea" id="58ea" class="graf--p">Marketing is dead. Now’s the time time to build a community around your product. A community of passionate customers that believe in your mission.</p><p name="4dee" id="4dee" class="graf--p">So think about which customers will be so passionate about your business that they’ll be your advocates – coming back regularly and telling their friends? Or another way of thinking about it:</p><blockquote name="2239" id="2239" class="graf--pullquote pullquote">Who will love you so much that they’ll get a tattoo of your company?</blockquote><p name="0bd4" id="0bd4" class="graf--p">OK, maybe a bit far fetched but it’s a useful exercise and people do it…</p><figure name="4b1b" id="4b1b" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 200px; max-height: 242px;"><div class="aspect-ratio-fill" style="padding-bottom: 121%;"></div><img class="graf-image" data-image-id="0*rEPnS1eT-L6OaRlF.png" data-width="200" data-height="242" src="https://medium2.global.ssl.fastly.net/max/960/0*rEPnS1eT-L6OaRlF.png"></div></figure><p name="9b4d" id="9b4d" class="graf--p">Have a think what it would take for people to love you that much?<br><em class="markup--em markup--p-em">Clue: It involves winning their heart and mind, not just wallet.</em></p><figure name="85de" id="85de" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 1030px;"><div class="aspect-ratio-fill" style="padding-bottom: 147.2%;"></div><img class="graf-image" data-image-id="1*1OiJ_ZE78TI_9AZVhxmSJA.jpeg" data-width="2000" data-height="2944" data-action="zoom" data-action-value="1*1OiJ_ZE78TI_9AZVhxmSJA.jpeg" src="https://medium2.global.ssl.fastly.net/max/960/1*1OiJ_ZE78TI_9AZVhxmSJA.jpeg"></div></figure><p name="922f" id="922f" class="graf--p">One effective way to build your tribe is to nail your colours to the mast and <strong class="markup--strong markup--p-strong">create your own manifesto </strong>before you release a product. Startups like <a href="http://www.maptia.com" data-href="http://www.maptia.com" class="markup--anchor markup--p-anchor" rel="nofollow">Maptia</a>, <a href="http://www.nobl.io/about/" data-href="http://www.nobl.io/about/" class="markup--anchor markup--p-anchor" rel="nofollow">Holstee</a>, <a href="http://www.nobl.io" data-href="http://www.nobl.io" class="markup--anchor markup--p-anchor" rel="nofollow">NOBL Collective</a> as well our own initiative <a href="http://www.thehappystartupschool.com" data-href="http://www.thehappystartupschool.com" class="markup--anchor markup--p-anchor" rel="nofollow">The Happy Startup School</a> have created their own manifestos to get people to rally around their mission.</p><figure name="b0c3" id="b0c3" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 514px;"><div class="aspect-ratio-fill" style="padding-bottom: 73.4%;"></div><img class="graf-image" data-image-id="1*VvAeDzBlLKJr7US6deksXg.jpeg" data-width="722" data-height="530" data-action="zoom" data-action-value="1*VvAeDzBlLKJr7US6deksXg.jpeg" src="https://medium2.global.ssl.fastly.net/max/960/1*VvAeDzBlLKJr7US6deksXg.jpeg"></div></figure><p name="68db" id="68db" class="graf--p">We created our <a href="http://www.thehappystartupschool.com/happifesto" data-href="http://www.thehappystartupschool.com/happifesto" class="markup--anchor markup--p-anchor" rel="nofollow">Happifesto</a> to encourage more entrepreneurs and leaders to build businesses the right way, that is, to put people first and enjoy the journey. It’s what we believe in and it helped to kickstart our movement for more purpose-driven startups.</p><p name="d676" id="d676" class="graf--p">And remember – it’s ok if not everyone likes you. In fact, it’s better if some don’t. It’s hard for people to love you if you’re trying to appeal to everyone – it’s ok to be a <em class="markup--em markup--p-em">Marmite product</em>. If you piss people off that generally means you’re making some impact, as this chart shows…</p><figure name="d09e" id="d09e" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 599px; max-height: 432px;"><div class="aspect-ratio-fill" style="padding-bottom: 72.1%;"></div><img class="graf-image" data-image-id="1*SIAUDtU9eXo5fOnVVpNy-A.jpeg" data-width="599" data-height="432" src="https://medium2.global.ssl.fastly.net/max/960/1*SIAUDtU9eXo5fOnVVpNy-A.jpeg"></div></figure><figure name="3c24" id="3c24" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 523px;"><div class="aspect-ratio-fill" style="padding-bottom: 74.8%;"></div><img class="graf-image" data-image-id="1*RMqWNfS1gzuTbTZ7Ya11Ww.png" data-width="800" data-height="598" data-action="zoom" data-action-value="1*RMqWNfS1gzuTbTZ7Ya11Ww.png" src="https://medium2.global.ssl.fastly.net/max/960/1*RMqWNfS1gzuTbTZ7Ya11Ww.png"></div></figure><h3 name="3675" id="3675" class="graf--h3">9. Make it remarkable</h3><p name="b797" id="b797" class="graf--p">So don’t play it too safe. Transform your product by making it remarkable. In Seth Godin’s words:</p><blockquote name="6b98" id="6b98" class="graf--blockquote">Be the purple cow in a field of monochrome Holsteins.</blockquote><p name="cdb7" id="cdb7" class="graf--p">So don’t be a little bit different. <strong class="markup--strong markup--p-strong">Be very different.</strong></p><p name="18b7" id="18b7" class="graf--p">Don’t be so safe you’re easy to ignore. <strong class="markup--strong markup--p-strong">Give people a reason to talk.</strong></p><blockquote name="2a10" id="2a10" class="graf--pullquote pullquote graf--startsWithDoubleQuote">“Take that money you would have spent on business cards and instead take your 5 most passionate customers on a pub crawl.” Jeremiah Gardner, The Lean Brand</blockquote><p name="57b4" id="57b4" class="graf--p">At the beginning don’t sell to them. Get to know them and what makes them tick so you can create something they find worth remarking about.</p><figure name="c084" id="c084" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 522px;"><div class="aspect-ratio-fill" style="padding-bottom: 74.5%;"></div><img class="graf-image" data-image-id="1*6ETfSbcsdGLw1ZSpS74UiQ.png" data-width="804" data-height="599" data-action="zoom" data-action-value="1*6ETfSbcsdGLw1ZSpS74UiQ.png" src="https://medium2.global.ssl.fastly.net/max/960/1*6ETfSbcsdGLw1ZSpS74UiQ.png"></div></figure><h3 name="455a" id="455a" class="graf--h3">10. Make it part of a strategy</h3><p name="c775" id="c775" class="graf--p">In his recent talk at Campus London, Entrepreneur’s First co-founder Matt Clifford talked about the mistakes he’d seen teams make at his startup programme, with the most common one being what he called ‘<strong class="markup--strong markup--p-strong">the lonely MVP</strong>’.</p><p name="f08b" id="f08b" class="graf--p">He described this as a situation where the MVP <em class="markup--em markup--p-em">was </em>the product, not part of an overall product development strategy. He saw this as being a very risky approach and one which puts you at a disadvantage.</p><p name="f925" id="f925" class="graf--p">You need to clarity and communicate your vision so your team is clear where you’re going, what your strategy is and where the MVP fits into this. Bear in mind that your first release should the start of your journey towards product-market fit, not the end of the road.</p><figure name="a6af" id="a6af" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 467px;"><div class="aspect-ratio-fill" style="padding-bottom: 66.8%;"></div><img class="graf-image" data-image-id="1*T8kGDbh8IxucYm9jJiGqmg.jpeg" data-width="960" data-height="641" data-action="zoom" data-action-value="1*T8kGDbh8IxucYm9jJiGqmg.jpeg" src="https://medium2.global.ssl.fastly.net/max/960/1*T8kGDbh8IxucYm9jJiGqmg.jpeg"></div><figcaption class="imageCaption">From our recent <a href="http://www.happystartupsummer.camp" data-href="http://www.happystartupsummer.camp" class="markup--anchor markup--figure-anchor" rel="nofollow">Startup Summercamp</a></figcaption></figure><h3 name="922e" id="922e" class="graf--h3">In summary</h3><p name="590d" id="590d" class="graf--p">Making products is hard, but if you find the right business model, aim to delight your users and get them talking, you’ll be well on your way to growing your tribe of passionate super-fans and building a business with soul.</p><figure name="b697" id="b697" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 677px; max-height: 506px;"><div class="aspect-ratio-fill" style="padding-bottom: 74.7%;"></div><img class="graf-image" data-image-id="1*k5SmVW3Js2o32OOP4wP4YQ.png" data-width="677" data-height="506" src="https://medium2.global.ssl.fastly.net/max/960/1*k5SmVW3Js2o32OOP4wP4YQ.png"></div></figure><p name="d6e0" id="d6e0" class="graf--p">So just remember to:</p><ol class="postList"><li name="697a" id="697a" class="graf--li">Build sh!t that matters</li><li name="32b9" id="32b9" class="graf--li">F-O-C-U-S</li><li name="65a5" id="65a5" class="graf--li">Add constraints</li><li name="54a9" id="54a9" class="graf--li">Solve a <em class="markup--em markup--li-em">real</em> pain point</li><li name="0f61" id="0f61" class="graf--li">Rise above the functional</li><li name="8afb" id="8afb" class="graf--li">Hire a designer</li><li name="4a64" id="4a64" class="graf--li">Get your users hooked</li><li name="12a4" id="12a4" class="graf--li">Build your tribe</li><li name="a0e2" id="a0e2" class="graf--li">Make it remarkable</li><li name="a8d4" id="a8d4" class="graf--li">Be strategic</li></ol><p name="f5d8" id="f5d8" class="graf--p"><strong class="markup--strong markup--p-strong">Remember to go beyond the viable.</strong></p><p name="9eef" id="9eef" class="graf--p">To build something that people actually want.</p><p name="e4f9" id="e4f9" class="graf--p"><strong class="markup--strong markup--p-strong">And love ☺</strong></p></p>
  534. </article>
  535. </section>
  536. <nav id="jumpto">
  537. <p>
  538. <a href="/david/blog/">Accueil du blog</a> |
  539. <a href="https://medium.com/the-happy-startup-school/beyond-mvp-10-steps-to-make-your-product-minimum-loveable-51800164ae0c">Source originale</a> |
  540. <a href="/david/stream/2019/">Accueil du flux</a>
  541. </p>
  542. </nav>
  543. <footer>
  544. <div>
  545. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  546. <p>
  547. Bonjour/Hi!
  548. 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>
  549. 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>).
  550. </p>
  551. <p>
  552. 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>.
  553. </p>
  554. <p>
  555. Voici quelques articles choisis :
  556. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  557. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  558. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  559. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  560. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  561. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  562. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  563. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  564. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  565. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  566. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  567. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  568. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  569. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  570. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  571. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  572. </p>
  573. <p>
  574. 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>.
  575. </p>
  576. <p>
  577. Je ne traque pas ta navigation mais mon
  578. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  579. conserve des logs d’accès.
  580. </p>
  581. </div>
  582. </footer>
  583. <script type="text/javascript">
  584. ;(_ => {
  585. const jumper = document.getElementById('jumper')
  586. jumper.addEventListener('click', e => {
  587. e.preventDefault()
  588. const anchor = e.target.getAttribute('href')
  589. const targetEl = document.getElementById(anchor.substring(1))
  590. targetEl.scrollIntoView({behavior: 'smooth'})
  591. })
  592. })()
  593. </script>