davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>Tiny Wins (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="http://joelcalifa.com/blog/tiny-wins/">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  Tiny Wins (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="http://joelcalifa.com/blog/tiny-wins/">Source originale du contenu</a></h3>
    <p>Over the years, I&rsquo;ve worked on many important, large-scale projects, from figuring out high level strategy and blue sky products, to overhauling core flows and IA, to implementing design systems from the ground up. </p>

<p>Working on these big projects can be exhilarating. They&rsquo;re often deemed critical by company leadership and various stakeholders, and it&rsquo;s validating to be trusted with and attached to something so visible and impactful.</p>

<p>I recently shipped two things at GitHub that had an impact beyond my wildest dreams. The amount of gratitude and love that spilled out of the community is like nothing I&rsquo;ve seen before.
But the things I shipped weren&rsquo;t these huge, meaty projects. They were <em>tiny</em>.</p>

<hr>

<p>First, <strong>we made the favicons for GitHub Pull Request pages dynamic</strong>. Now browser tabs would always show a PR&rsquo;s current build status. Before releasing this, users had to periodically click back into tabs to see if their builds had completed so they could continue their work. Impatient users would click back into various PR tabs a <em>lot</em>.</p>

<figure class="tweetEmbed"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">A little hack week project <a href="https://twitter.com/notdetails?ref_src=twsrc%5Etfw">@notdetails</a> and I just shipped. <a href="https://t.co/3EvfEmWtan">pic.twitter.com/3EvfEmWtan</a></p>&mdash; Jason Long (@jasonlong) <a href="https://twitter.com/jasonlong/status/922900826607190016?ref_src=twsrc%5Etfw">October 24, 2017</a></blockquote></figure>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<p>I put together new favicons and Jason worked on implementing the dynamic switch. This change took less than a week, and hundreds of people noticed it immediately. This is just a small sample of the many delighted responses.</p>

<div><picture>
    <source srcset="/assets/images/generated/blog/tiny-wins/tweets1-1029by1418-66f846.png" media="(min-width: 65rem)">
    <source srcset="/assets/images/generated/blog/tiny-wins/tweets1-880by1213-66f846.png" media="(min-width: 45rem)">
    <source srcset="/assets/images/generated/blog/tiny-wins/tweets1-700by965-66f846.png" media="(min-width: 35rem)">
    <source srcset="/assets/images/generated/blog/tiny-wins/tweets1-small-500by960-eba833.png">
    <img srcset="/assets/images/generated/blog/tiny-wins/tweets1-small-500by960-eba833.png" alt="Tweets about GitHub favicons" class="noBorder grown" >
  </picture>
</div>

<p>My next project was <strong>changing the <code>...</code> indicator on new PR pages to an arrow that indicated merge direction</strong>. Before releasing this, people would regularly confuse which branch would be merged into which.</p>

<figure class="tweetEmbed"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Ever get confused between your &ldquo;base&rdquo; and &ldquo;compare&rdquo; branches? Shipped a tiny <a href="https://twitter.com/github?ref_src=twsrc%5Etfw">@github</a> change today that will hopefully clear things up. <a href="https://t.co/acOddhxLDs">pic.twitter.com/acOddhxLDs</a></p>&mdash; Joel Califa (@notdetails) <a href="https://twitter.com/notdetails/status/937823787495571456?ref_src=twsrc%5Etfw">December 4, 2017</a></blockquote></figure>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<p>This was a one-line code change that took a few minutes. I didn&rsquo;t even design the arrow — it was already in our icon set.</p>

<p>This tiny change solved a seemingly small frustration, but it turned out to be very significant to many of our users. Again, we saw hundreds of enthusiastic responses and shares.</p>

<div><picture>
    <source srcset="/assets/images/generated/blog/tiny-wins/tweets2-1029by1418-2b701c.png" media="(min-width: 65rem)">
    <source srcset="/assets/images/generated/blog/tiny-wins/tweets2-880by1213-2b701c.png" media="(min-width: 45rem)">
    <source srcset="/assets/images/generated/blog/tiny-wins/tweets2-700by965-2b701c.png" media="(min-width: 35rem)">
    <source srcset="/assets/images/generated/blog/tiny-wins/tweets2-small-500by960-290bfc.png">
    <img srcset="/assets/images/generated/blog/tiny-wins/tweets2-small-500by960-290bfc.png" alt="Tweets about the GitHub merge arrow" class="noBorder grown" >
  </picture>
</div>

<h2>Low effort, high impact</h2>

<p>The first of these changes took just under a week and the second  took only a few minutes. Both changes affected very small sections of the platform, yet both enjoyed a passionate, almost euphoric reception. Users were <em>excited</em>.</p>

<p>That&rsquo;s not to say that impact can or should be measured by the number of likes received (unlike, say, personal worth). But the individual responses tell a story of how meaningful even the smallest tweak can be to your users.</p>

<p>I can&rsquo;t count how many times I&rsquo;ve seen the following graphic in its various forms over the years:</p>

<div><img class="noBorder" src="/assets/images/blog/tiny-wins/evaluation.png" alt="Matrix of low to high effort and low to high impact"></div>

<p>The obvious advice, as seen in this version of it, is to execute on things that take little time and make big dents. Curiously, I haven&rsquo;t seen many organizations actually take this advice to heart. Considering how valuable this type of work can be, I honestly don&rsquo;t understand why.</p>

<p>Let&rsquo;s discuss what changes like this can do for you.</p>

<h3>One small change can add up to a big win</h3>

<p>High frequency actions (such as creating new PRs on GitHub) take place millions of times a day. A given user might go through the same flow several times per week, per day, or even per hour. These flows become a part of their lives.</p>

<p>If there is even a slight inefficiency or frustration, it compounds with every use. One confusing moment that takes an extra 5 seconds—repeated multiple times a day in perpetuity—adds up to a lot of anxiety and wasted time.</p>

<p><em>That&rsquo;s</em> why users are so thankful for these tweaks. They understand the significance of all that future time saved.</p>

<p>We can see similar reactions after Netflix added a button that let users skip a TV show&rsquo;s intro sequence. Following this change, users no longer had to scrub back and forth through videos until they landed on the exact start of an episode.</p>

<div><picture>
    <source srcset="/assets/images/generated/blog/tiny-wins/tweets3-1029by998-e52806.png" media="(min-width: 65rem)">
    <source srcset="/assets/images/generated/blog/tiny-wins/tweets3-880by853-e52806.png" media="(min-width: 45rem)">
    <source srcset="/assets/images/generated/blog/tiny-wins/tweets3-700by679-e52806.png" media="(min-width: 35rem)">
    <source srcset="/assets/images/generated/blog/tiny-wins/tweets3-small-500by960-dc4b6d.png">
    <img srcset="/assets/images/generated/blog/tiny-wins/tweets3-small-500by960-dc4b6d.png" alt="Tweets about Netflix's skip intro button" class="noBorder grown" >
  </picture>
</div>

<p>We can see more responses along the same lines after Chrome released a volume icon that indicated which tabs were making noise. Following this change, users no longer had to click into every open tab to find the source of their discomfort.</p>

<div></div>

<figure class="grown noBorder">
  <picture>
    <source srcset="/assets/images/generated/blog/tiny-wins/tweets4-1029by998-0ec748.png" media="(min-width: 65rem)">
    <source srcset="/assets/images/generated/blog/tiny-wins/tweets4-880by853-0ec748.png" media="(min-width: 45rem)">
    <source srcset="/assets/images/generated/blog/tiny-wins/tweets4-700by679-0ec748.png" media="(min-width: 35rem)">
    <source srcset="/assets/images/generated/blog/tiny-wins/tweets4-small-500by960-d5df44.png">
    <img srcset="/assets/images/generated/blog/tiny-wins/tweets4-small-500by960-d5df44.png" alt="Tweets about Chrome tabs' noise indicator" >
  </picture>

  <figcaption>Nobel prizes all around.</figcaption>
</figure>

<p>There are many more examples of this kind of overwhelming gratitude following similar tweaks. The changes may seem minor, but they resolved frustrations that were experienced over and over by <em>millions</em> of users. </p>

<p>Imagine that one of your 20 Chrome tabs is currently auto-playing the most obnoxious video on the entire internet. The way you solve this is by trial-and-error clicking through every single tab. You didn&rsquo;t find it the first time. How is that possible? Ugh, maybe you clicked into it without noticing. Let&rsquo;s try again and again until finally, defeated, you close your entire browser. Rinse and repeat tomorrow and every other day for the foreseeable future.</p>

<figure class="grown noBorder">
  <div><img class="noBorder" src="/assets/images/blog/tiny-wins/bad-experience.png" alt="the experience in emoji form"></div>
  <figcaption>A dramatized reenactment.</figcaption>
</figure>

<p>Compare that to the experience of just closing the tab with the noise icon.</p>

<div><img class="noBorder grown" src="/assets/images/blog/tiny-wins/good-experience.png" alt="a better experience in emoji form"></div>

<p>You can think of the aforementioned changes as shortcuts. The intermediate steps (randomly clicking through your many tabs to find the source of your pain, or racking your brain for which git branch merges into which so you don&rsquo;t accidentally break your company) are small paper cuts, but they add up. These changes get rid of them.</p>

<p>Getting your personal pet peeve fixed is powerful, often more so than new, more substantial features. Think about all that cumulative impact resulting from such little effort.</p>

<p>This is what I call a Tiny Win.</p>

<h3>Tiny Wins can strengthen your business</h3>

<p>Let&rsquo;s get this out of the way: large projects are important. If a company wants to continue innovating, tiny iterations like the ones above don&rsquo;t quite cut it. So, to be clear, I&rsquo;m not suggesting we begin planning roadmaps around these Tiny Wins. Ambitious projects should lead the way.</p>

<p>But large scale projects demand coordination, diligence, and — most of all — time. These things don&rsquo;t happen overnight. In the time it takes to ship something of substance, a product can begin to feel stagnant. For a startup (especially one with viable competition) that stagnation can spell death.</p>

<p>To combat this, companies have to create an atmosphere of momentum, and prove to their users that they&rsquo;re both listening and improving. They need to fill the long gaps between ambitious launches with smaller ships.</p>

<p>Many companies try to strike a balance by building MVPs and iterating from there. This, ideally, provides users with regular value along every step of the way. But each of these steps can still take anywhere from a two-week sprint to several months—and the output of each step is not always inherently valuable. It&rsquo;s often the next small thing on the way to a more complete product.</p>

<p>In contrast, the various improvements I listed above are all self-contained. Netflix&rsquo;s &ldquo;skip intro&rdquo; button is significant to users <em>in itself</em>. As is Chrome&rsquo;s noise indicators and GitHub&rsquo;s dynamic favicons.</p>

<p>Because of this, these changes were perceived and acknowledged as fresh, complete features. They communicated to users that <em>they were being listened to</em>. These features bred excitement, goodwill, and likely loyalty towards their respective companies. Hell, they probably even contributed to some organic growth.</p>

<p>MVPs and iteration are powerful tools that should be leveraged by companies looking to move quickly. But Tiny Wins are much more potent when it comes to filling the gaps, improving retention, and nurturing your community of users.</p>

<h2>Make Tiny Wins work for you</h2>

<p>OK, so Tiny Wins are great and they have this cute name to boot. Obviously you&rsquo;re sold on this. The next step, then, is to leverage them regularly and reap the rewards.</p>

<p>Now, your first instinct might be to open up your user feedback channels and start prioritizing issues. I&rsquo;d caution against this.</p>

<p>I noticed something weird about the issues we solved with these changes. They were almost never reported.</p>

<p>Hundreds of people were ecstatic when we added that arrow to PR pages. Out of those, not a single one indicated that this flow was confusing. A lot of people assumed it was their own fault for not just &ldquo;getting&rdquo; it.</p>

<div><picture>
    <source srcset="/assets/images/generated/blog/tiny-wins/tweets5-1029by180-309373.png" media="(min-width: 65rem)">
    <source srcset="/assets/images/generated/blog/tiny-wins/tweets5-880by154-309373.png" media="(min-width: 45rem)">
    <source srcset="/assets/images/generated/blog/tiny-wins/tweets5-700by122-309373.png" media="(min-width: 35rem)">
    <source srcset="/assets/images/generated/blog/tiny-wins/tweets5-small-500by375-d82c9d.png">
    <img srcset="/assets/images/generated/blog/tiny-wins/tweets5-small-500by375-d82c9d.png" alt="Tweets from people blaming themselves" class="noBorder grown" >
  </picture>
</div>

<p>Others get so accustomed to these flows that they don&rsquo;t even notice their anxiety. If they do, it&rsquo;s just part of life. The status quo. Something to live with, not improve.</p>

<p>How many people recognized the act of scrubbing a video to find the start of an episode as improvable? How many people thought to ask the Chrome team to solve their noisy tab problems?</p>

<blockquote>Something something faster horses.&rdquo; —Henry Ford<span class="arrow"></span></blockquote>

<p>The lesson here is that you can&rsquo;t trust your users to bubble up the small stuff, which as we&rsquo;ve seen can often be the best stuff to build). This means that you can&rsquo;t exclusively rely on existing user feedback and tickets. You need to dig deeper.</p>

<h3>Make a list, check it twice</h3>

<p>Making a list of quick wins isn’t hard, but making sure that what you’re building is worth the effort can be trickier. Not every opportunity will have the kind of impact we saw above, and that’s what Tiny Wins are all about.</p>

<p><strong>Tiny Wins are standalone.</strong> These changes are small, scoped, and provide their own value. If the change can&rsquo;t be appreciated on its own, it doesn&rsquo;t belong on the list.</p>

<p><strong>Tiny Wins are low effort.</strong> These projects are straightforward, scoped, and takes a short amount of time. If the change requires a significant amount of time and effort, it doesn&rsquo;t belong on the list.</p>

<p><strong>Tiny Wins are high impact.</strong> They affect things that the majority of users interact with on a regular basis. If the change won&rsquo;t have the compounding effects we&rsquo;ve discussed, it doesn&rsquo;t belong on the list. This means that something like addressing your system&rsquo;s <a href="http://blog.capwatkins.com/dark-corners">dark corners</a>, while important and worthwhile, is not right for this list.</p>

<p><strong>Tiny Wins are often shortcuts.</strong> They save a user&rsquo;s time by getting rid of existing steps — <em>physical or mental</em> — required to perform an action. This is a really useful way to think about the types of changes we saw above, and a good way to differentiate them from other low-hanging fruits that don&rsquo;t belong on your lists. At least initially, users will still remember the frustrating experiences they once had to deal with. They&rsquo;ll remember them viscerally. That&rsquo;s where the love comes from.</p>

<hr>

<p>So start by setting up a meeting with as many perspectives as you can. Designers, Developers, PMs, Customer Success, and Support staff all have equally valuable insights here, but anyone with a finger on the pulse of your user base is especially important. Ask yourselves:</p>

<ul>
<li>What are your product&rsquo;s most frequently used flows?</li>
<li>What about those flows is frustrating? What regularly takes up time or cognitive load? This could be an extra click or an ambiguous component.</li>
<li>How frustrating are these moments? What is the sum of time or frustration that fixing each of these small things will save? How many users would be affected?</li>
<li>Will it be noticeable? Will it be shareable? Will it create joy?</li>
</ul>

<p>Fresh eyes are extremely useful when it comes to answering these questions. I&rsquo;d only been at GitHub for a few months when I added the arrow to the PR page, and I did that because it just <em>didn&rsquo;t make sense</em> to me.</p>

<p>Designers, like users, get used to their product and its various quirks. In time, it can become increasingly difficult to see what could be improved. So try to include new employees in this process. Make it a part of your team&rsquo;s on-boarding. And nurture an atmosphere that encourages your team to continue questioning the status quo even as they get to know the product.</p>

<p>Once you&rsquo;ve populated the initial list, you can validate individual items with users and prioritize them based on effort/impact, as you would anything else.</p>

<h3>Now do the things on the list</h3>

<p>Every organization is different, so there isn&rsquo;t a universal process that&rsquo;ll work for everything. What I <em>can</em> say is that the key element to make this work is a regular cadence. This is what will create a sense that the company is listening and moving quickly. This is what will breed trust in your user base.</p>

<ul>
<li>Include a Tiny Win in every sprint, or fill your downtime by picking items off the list. Make sure these tweaks are shipped frequently.</li>
<li>Keep the list alive by including new people, adding new items to it, revalidating it, and reprioritizing it often.</li>
<li>Make it a point to include your social media managers early in the conversation. Highlighting these features the right way is extremely important, and also fun!</li>
</ul>

<p>That&rsquo;s it. Not exactly rocket science. Not exactly novel. But very powerful.</p>

<p>I believe that getting into the habit of shipping Tiny Wins can do wonders for your brand. It can set you apart from competitors. It can show your users that you&rsquo;re listening to them and that they can trust you. It can turn those same users into promoters, boost your NPS, and lead to organic growth. Most importantly, it&rsquo;ll make your product, and the lives of your users, that much better.</p>

<p>Imagine all of that for such a tiny amount of ongoing effort. </p>

<p>So&hellip; what can you fix today?</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="http://joelcalifa.com/blog/tiny-wins/">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      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>
      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>).
    </p>
    <p>
      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>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      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>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>