davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957
							<!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>U.S. Digital Services Playbook (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="https://playbook.cio.gov/">

<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>
  U.S. Digital Services Playbook (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://playbook.cio.gov/">Source originale du contenu</a></h3>
    <div id="plays" class="outer_container">

<div class="inner_container">
  <h6>PLAY 1</h6>
  <h2 class="display">Understand what people need</h2>

  <p>We must begin digital projects by exploring and pinpointing the needs of the people who will use the service, and the ways the service will fit into their lives. Whether the users are members of the public or government employees, policy makers must include real people in their design process from the beginning. The needs of people — not constraints of government structures or silos — should inform technical and design decisions. We need to continually test the products we build with real people to keep us honest about what is important.</p>

<h3>Checklist</h3>

<ol>
<li>Early in the project, spend time with current and prospective users of the service</li>
<li>Use a range of qualitative and quantitative research methods to determine people’s goals, needs, and behaviors; be thoughtful about the time spent</li>
<li>Test prototypes of solutions with real people, in the field if possible</li>
<li>Document the findings about user goals, needs, behaviors, and preferences</li>
<li>Share findings with the team and agency leadership</li>
<li>Create a prioritized list of tasks the user is trying to accomplish, also known as "user stories"</li>
<li>As the digital service is being built, regularly test it with potential users to ensure it meets people’s needs</li>
</ol>


<h3>Key Questions</h3>

<ul>
<li>Who are your primary users?</li>
<li>What user needs will this service address?</li>
<li>Why does the user want or need this service?</li>
<li>Which people will have the most difficulty with the service?</li>
<li>Which research methods were used?</li>
<li>What were the key findings?</li>
<li>How were the findings documented? Where can future team members access the documentation?</li>
<li>How often are you testing with real people?</li>
</ul>


</div>

<div class="inner_container">
  <h6>PLAY 2</h6>
  <h2 class="display">Address the whole experience, from start to finish</h2>

  <p>We need to understand the different ways people will interact with our services, including the actions they take online, through a mobile application, on a phone, or in person. Every encounter — whether it's online or offline — should move the user closer towards their goal.</p>

<h3>Checklist</h3>

<ol>
<li>Understand the different points at which people will interact with the service – both online and in person</li>
<li>Identify pain points in the current way users interact with the service, and prioritize these according to user needs</li>
<li>Design the digital parts of the service so that they are integrated with the offline touch points people use to interact with the service</li>
<li>Develop metrics that will measure how well the service is meeting user needs at each step of the service</li>
</ol>


<h3>Key Questions</h3>

<ul>
<li>What are the different ways (both online and offline) that people currently accomplish the task the digital service is designed to help with?</li>
<li>Where are user pain points in the current way people accomplish the task?</li>
<li>Where does this specific project fit into the larger way people currently obtain the service being offered?</li>
<li>What metrics will best indicate how well the service is working for its users?</li>
</ul>


</div>

<div class="inner_container">
  <h6>PLAY 3</h6>
  <h2 class="display">Make it simple and intuitive</h2>

  <p>Using a government service shouldn’t be stressful, confusing, or daunting. It’s our job to build services that are simple and intuitive enough that users succeed the first time, unaided.</p>

<h3>Checklist</h3>

<ol>
<li>Use a simple and flexible design style guide for the service. Use the <a href="https://playbook.cio.gov/designstandards">U.S. Web Design Standards</a> as a default</li>
<li>Use the design style guide consistently for related digital services</li>
<li>Give users clear information about where they are in each step of the process</li>
<li>Follow accessibility best practices to ensure all people can use the service</li>
<li>Provide users with a way to exit and return later to complete the process</li>
<li>Use language that is familiar to the user and easy to understand</li>
<li>Use language and design consistently throughout the service, including online and offline touch points</li>
</ol>


<h3>Key Questions</h3>

<ul>
<li>What primary tasks are the user trying to accomplish?</li>
<li>Is the language as plain and universal as possible?</li>
<li>What languages is your service offered in?</li>
<li>If a user needs help while using the service, how do they go about getting it?</li>
<li>How does the service’s design visually relate to other government services?</li>
</ul>


</div>

<div class="inner_container">
  <h6>PLAY 4</h6>
  <h2 class="display">Build the service using agile and iterative practices</h2>

  <p>We should use an incremental, fast-paced style of software development to reduce the risk of failure. We want to get working software into users’ hands as early as possible to give the design and development team opportunities to adjust based on user feedback about the service. A critical capability is being able to automatically test and deploy the service so that new features can be added often and be put into production easily.</p>

<h3>Checklist</h3>

<ol>
<li>Ship a functioning “minimum viable product” (MVP) that solves a core user need as soon as possible, no longer than three months from the beginning of the project, using a “beta” or “test” period if needed</li>
<li>Run usability tests frequently to see how well the service works and identify improvements that should be made</li>
<li>Ensure the individuals building the service communicate closely using techniques such as launch meetings, war rooms, daily standups, and team chat tools</li>
<li>Keep delivery teams small and focused; limit organizational layers that separate these teams from the business owners</li>
<li>Release features and improvements multiple times each month</li>
<li>Create a prioritized list of features and bugs, also known as the “feature backlog” and “bug backlog”</li>
<li>Use a source code version control system</li>
<li>Give the entire project team access to the issue tracker and version control system</li>
<li>Use code reviews to ensure quality</li>
</ol>


<h3>Key Questions</h3>

<ul>
<li>How long did it take to ship the MVP? If it hasn't shipped yet, when will it?</li>
<li>How long does it take for a production deployment?</li>
<li>How many days or weeks are in each iteration/sprint?</li>
<li>Which version control system is being used?</li>
<li>How are bugs tracked and tickets issued? What tool is used?</li>
<li>How is the feature backlog managed? What tool is used?</li>
<li>How often do you review and reprioritize the feature and bug backlog?</li>
<li>How do you collect user feedback during development? How is that feedback used to improve the service?</li>
<li>At each stage of usability testing, which gaps were identified in addressing user needs?</li>
</ul>


</div>

<div class="inner_container">
  <h6>PLAY 5</h6>
  <h2 class="display">Structure budgets and contracts to support delivery</h2>

  <p>To improve our chances of success when contracting out development work, we need to work with experienced budgeting and contracting officers. In cases where we use third parties to help build a service, a well-defined contract can facilitate good development practices like conducting a research and prototyping phase, refining product requirements as the service is built, evaluating open source alternatives, ensuring frequent delivery milestones, and allowing the flexibility to purchase cloud computing resources.</p>

<p><a href="https://playbook.cio.gov/techfar/">The TechFAR Handbook</a> provides a detailed explanation of the flexibilities in the Federal Acquisition Regulation (FAR) that can help agencies implement this play.</p>

<h3>Checklist</h3>

<ol>
<li>Budget includes research, discovery, and prototyping activities</li>
<li>Contract is structured to request frequent deliverables, not multi-month milestones</li>
<li>Contract is structured to hold vendors accountable to deliverables</li>
<li>Contract gives the government delivery team enough flexibility to adjust feature prioritization and delivery schedule as the project evolves</li>
<li>Contract ensures open source solutions are evaluated when technology choices are made</li>
<li>Contract specifies that software and data generated by third parties remains under our control, and can be reused and released to the public as appropriate and in accordance with the law</li>
<li>Contract allows us to use tools, services, and hosting from vendors with a variety of pricing models, including fixed fees and variable models like “pay-for-what-you-use” services</li>
<li>Contract specifies a warranty period where defects uncovered by the public are addressed by the vendor at no additional cost to the government</li>
<li>Contract includes a transition of services period and transition-out plan</li>
</ol>


<h3>Key Questions</h3>

<ul>
<li>What is the scope of the project? What are the key deliverables?</li>
<li>What are the milestones? How frequent are they?</li>
<li>What are the performance metrics defined in the contract (e.g., response time, system uptime, time period to address priority issues)?</li>
</ul>


</div>

<div class="inner_container">
  <h6>PLAY 6</h6>
  <h2 class="display">Assign one leader and hold that person accountable</h2>

  <p>There must be a single product owner who has the authority and responsibility to assign tasks and work elements; make business, product, and technical decisions; and be accountable for the success or failure of the overall service. This product owner is ultimately responsible for how well the service meets needs of its users, which is how a service should be evaluated. The product owner is responsible for ensuring that features are built and managing the feature and bug backlogs.</p>

<h3>Checklist</h3>

<ol>
<li>A product owner has been identified</li>
<li>All stakeholders agree that the product owner has the authority to assign tasks and make decisions about features and technical implementation details</li>
<li>The product owner has a product management background with technical experience to assess alternatives and weigh tradeoffs</li>
<li>The product owner has a work plan that includes budget estimates and identifies funding sources</li>
<li>The product owner has a strong relationship with the contracting officer</li>
</ol>


<h3>Key Questions</h3>

<ul>
<li>Who is the product owner?</li>
<li>What organizational changes have been made to ensure the product owner has sufficient authority over and support for the project?</li>
<li>What does it take for the product owner to add or remove a feature from the service?</li>
</ul>


</div>

<div class="inner_container">
  <h6>PLAY 7</h6>
  <h2 class="display">Bring in experienced teams</h2>

  <p>We need talented people working in government who have experience creating modern digital services. This includes bringing in seasoned product managers, engineers, and designers. When outside help is needed, our teams should work with contracting officers who understand how to evaluate third-party technical competency so our teams can be paired with contractors who are good at both building and delivering effective digital services. The makeup and experience requirements of the team will vary depending on the scope of the project.</p>

<h3>Checklist</h3>

<ol>
<li>Member(s) of the team have experience building popular, high-traffic digital services</li>
<li>Member(s) of the team have experience designing mobile and web applications</li>
<li>Member(s) of the team have experience using automated testing frameworks</li>
<li>Member(s) of the team have experience with modern development and operations (DevOps) techniques like continuous integration and continuous deployment</li>
<li>Member(s) of the team have experience securing digital services</li>
<li>A Federal contracting officer is on the internal team if a third party will be used for development work</li>
<li>A Federal budget officer is on the internal team or is a partner</li>
<li>The appropriate privacy, civil liberties, and/or legal advisor for the department or agency is a partner</li>
</ol>


</div>

<div class="inner_container">
  <h6>PLAY 8</h6>
  <h2 class="display">Choose a modern technology stack</h2>

  <p>The technology decisions we make need to enable development teams to work efficiently and enable services to scale easily and cost-effectively. Our choices for hosting infrastructure, databases, software frameworks, programming languages and the rest of the technology stack should seek to avoid vendor lock-in and match what successful modern consumer and enterprise software companies would choose today. In particular, digital services teams should consider using open source, cloud-based, and commodity solutions across the technology stack, because of their widespread adoption and support by successful consumer and enterprise technology companies in the private sector.</p>

<h3>Checklist</h3>

<ol>
<li>Choose software frameworks that are commonly used by private-sector companies creating similar services</li>
<li>Whenever possible, ensure that software can be deployed on a variety of commodity hardware types</li>
<li>Ensure that each project has clear, understandable instructions for setting up a local development environment, and that team members can be quickly added or removed from projects</li>
<li><a href="http://www.whitehouse.gov/sites/default/files/omb/assets/egov_docs/memotociostechnologyneutrality.pdf">Consider open source software solutions</a> at every layer of the stack</li>
</ol>


<h3>Key Questions</h3>

<ul>
<li>What is your development stack and why did you choose it?</li>
<li>Which databases are you using and why did you choose them?</li>
<li>How long does it take for a new team member to start developing?</li>
</ul>


</div>

<div class="inner_container">
  <h6>PLAY 9</h6>
  <h2 class="display">Deploy in a flexible hosting environment</h2>

  <p>Our services should be deployed on flexible infrastructure, where resources can be provisioned in real-time to meet spikes traffic and user demand. Our digital services are crippled when we host them in data centers that market themselves as “cloud hosting” but require us to manage and maintain hardware directly. This outdated practice wastes time, weakens our disaster recovery plans, and results in significantly higher costs.</p>

<h3>Checklist</h3>

<ol>
<li>Resources are provisioned on demand</li>
<li>Resources scale based on real-time user demand</li>
<li>Resources are provisioned through an API</li>
<li>Resources are available in multiple regions</li>
<li>We only pay for resources we use</li>
<li>Static assets are served through a content delivery network</li>
<li>Application is hosted on commodity hardware</li>
</ol>


<h3>Key Questions</h3>

<ul>
<li>Where is your service hosted?</li>
<li>What hardware does your service use to run?</li>
<li>What is the demand or usage pattern for your service?</li>
<li>What happens to your service when it experiences a surge in traffic or load?</li>
<li>How much capacity is available in your hosting environment?</li>
<li>How long does it take you to provision a new resource, like an application server?</li>
<li>How have you designed your service to scale based on demand?</li>
<li>How are you paying for your hosting infrastructure (e.g., by the minute, hourly, daily, monthly, fixed)?</li>
<li>Is your service hosted in multiple regions, availability zones, or data centers?</li>
<li>In the event of a catastrophic disaster to a datacenter, how long will it take to have the service operational?</li>
<li>What would be the impact of a prolonged downtime window?</li>
<li>What data redundancy do you have built into the system, and what would be the impact of a catastrophic data loss?</li>
<li>How often do you need to contact a person from your hosting provider to get resources or to fix an issue?</li>
</ul>


</div>

<div class="inner_container">
  <h6>PLAY 10</h6>
  <h2 class="display">Automate testing and deployments</h2>

  <p>Today, developers write automated scripts that can verify thousands of scenarios in minutes and then deploy updated code into production environments multiple times a day. They use automated performance tests which simulate surges in traffic to identify performance bottlenecks. While manual tests and quality assurance are still necessary, automated tests provide consistent and reliable protection against unintentional regressions, and make it possible for developers to confidently release frequent updates to the service.</p>

<h3>Checklist</h3>

<ol>
<li>Create automated tests that verify all user-facing functionality</li>
<li>Create unit and integration tests to verify modules and components</li>
<li>Run tests automatically as part of the build process</li>
<li>Perform deployments automatically with deployment scripts, continuous delivery services, or similar techniques</li>
<li>Conduct load and performance tests at regular intervals, including before public launch</li>
</ol>


<h3>Key Questions</h3>

<ul>
<li>What percentage of the code base is covered by automated tests?</li>
<li>How long does it take to build, test, and deploy a typical bug fix?</li>
<li>How long does it take to build, test, and deploy a new feature into production?</li>
<li>How frequently are builds created?</li>
<li>What test tools are used?</li>
<li>Which deployment automation or continuous integration tools are used?</li>
<li>What is the estimated maximum number of concurrent users who will want to use the system?</li>
<li>How many simultaneous users could the system handle, according to the most recent capacity test?</li>
<li>How does the service perform when you exceed the expected target usage volume? Does it degrade gracefully or catastrophically?</li>
<li>What is your scaling strategy when demand increases suddenly?</li>
</ul>


</div>

<div class="inner_container">
  <h6>PLAY 11</h6>
  <h2 class="display">Manage security and privacy through reusable processes</h2>

  <p>Our digital services have to protect sensitive information and keep systems secure. This is typically a process of continuous review and improvement which should be built into the development and maintenance of the service. At the start of designing a new service or feature, the team lead should engage the appropriate privacy, security, and legal officer(s) to discuss the type of information collected, how it should be secured, how long it is kept, and how it may be used and shared. The sustained engagement of a privacy specialist helps ensure that personal data is properly managed. In addition, a key process to building a secure service is comprehensively testing and certifying the components in each layer of the technology stack for security vulnerabilities, and then to re-use these same pre-certified components for multiple services.</p>

<p>The following checklist provides a starting point, but teams should work closely with their privacy specialist and security engineer to meet the needs of the specific service.</p>

<h3>Checklist</h3>

<ol>
<li>Contact the appropriate privacy or legal officer of the department or agency to determine whether a System of Records Notice (SORN), Privacy Impact Assessment, or other review should be conducted</li>
<li>Determine, in consultation with a records officer, what data is collected and why, how it is used or shared, how it is stored and secured, and how long it is kept</li>
<li>Determine, in consultation with a privacy specialist, whether and how users are notified about how personal information is collected and used, including whether a privacy policy is needed and where it should appear, and how users will be notified in the event of a security breach</li>
<li>Consider whether the user should be able to access, delete, or remove their information from the service</li>
<li>“Pre-certify” the hosting infrastructure used for the project using FedRAMP</li>
<li>Use deployment scripts to ensure configuration of production environment remains consistent and controllable</li>
</ol>


<h3>Key Questions</h3>

<ul>
<li>Does the service collect personal information from the user?  How is the user notified of this collection?</li>
<li>Does it collect more information than necessary? Could the data be used in ways an average user wouldn't expect?</li>
<li>How does a user access, correct, delete, or remove personal information?</li>
<li>Will any of the personal information stored in the system be shared with other services, people, or partners?</li>
<li>How and how often is the service tested for security vulnerabilities?</li>
<li>How can someone from the public report a security issue?</li>
</ul>


</div>

<div class="inner_container">
  <h6>PLAY 12</h6>
  <h2 class="display">Use data to drive decisions</h2>

  <p>At every stage of a project, we should measure how well our service is working for our users. This includes measuring how well a system performs and how people are interacting with it in real-time. Our teams and agency leadership should carefully watch these metrics to find issues and identify which bug fixes and improvements should be prioritized. Along with monitoring tools, a feedback mechanism should be in place for people to report issues directly.</p>

<h3>Checklist</h3>

<ol>
<li>Monitor system-level resource utilization in real time</li>
<li>Monitor system performance in real-time (e.g. response time, latency, throughput, and error rates)</li>
<li>Ensure monitoring can measure median, 95th percentile, and 98th percentile performance</li>
<li>Create automated alerts based on this monitoring</li>
<li>Track concurrent users in real-time, and monitor user behaviors in the aggregate to determine how well the service meets user needs</li>
<li>Publish metrics internally</li>
<li>Publish metrics externally</li>
<li>Use an experimentation tool that supports multivariate testing in production</li>
</ol>


<h3>Key Questions</h3>

<ul>
<li>What are the key metrics for the service?</li>
<li>How have these metrics performed over the life of the service?</li>
<li>Which system monitoring tools are in place?</li>
<li>What is the targeted average response time for your service? What percent of requests take more than 1 second, 2 seconds, 4 seconds, and 8 seconds?</li>
<li>What is the average response time and percentile breakdown (percent of requests taking more than 1s, 2s, 4s, and 8s) for the top 10 transactions?</li>
<li>What is the volume of each of your service’s top 10 transactions? What is the percentage of transactions started vs. completed?</li>
<li>What is your service’s monthly uptime target?</li>
<li>What is your service’s monthly uptime percentage, including scheduled maintenance? Excluding scheduled maintenance?</li>
<li>How does your team receive automated alerts when incidents occur?</li>
<li>How does your team respond to incidents? What is your post-mortem process?</li>
<li>Which tools are in place to measure user behavior?</li>
<li>What tools or technologies are used for A/B testing?</li>
<li>How do you measure customer satisfaction?</li>
</ul>


</div>

<div class="inner_container">
  <h6>PLAY 13</h6>
  <h2 class="display">Default to open</h2>

  <p>When we collaborate in the open and publish our data publicly, we can improve Government together. By building services more openly and publishing open data, we simplify the public’s access to government services and information, allow the public to contribute easily, and enable reuse by entrepreneurs, nonprofits, other agencies, and the public.</p>

<h3>Checklist</h3>

<ol>
<li>Offer users a mechanism to report bugs and issues, and be responsive to these reports</li>
<li>Provide datasets to the public, in their entirety, through bulk downloads and APIs (application programming interfaces)</li>
<li>Ensure that data from the service is explicitly in the public domain, and that rights are waived globally via an international public domain dedication, such as the “Creative Commons Zero” waiver</li>
<li>Catalog data in the agency’s enterprise data inventory and add any public datasets to the agency’s public data listing</li>
<li>Ensure that we maintain the rights to all data developed by third parties in a manner that is releasable and reusable at no cost to the public</li>
<li>Ensure that we maintain contractual rights to all custom software developed by third parties in a manner that is publishable and reusable at no cost</li>
<li>When appropriate, create an API for third parties and internal users to interact with the service directly</li>
<li>When appropriate, publish source code of projects or components online</li>
<li>When appropriate, share your development process and progress publicly</li>
</ol>


<h3>Key Questions</h3>

<ul>
<li>How are you collecting user feedback for bugs and issues?</li>
<li>If there is an API, what capabilities does it provide? Who uses it? How is it documented?</li>
<li>If the codebase has not been released under an open source license, explain why.</li>
<li>What components are made available to the public as open source?</li>
<li>What datasets are made available to the public?</li>
</ul>


</div>

</div>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://playbook.cio.gov/">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>