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

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096
  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>Fantasies of the Future: Design in a World Being Eaten by Software (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://paulrobertlloyd.com/talks/2018/04/create_leicester">
  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. Fantasies of the Future: Design in a World Being Eaten by Software (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://paulrobertlloyd.com/talks/2018/04/create_leicester">Source originale du contenu</a></h3>
  445. <p>Drawing inspiration from architectural practice, its successes and failures, I question the role of design in a world being eaten by software. When the prevailing technocratic culture permits the creation of products that undermine and exploit users, who will protect citizens within the digital spaces they now inhabit?</p>
  446. <figure class="u-extend">
  447. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/1.png" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/1.png 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/1.png 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/1.png 640w" class="u-framed" alt=""/>
  448. <figcaption>
  449. <p>Imagine you were designing a city. Where would you start? Perhaps with its layout?</p>
  450. <p>What would this look like? Might it be based on a grid, like that of New York? Or avenues radiating from squares like Paris?</p>
  451. <p>How about one based around the shape of a bird?</p>
  452. <p>A city with such a layout exists. It is called Brasília, and it is the capital of Brazil.</p>
  453. </figcaption>
  454. </figure>
  455. <figure class="u-extend">
  456. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/2.jpg" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/2.jpg 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/2.jpg 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/2.jpg 640w" class="u-framed" alt=""/>
  457. <figcaption>
  458. <p>Until 1960, Brazil’s capital was Rio de Janeiro. A coastal city, it was seen as vulnerable to attack, with the country’s republican constitution of 1891 stating that the capital should move inland.</p>
  459. <p>It wasn’t until <a href="https://en.wikipedia.org/wiki/Juscelino_Kubitschek">Juscelino Kubitschek</a> became President in 1956, that its construction would be ordered. His election campaign had promised <q>fifty years of prosperity in five</q> and building a new capital was a key pledge. By this point, moving the capital for defensive reasons made little sense. No, this was more of a political gesture; a means of announcing Brazil to the world as an optimistic and forward-looking country, ready to move on from its colonial past.</p>
  460. </figcaption>
  461. </figure>
  462. <figure class="u-extend">
  463. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/3.jpg" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/3.jpg 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/3.jpg 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/3.jpg 640w" class="u-framed" alt=""/>
  464. <figcaption>
  465. <p>Kubitschek invited the architect <a href="https://en.wikipedia.org/wiki/Oscar_Niemeyer">Oscar Niemeyer</a> to design the capital’s landmark civic buildings, with <a href="https://en.wikipedia.org/wiki/Lucio_Costa">Lúcio Costa</a> winning the contest to arrange it’s urban plan.</p>
  466. <p>Niemeyer and Costa had worked together previously, and both admired the thinking of their contemporary, <a href="https://en.wikipedia.org/wiki/Le_Corbusier">Le Corbusier</a>.</p>
  467. <p>Le Corbusier – considered the pioneer of modern urbanism – believed that good architecture could produce good societies. He advocated ideas like organising cities around zones within which different activities would take place, and lifting residential areas off from the ground so that cars and other services could run underneath.</p>
  468. </figcaption>
  469. </figure>
  470. <figure class="u-extend">
  471. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/4.png" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/4.png 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/4.png 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/4.png 640w" class="u-framed" alt=""/>
  472. <figcaption>
  473. <p>Adopting these ideas as the basis for their project, and with Brazil’s vast and unpopulated central plateau as their canvas, Costa and Niemeyer got to work.</p>
  474. <p>Few people are given the opportunity to design a city, let alone a new capital, so you can imagine the effort, idealism – and no doubt ego – that went into this endeavour.</p>
  475. <p>Beyond acting as a symbol for a bold and modern country, they hoped their design could help transform Brazil’s heavily stratified society into a more egalitarian one. They imagined governors and ambassadors, living next to janitors and labourers, with everyone using the same entrances and sharing the same spaces.</p>
  476. </figcaption>
  477. </figure>
  478. <figure class="u-extend">
  479. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/5.jpg" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/5.jpg 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/5.jpg 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/5.jpg 640w" class="u-framed" alt=""/>
  480. <figcaption>
  481. <p>After just 41 months of construction, their new city was born.</p>
  482. <p>With Costa’s logical layout and Niemeyer’s distinctive buildings, Brasília is considered a definitive example of 20th-century modernist urban planning, and the city received UNESCO World Heritage status in 1987.</p>
  483. <p>Yet, while aesthetically pleasing, it fails as a place to live.</p>
  484. <p>Built around the car, distances between buildings are often too large and everything just feels disconnected. Its environment is somewhat stark and sterile – to the extent that many residents will head to the airport on a Friday evening to escape to the more vibrant cities of São Paulo and Rio.</p>
  485. </figcaption>
  486. </figure>
  487. <figure class="u-extend">
  488. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/6.jpg" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/6.jpg 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/6.jpg 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/6.jpg 640w" class="u-framed" alt=""/>
  489. <figcaption>
  490. <p>But the city has much bigger problems, and they stem from Costa’s distinctive bird-like layout that you saw earlier.</p>
  491. <p>This layout and its mono-functional zoning limited the amount of residential space available. As people moved to the city in search of work, and the population grew rapidly, so Brazil’s racial class structures began to reassert themselves. Soon into its construction, the workers helping to build the city were banished to distant satellite towns. Segregated from the middle-classes, they would spend their meagre salaries on commutes into and out of the city.</p>
  492. <p>My brother lives in Brazil. He told me that most citizens consider Brasília to be a city built for the rich, by the rich. Quite different from the egalitarian aspirations of its two architects.</p>
  493. </figcaption>
  494. </figure>
  495. <figure class="u-extend">
  496. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/7.jpg" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/7.jpg 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/7.jpg 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/7.jpg 640w" class="u-framed" alt=""/>
  497. <figcaption>
  498. <p>In 1980, <a href="https://www.youtube.com/video/C04JZsoqs1A">the art critic Robert Hughes said</a>…</p>
  499. <blockquote>
  500. <p>Nothing dates faster than people’s fantasies about the future. This is what you get when perfectly decent, intelligent and talented men start thinking in terms of space, rather than place, and about single rather than multiple meanings. It’s what you get when you design for political aspirations and not real human needs. You get miles of jerry-built platonic nowhere infested with Volkswagens. This, one may fervently hope, is the last experiment of its kind. The utopian buck, stops here.</p>
  501. </blockquote>
  502. <p>There’s a lot to unpack in Hughes critique, but whenever I hear it, I wonder if the same criticisms could be levelled at our own industry. We’ve certainly adopted the modernist aesthetic, with trends departing from the decorative and experimental, toward the minimalistic and apparently materially truthful.</p>
  503. <p>But what of the political aspirations that surround our work?</p>
  504. </figcaption>
  505. </figure>
  506. <figure class="u-extend">
  507. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/8.png" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/8.png 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/8.png 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/8.png 640w" class="u-framed" alt=""/>
  508. <figcaption>
  509. <p>In 2011, Marc Andreessen penned <a href="https://a16z.com/2016/08/20/why-software-is-eating-the-world/">an essay for the Wall Street Journal</a>, in which he suggested that every company needed to become a software company for it to remain relevant:</p>
  510. <blockquote>
  511. <p>Six decades into the computer revolution, four decades since the invention of the microprocessor, and two decades into the rise of the modern Internet, all of the technology required to transform industries through software finally works and can be widely delivered at global scale.</p>
  512. </blockquote>
  513. <p>He was right. We’re now in the midst of a cultural shift in which technology companies are dictating large parts of our economy. And they have largely benefited from two phenomena.</p>
  514. </figcaption>
  515. </figure>
  516. <figure class="u-extend">
  517. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/9.jpg" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/9.jpg 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/9.jpg 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/9.jpg 640w" class="u-framed" alt=""/>
  518. <figcaption>
  519. <p>The first is network effects.</p>
  520. <p><a href="https://en.wikipedia.org/wiki/Metcalfe%27s_law">Metcalfe’s Law</a> states that the value of a network is proportional to the square of the number of connected users. Simply put, a single phone on its own is useless, but connect it to a second, and you can make a connection. With five phones, you can make 10 separate connections, with 12 phones, 66 and so on.</p>
  521. <p>The Internet has clearly benefitted from this effect, and by extension so have the companies built upon it.</p>
  522. </figcaption>
  523. </figure>
  524. <figure class="u-extend">
  525. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/10.jpg" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/10.jpg 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/10.jpg 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/10.jpg 640w" class="u-framed" alt=""/>
  526. <figcaption>
  527. <p>The second phenomenon has been the decreasing cost of hardware. This has essentially been driven down to zero – even more so since companies like Amazon have commoditised the infrastructure required for data storage and delivery.</p>
  528. <p>So, with a low cost base, a potential audience of billions, and exponential growth an inherent trait of the platform, the Internet has become a haven for investors, with limitless venture capital made available to those who believe they can take advantage of these factors.</p>
  529. </figcaption>
  530. </figure>
  531. <figure class="u-extend">
  532. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/11.jpg" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/11.jpg 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/11.jpg 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/11.jpg 640w" class="u-framed" alt=""/>
  533. <figcaption>
  534. <p>Given this emphasis on technology, Silicon Valley has become the epicentre of our industry.</p>
  535. <p>Populated by white, middle-class (mostly male) college-graduates, here you’ll find a culture that stands at the altar of computation, where the only law that matters is that of Moore, and everything can be reduced to a series of ones and zeros.</p>
  536. <p>It’s a place where the only question that matters is can it be done, never should it be done.</p>
  537. </figcaption>
  538. </figure>
  539. <figure class="u-extend">
  540. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/12.png" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/12.png 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/12.png 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/12.png 640w" class="u-framed" alt=""/>
  541. <figcaption>
  542. <p>That many of these companies were founded by engineers, means they suffer from intensely technocratic cultures. Within it, design was regarded as little more than decoration; an activity you would tack on to the end of a product’s development, once the important work had been done.</p>
  543. <p>Famously, when Larry Page was asked what Google’s design aesthetic was he replied <q>Pine</q>, referring to an old command line program that was known primarily for its speed.</p>
  544. <p>At Yahoo, its former CEO Marissa Mayer, talked about how she and a small team of in-house designers <a href="https://marissamayr.tumblr.com/post/60336044815/geeking-out-on-the-logo">came up with the company’s new logo during a weekend</a> – and you could tell! I wonder if they tested 41 shades of purple, too?</p>
  545. </figcaption>
  546. </figure>
  547. <figure class="u-extend">
  548. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/13.jpg" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/13.jpg 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/13.jpg 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/13.jpg 640w" class="u-framed" alt=""/>
  549. <figcaption>
  550. <p>It wasn’t until Steve Jobs led Apple to become the largest publicly traded corporation in the world, that other technology companies started to take design seriously. His incessant focus on design was exemplified by the launch of the iPod and later the iPhone. Proof – if it were needed – that consumers valued good design.</p>
  551. <p>With their empathy for users, understanding of human behaviour and a research-driven process, designers were now well positioned to help companies meet and exceed their customers’ expectations. Before long, organisations like Samsung, IBM and Google started to spend millions of dollars building in-house design studios.</p>
  552. <p>Designers had finally found themselves a seat at the top table.</p>
  553. </figcaption>
  554. </figure>
  555. <figure class="u-extend">
  556. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/14.png" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/14.png 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/14.png 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/14.png 640w" class="u-framed" alt=""/>
  557. <figcaption>
  558. <p>But what of the companies in which that table sat?</p>
  559. <p>Now undoubtedly, this talk has been influenced by <a href="https://www.theguardian.com/news/series/cambridge-analytica-files">current events</a> – how could it not? However, I’ve been hating on Silicon Valley before it was cool. In part, this is due to having lived and worked there for two years just as it was rebuilding itself after the dot-com bubble. Been there, done that, got the branded hoodie.</p>
  560. <p>As I’ve watched these companies grow ever more dominant and successful, so I have seen the ideas they promote percolate through into the wider digital design and development communities. Look at these ideas in any detail, and you will see a number of priorities emerge. Once you notice them, like the dodgy kerning on Yahoo’s logo, they can’t be unseen.</p>
  561. </figcaption>
  562. </figure>
  563. <figure class="u-extend">
  564. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/15.png" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/15.png 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/15.png 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/15.png 640w" class="u-framed" alt=""/>
  565. <figcaption>
  566. <p>The first of these priorities is growth and the desire to build at scale.</p>
  567. <p>This is to be expected; companies gain investment on the basis that they can reach a large audience. And besides, growth for the sake of growth is capitalism’s resting state.</p>
  568. <p>Yet these monetary reasons have been obscured and reframed by the sort of idealism that often creeps into Silicon Valley’s groupthink, with its leaders seeing growth as a moral imperative.</p>
  569. </figcaption>
  570. </figure>
  571. <figure class="u-extend">
  572. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/16.png" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/16.png 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/16.png 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/16.png 640w" class="u-framed" alt=""/>
  573. <figcaption>
  574. <p>In <a href="https://www.buzzfeed.com/ryanmac/growth-at-any-cost-top-facebook-executive-defended-data">an internal memo</a> written in 2016, a senior executive at Facebook attempted to justify the company’s growth at all cost strategy:</p>
  575. <blockquote>
  576. <p>The ugly truth is that we believe in connecting people so deeply that anything that allows us to connect more people more often is de facto good.</p>
  577. </blockquote>
  578. <p>His memo goes on to use this as justification for questionable practices around contact importing, and the subtle language they use to ensure people remain searchable – although there were plenty of other examples he could have chosen.</p>
  579. <p>Over at Twitter, its a fundamental belief in free-speech – whatever that speech may contain – has been used as cover for its desire to grow, yet the result has been to create a network distinguished by its poisonous and unpleasant atmosphere.</p>
  580. </figcaption>
  581. </figure>
  582. <figure class="u-extend">
  583. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/17.png" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/17.png 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/17.png 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/17.png 640w" class="u-framed" alt=""/>
  584. <figcaption>
  585. <p>On a more practical level, designing at scale requires skill, patience and an acceptance that the more users means accounting for greater diversity.</p>
  586. <p>Systems administrators will talk about five nines; ensuring a service uptime of 99.999%. If you can achieve this, over the course of a year, your service will be down for just five minutes and 15 seconds, an acceptable level of failure.</p>
  587. <p>To approach design with the same mindset is problematic. A decision that may adversely affect 0.001% of users can be dismissed as an edge case, but if your product serves 2 billion users, that decision will still affect 2 million people. People are not edge cases.</p>
  588. </figcaption>
  589. </figure>
  590. <figure class="u-extend">
  591. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/18.png" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/18.png 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/18.png 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/18.png 640w" class="u-framed" alt=""/>
  592. <figcaption>
  593. <p>The second priority is speed, by which I mean the desire to ship new features quickly.</p>
  594. <p>As it becomes cheaper and easier to build products, and with incentives rewarding delivery, product managers will push to get something out the door and improve it later.</p>
  595. <p>We see start-ups built on the back of mantras such as <q>ask for forgiveness, not permission</q>, <q>always be hustling</q> and of course <q>move fast and break things</q>; a motto that long hinted that Facebook was more concerned with shipping features than taking responsibly for them once they had launched.</p>
  596. <p>This focus on speed has led to a variety of processes and workflows being adopted.</p>
  597. </figcaption>
  598. </figure>
  599. <figure class="u-extend">
  600. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/19.jpg" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/19.jpg 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/19.jpg 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/19.jpg 640w" class="u-framed" alt=""/>
  601. <figcaption>
  602. <p>Chief among these is Agile. A product of software delivery, it’s a process designers often need to slot into. They will talk about the difficulty of making long-term decisions or being able to look holistically at problems, when this process demands small pieces of separated work.</p>
  603. <p>In recent years, ideas like minimal viability, Lean UX and Design Sprints have gained favour. These processes tend to focus on minimising risk, failing fast and getting feedback from users at the earliest opportunity. This is all great and should be encouraged, but the overriding purpose of these ideas is speeding up delivery – I mean, the clue is in the title!</p>
  604. <p>If designing for an audience of billions encourages you to make generalisations, then operating at speed leaves you little time to consider the potential ramifications.</p>
  605. </figcaption>
  606. </figure>
  607. <figure class="u-extend">
  608. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/20.jpg" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/20.jpg 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/20.jpg 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/20.jpg 640w" class="u-framed" alt=""/>
  609. <figcaption>
  610. <p>This emphasis on speed has also dictated the shape of our tools.</p>
  611. <p>Abstraction and modularisation enable products to be built quicker. This has led to the development of component-oriented frameworks like Angular, React and Vue. At the same, designers are starting to adopt similar modular approaches. While this alignment is encouraging, I worry that design is increasingly becoming a servant to the needs of the engineer rather than those of the user; the question is always <q>should designers learn to code</q>, never the other way round.</p>
  612. <p>There is also a growing sense that these tools are being adopted primarily for the benefit of internal team dynamics – the rise of the term ‘developer experience’ being just one signifier.</p>
  613. </figcaption>
  614. </figure>
  615. <figure class="u-extend">
  616. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/21.png" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/21.png 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/21.png 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/21.png 640w" class="u-framed" alt=""/>
  617. <figcaption>
  618. <p>Finally, there’s this compulsive deference to data, and the idea that the more of it you can collate, the better informed you will be about your customers and how they use your product.</p>
  619. <p>By this point, data acquisition has become an addition. Companies collect and hoard data even if they don’t need it. Further still, they have been poor custodians. Last month it was a breach at Facebook. Before that it was Equifax, LinkedIn and Yahoo. If data is the new oil, then storing large amounts means building your company on top of a highly flammable material.</p>
  620. </figcaption>
  621. </figure>
  622. <figure class="u-extend">
  623. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/22.png" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/22.png 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/22.png 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/22.png 640w" class="u-framed" alt=""/>
  624. <figcaption>
  625. <p>At this year’s Webstock in New Zealand, Nat Dudley gave <a href="https://medium.com/@natdudley/d28324b7c348">a powerful talk about inclusive design</a>. She noted that storing data about people, especially those in minorities or in vulnerable situations, can put them at risk <del>should it</del> when it leaks.</p>
  626. <blockquote>
  627. <p>You cannot design an inclusive-first system if you’re not thinking about the threat models of your most vulnerable users.</p>
  628. </blockquote>
  629. </figcaption>
  630. </figure>
  631. <figure class="u-extend">
  632. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/23.jpg" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/23.jpg 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/23.jpg 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/23.jpg 640w" class="u-framed" alt=""/>
  633. <figcaption>
  634. <p>Besides, focus too hard on the numbers, and you end up making incremental changes and optimising within local maximums. Rather than seek out new approaches, ultimately this can result in a company becoming vulnerable to disruption from competitors who <em>have</em> chosen to experiment.</p>
  635. <p>And let’s not forget that data can very be easily manipulated. Depending on how you choose to query or present it, different stories can be told.</p>
  636. </figcaption>
  637. </figure>
  638. <figure class="u-extend">
  639. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/24.jpg" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/24.jpg 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/24.jpg 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/24.jpg 640w" class="u-framed" alt=""/>
  640. <figcaption>
  641. <p>You needn’t look far to find the effects these priorities can have on the design of digital products. Perhaps there’s no better example than that of Booking.com.</p>
  642. <p>I tend to avoid the site because it has always felt a bit sketchy, but last year I wanted to stay at a particular hotel, and it was only available on this site. Booking this hotel may be one of the worst online experiences I’ve encountered. Every page on the site felt like it was shouting at me, encouraging me to book; I could actually feel my heart race as I was pushed through the checkout flow. I felt agitated, angry, and exhausted.</p>
  643. <p>How on earth does a design team end up producing such a user-hostile product like this?</p>
  644. </figcaption>
  645. </figure>
  646. <figure class="u-extend">
  647. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/25.png" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/25.png 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/25.png 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/25.png 640w" class="u-framed" alt=""/>
  648. <figcaption>
  649. <p>Stuart Frisby, Booking.com’s Director of Design, <a href="https://vimeo.com/243670568">speaking at Leading Design conference last year</a>, talked about how he joined an engineering-led company heavily invested in A/B testing. Rather than question if this was the right approach, he saw this as a means of measuring the value his team could provide to the company.</p>
  650. <p>At <a href="https://www.youtube.com/watch?v=VQpQ0YHSfqM">an earlier talk he gave in 2015</a>, he talked about how and why booking.com uses A/B testing…</p>
  651. </figcaption>
  652. </figure>
  653. <figure class="u-extend">
  654. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/26.jpg" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/26.jpg 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/26.jpg 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/26.jpg 640w" class="u-framed" alt=""/>
  655. <figcaption>
  656. <blockquote>
  657. <p>One of the core principles and core cultures of our organisation is that we want to be very customer focused, and <strong>A/B testing is really a way for us to institutionalise that customer focus in a way that makes it very difficult for us to be anything else</strong>. All of the features that we deliver are designed, developed and tested in order to validate that they are already better than what we have for customers.</p>
  658. </blockquote>
  659. <p>Having a focus on the customer sounds great. Yet, here’s what Stuart said just a few moments later:</p>
  660. </figcaption>
  661. </figure>
  662. <figure class="u-extend">
  663. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/27.jpg" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/27.jpg 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/27.jpg 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/27.jpg 640w" class="u-framed" alt=""/>
  664. <figcaption>
  665. <blockquote>
  666. <p>So you have a hypothesis. The next step is to figure out how you prove if that hypothesis or true or not, so we go through a process of metric setting. For us as an e-commerce company, it’s pretty straight-forward: <strong>that key metric is always do we earn more money doing this or less</strong>.</p>
  667. </blockquote>
  668. <p>There’s a weird perverse cognitive dissonance at play here that is as fascinating as it is distressing.</p>
  669. <p>Making more money and treating customers with respect are not mutually exclusive; you need to find the sweet spot between making money and having happy customers. Booking.com have decided to focus exclusively on the former, <a href="https://thenextweb.com/contributors/2017/09/21/booking-com-uses-stress-rush-decisions/">with predictable results</a>.</p>
  670. </figcaption>
  671. </figure>
  672. <figure class="u-extend">
  673. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/28.png" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/28.png 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/28.png 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/28.png 640w" class="u-framed" alt=""/>
  674. <figcaption>
  675. <p><a href="https://darkpatterns.org">Dark patterns</a> are interfaces purposely designed to trick you into doing something you hadn’t intended. Unsurprisingly, Booking.com is drowning in them. They manipulate customers by:</p>
  676. <ul>
  677. <li>creating a false sense of scarcity by telling you how many rooms remain at a hotel you’re looking at</li>
  678. <li>manipulating ratings and only showing positive reviews, regardless of the overall impression previous guests may have provided in their feedback</li>
  679. <li>displaying prices in a way that make you believe you’re getting a better deal than you actually are</li>
  680. <li>providing a false sense of urgency, with countdowns during checkout</li>
  681. </ul>
  682. <p>The site is a visual cacophony of popups and banners, notifications and suggestive microcopy. It’s a disgrace.</p>
  683. </figcaption>
  684. </figure>
  685. <figure class="u-extend">
  686. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/29.png" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/29.png 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/29.png 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/29.png 640w" class="u-framed" alt=""/>
  687. <figcaption>
  688. <p><em>This</em> is what you get when you design for political aspirations and not real human needs. You get endlessly click-tracked pages infested with Dark Patterns.</p>
  689. <p>However much a company says it values customers – and most companies say they do – what matters is what’s being measured. If a culture priorities speed, cost and engagement, over quality, value and suitability, then we need to be mindful of the middle-to-long term effects the resulting decisions may have.</p>
  690. </figcaption>
  691. </figure>
  692. <figure class="u-extend">
  693. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/30.png" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/30.png 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/30.png 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/30.png 640w" class="u-framed" alt=""/>
  694. <figcaption>
  695. <p>If <q>culture eats strategy for breakfast</q>,</p>
  696. </figcaption>
  697. </figure>
  698. <figure class="u-extend">
  699. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/31.png" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/31.png 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/31.png 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/31.png 640w" class="u-framed" alt=""/>
  700. <figcaption>
  701. <p>Earlier this year, Joel Califa, a designer at GitHub, described <a href="http://joelcalifa.com/blog/subverted-design/">how internal cultures can subvert designers</a> such that they end up working in service of business goals at the expense of user needs.</p>
  702. <p>He noticed that designers who would advocate from the perspective of the user were perceived as naive, and junior. Those that were seen as more pragmatic and business-minded, were rewarded with seniority and garnered more respect from managers and leaders.</p>
  703. <p>Slowly, he noticed his language changing too, replacing words like <em>polish</em> and <em>value</em> with ones such as <em>adoption</em> or <em>engagement</em>.</p>
  704. <p>Joel concluded his piece by arguing that designers could repent before pledging allegiance to users once again. But if we’ve been subverted once, what’s to say we won’t be again?</p>
  705. </figcaption>
  706. </figure>
  707. <figure class="u-extend">
  708. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/32.jpg" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/32.jpg 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/32.jpg 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/32.jpg 640w" class="u-framed" alt=""/>
  709. <figcaption>
  710. <p>It seems as if designers have been tricked into thinking we have a seat at table, when in fact we’ve been taken hostage, only to develop Stockholm syndrome. Eager to demonstrate that we can do more than make things pretty, we brought our cognitive insights to the table and began talking about persuasive design the design of casinos in order to bolster our credibility. In doing so, we have become accomplishes in exploiting users.</p>
  711. <p>How on earth can we rectify this situation? Can designers be relied on to save themselves from themselves?</p>
  712. <p>Fortunately, a conversation is emerging around possible solutions.</p>
  713. </figcaption>
  714. </figure>
  715. <figure class="u-extend">
  716. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/33.png" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/33.png 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/33.png 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/33.png 640w" class="u-framed" alt=""/>
  717. <figcaption>
  718. <p>Some are <a href="http://medium.com/@monteiro/ac7289549017">making the case for a code of ethics</a>, perhaps some a kind of Hippocratic Oath for designers.</p>
  719. <p>If we can wield so much power, surely we should require a license to practice before we’re allowed near a Sketch file. Perhaps we need an accreditation scheme or a professional body that can kick designers out should they have done wrong.</p>
  720. <p>Others argue that design is already a fairly exclusive cabal, and such a scheme would only serve to make design less accessible and exaggerate its elitist tendancies. Surely, far better to educate people about what design is and how it can be used to achieve both good and bad outcomes?</p>
  721. </figcaption>
  722. </figure>
  723. <figure class="u-extend">
  724. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/34.png" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/34.png 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/34.png 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/34.png 640w" class="u-framed" alt=""/>
  725. <figcaption>
  726. <p>This is an approach people like Khoi Vinh are advocating. Rather than seeking accreditation, he’s been <a href="https://www.fastcodesign.com/90155005">advocating for digital design to become subject to thoughtful, critical journalism</a>.</p>
  727. <p>This is especially true since the discourse among designers can tend toward the shallow and superficial, and can be influenced by having an eye on furthering one’s own career.</p>
  728. <p>Therefore, such journalism would require writers that are independent of the industry. Only that way can their words carry any credibility.</p>
  729. </figcaption>
  730. </figure>
  731. <figure class="u-extend">
  732. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/35.png" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/35.png 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/35.png 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/35.png 640w" class="u-framed" alt=""/>
  733. <figcaption>
  734. <p>Almost every other creative and commercial endeavour tends to be supported by a critical body of review and critique. Most of us will be familiar with film reviews – <a href="http://witterpedia.net/w/index.php/Jason_Isaacs">hello to Jason Isaacs</a> – but there are examples closer to home too.</p>
  735. <p>The architectural profession is supported by professional critics who question and examine the context surrounding a particular work, and whether the resulting building meets the needs of both the client and those that will inhabit the space – Robert Hughes being just one example.</p>
  736. <p>Wanting independent critical journalism about web design may seem high-minded, and without the will and the funding, impossible to achieve. Still, it’s one of the few ideas I’ve seen that could free designers from the situation they’ve found themselves.</p>
  737. <p>Like the companies they work for, corporate designers need some form of oversight too.</p>
  738. </figcaption>
  739. </figure>
  740. <figure class="u-extend">
  741. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/36.jpg" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/36.jpg 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/36.jpg 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/36.jpg 640w" class="u-framed" alt=""/>
  742. <figcaption>
  743. <p>Until such independent appraisal exists, we need to take it upon ourselves to be more critical and introspective. This shouldn’t be too hard. After all, design is all about questioning what already exists and asking how it could be improved for the better.</p>
  744. <p>What processes can we develop to give us time to properly judge a feature; to consider who it is serving, and if it can be misused? To question those default settings?</p>
  745. <p>Perhaps we need a new set of motivational posters. Rather than <q>move fast and break things</q>, perhaps <q>slow down and ask more questions</q>.</p>
  746. </figcaption>
  747. </figure>
  748. <figure class="u-extend">
  749. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/37.jpg" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/37.jpg 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/37.jpg 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/37.jpg 640w" class="u-framed" alt=""/>
  750. <figcaption>
  751. <p>As digital designers, we tend to suffer from the firewall that exists between us the people who experience our work. Regardless of how much user testing and research we undertake, we rarely get to experience first hand what customers’ day-to-day experience is really like.</p>
  752. <p>One way we can counter this is by building more diverse teams, to bring a greater diversity of experiences, insights and ideas to our products.</p>
  753. <p>Of course, that’s easy to say, but I stand here tonight, in a line-up featuring two white men called Paul! I knew ahead of tonight that this would be the case, but I didn’t ask to speak on another night to allow the line up to be more diverse. Most of the references in this talk have featured men.</p>
  754. <p>The first step is awareness. But to change our culture for the better, we need to take action. Each of us has work to do.</p>
  755. </figcaption>
  756. </figure>
  757. <figure class="u-extend">
  758. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/38.png" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/38.png 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/38.png 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/38.png 640w" class="u-framed" alt=""/>
  759. <figcaption>
  760. <p>I want to finish tonight with <a href="http://facebook.com/notes/mark-zuckerberg/10155448869996634">this thought from Mark Zuckerberg</a>:</p>
  761. <blockquote>
  762. <p>One of my favorite sayings is that there are two kinds of people: optimists and pessimists. And the saying goes: optimists tend to be successful, and pessimists tend to be right.
  763. The idea is that if you think something’s going to be terrible, then you’re going to look for data points that prove you right. And you’re going to find them! That’s what pessimists do.
  764. But if you believe something is possible, then you’re going to look for a way to make it work, and even when you make mistakes, even when people doubt you, you’re just going to keep pushing forward until you find a way to make it happen.</p>
  765. </blockquote>
  766. <p>We have every reason to be optimistic, but at what point does this optimism become blind? The open and democratic futures we imagined the Internet enabling seem quite distant now. Fantasies of a world that would accept the sort of radical transparency Zuckerberg wished for haven’t exactly met with reality.</p>
  767. </figcaption>
  768. </figure>
  769. <figure class="u-extend">
  770. <img src="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/39.jpg" srcset="https://paulrobertlloyd.com/image/1280x/90q/talks/2018-04-05-create_leicester/39.jpg 1280w, https://paulrobertlloyd.com/image/800x/85q/talks/2018-04-05-create_leicester/39.jpg 800w, https://paulrobertlloyd.com/image/640x/80q/talks/2018-04-05-create_leicester/39.jpg 640w" class="u-framed" alt=""/>
  771. <figcaption>
  772. <p>As my friend <a href="https://twitter.com/Cennydd/status/227862829343059969">Cennydd likes to says</a>:</p>
  773. <blockquote>
  774. <p>Cynicism is like vinegar. A splash helps the taste. But add too much and the sourness overwhelms everything.</p>
  775. </blockquote>
  776. <p>We are fortunate that our industry has matured to the point that our clients and employers are large organisations with thousands, if not millions of customers. Focusing on growth, trying to deliver things faster, seeking more data; these priorities are not new. It’s just that the web enables us to achieve them on a larger scale, and so their impact is far greater. This can’t be an excuse for us not to question our role and consider how we protect ourselves from ourselves.</p>
  777. <p>If software is eating the world, then perhaps we should reach for the bottle of vinegar, and add a splash of cynicism. That way, we can all enjoy the resulting meal.</p>
  778. </figcaption>
  779. </figure>
  780. </article>
  781. </section>
  782. <nav id="jumpto">
  783. <p>
  784. <a href="/david/blog/">Accueil du blog</a> |
  785. <a href="https://paulrobertlloyd.com/talks/2018/04/create_leicester">Source originale</a> |
  786. <a href="/david/stream/2019/">Accueil du flux</a>
  787. </p>
  788. </nav>
  789. <footer>
  790. <div>
  791. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  792. <p>
  793. Bonjour/Hi!
  794. 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>
  795. 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>).
  796. </p>
  797. <p>
  798. 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>.
  799. </p>
  800. <p>
  801. Voici quelques articles choisis :
  802. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  803. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  804. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  805. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  806. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  807. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  808. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  809. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  810. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  811. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  812. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  813. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  814. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  815. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  816. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  817. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  818. </p>
  819. <p>
  820. 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>.
  821. </p>
  822. <p>
  823. Je ne traque pas ta navigation mais mon
  824. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  825. conserve des logs d’accès.
  826. </p>
  827. </div>
  828. </footer>
  829. <script type="text/javascript">
  830. ;(_ => {
  831. const jumper = document.getElementById('jumper')
  832. jumper.addEventListener('click', e => {
  833. e.preventDefault()
  834. const anchor = e.target.getAttribute('href')
  835. const targetEl = document.getElementById(anchor.substring(1))
  836. targetEl.scrollIntoView({behavior: 'smooth'})
  837. })
  838. })()
  839. </script>