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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772
  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>De dev à UX designer : reconversion d’une convertie (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://uxways.wordpress.com/2018/10/29/de-dev-a-ux-designer-reconversion-dune-convertie/">
  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. De dev à UX designer : reconversion d’une convertie (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://uxways.wordpress.com/2018/10/29/de-dev-a-ux-designer-reconversion-dune-convertie/">Source originale du contenu</a></h3>
  445. <p>Cet article (qui prévoit d’être long) est un transcript de la conférence que j’ai donné à <a href="https://www.blendwebmix.com/programme/conferences/de-dev-a-lux-reconversion-dune-convertie/">BlendWebMix</a> à Lyon, le 25 octobre 2018.</p>
  446. <p><img data-attachment-id="171" data-permalink="https://uxways.wordpress.com/2018/10/29/de-dev-a-ux-designer-reconversion-dune-convertie/de-dev-a-lux-_-reconversion-dune-convertie/" data-orig-file="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie.png?w=660" data-orig-size="960,540" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="De dev à l&amp;rsquo;UX _ reconversion d&amp;rsquo;une convertie" data-image-description="&lt;p&gt;De dev à l&amp;rsquo;UX : reconversion d&amp;rsquo;une convertie&lt;/p&gt;&#10;" data-medium-file="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie.png?w=660?w=300" data-large-file="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie.png?w=660?w=660" class="alignnone size-full wp-image-171" src="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie.png?w=660" alt="De dev à l'UX _ reconversion d'une convertie" srcset="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie.png?w=660 660w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie.png?w=150 150w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie.png?w=300 300w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie.png?w=768 768w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie.png 960w" sizes="(max-width: 660px) 100vw, 660px"/></p>
  447. <p>Dans ce talk, <strong>De dev à l’UX : reconversion d’une convertie</strong>, je parle un petit peu de moi-ma vie-mon oeuvre (pardon d’avance donc), puis de ce que j’ai mis en place dans mon entreprise pour initier une démarche un peu plus user centrée. Vous pouvez <a title="De dev à l'UX _ reconversion d'une convertie" href="https://www.slideshare.net/annso54/de-dev-a-lux-reconversion-dune-convertie">visionner les slides ici</a>, regarder la vidéo, ou bien lire la suite de cet article.</p>
  448. <p class="jetpack-video-wrapper"><span class="embed-youtube"><iframe class="youtube-player" type="text/html" src="https://www.youtube.com/embed/videoseries?list=PLXOSxCLWFrNGqSFjpTjlTDW16YMGclTUX&amp;hl=en_US" allowfullscreen="true">VIDEO</iframe></span></p>
  449. <h3>Où je parle déjà de moi</h3>
  450. <p>Déjà, je vais me présenter un petit peu :</p>
  451. <p><img data-attachment-id="179" data-permalink="https://uxways.wordpress.com/2018/10/29/de-dev-a-ux-designer-reconversion-dune-convertie/de-dev-a-lux-_-reconversion-dune-convertie-1-2/" data-orig-file="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-11.png?w=660" data-orig-size="960,540" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="De dev à l&amp;rsquo;UX _ reconversion d&amp;rsquo;une convertie (1)" data-image-description="&lt;p&gt;Photo en noir et blanc de moi en 2008. J&amp;rsquo;ai l&amp;rsquo;air jeune.&lt;/p&gt;&#10;" data-medium-file="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-11.png?w=660?w=300" data-large-file="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-11.png?w=660?w=660" class="alignnone size-full wp-image-179" src="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-11.png?w=660" alt="De dev à l'UX _ reconversion d'une convertie (1)" srcset="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-11.png?w=660 660w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-11.png?w=150 150w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-11.png?w=300 300w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-11.png?w=768 768w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-11.png 960w" sizes="(max-width: 660px) 100vw, 660px"/></p>
  452. <p>Commençons par vous décrire un peu qui j’étais il y a 10 ans (à part plus jeune). En 2008, j’étais plutôt comme ça :</p>
  453. <ul>
  454. <li>Je travaillais sur Linux ; et faisais longuement la morale à tous mes proches osant utiliser Windows, ou, <strong>pire</strong>, Mac (heureusement, comme j’étais étudiante à l’époque, tous mes amis étaient pauvre, et très peu étaient sur Mac).</li>
  455. <li>J’utilisais exclusivement des logiciels libres et open-source : si je ne trouvais pas un outil open-source me permettant de faire ce que je voulais, je ne le faisais pas.</li>
  456. <li>Je suivais 40 heures de cours d’informatique par semaine (<em>« Tu verras le rythme de la fac, c’est tranquille… ! »</em> Tu parles !) et puis sur mon temps libre (le matin, le midi, le soir ou la nuit) une vingtaine d’heures par semaine sur un projet open-source (coucou <a href="https://fr.dotclear.org/">Dotclear</a> ♥).</li>
  457. <li>Je préférais la ligne de commande aux interfaces graphiques : c’est plus rapide, automatisable, cronable !</li>
  458. </ul>
  459. <p>Bref, vous pouvez le dire, j’étais ce qu’on appelle communément une <strong>NERD </strong>(et très fière de l’être).</p>
  460. <p>Aujourd’hui, je suis plutôt comme ça :</p>
  461. <p><img data-attachment-id="181" data-permalink="https://uxways.wordpress.com/2018/10/29/de-dev-a-ux-designer-reconversion-dune-convertie/de-dev-a-lux-_-reconversion-dune-convertie-2-3/" data-orig-file="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-21.png?w=660" data-orig-size="960,540" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="De dev à l&amp;rsquo;UX _ reconversion d&amp;rsquo;une convertie (2)" data-image-description="&lt;p&gt;Photo de moi en 2018. J&amp;rsquo;ai un peu vieilli.&lt;/p&gt;&#10;" data-medium-file="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-21.png?w=660?w=300" data-large-file="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-21.png?w=660?w=660" class="alignnone size-full wp-image-181" src="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-21.png?w=660" alt="De dev à l'UX _ reconversion d'une convertie (2)" srcset="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-21.png?w=660 660w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-21.png?w=150 150w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-21.png?w=300 300w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-21.png?w=768 768w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-21.png 960w" sizes="(max-width: 660px) 100vw, 660px"/></p>
  462. <ul>
  463. <li>Je travaille sur Mac.</li>
  464. <li>J’utilise 23 outils SAAS différents <em>(dont <strong>zéro</strong> logiciels libres)</em>.</li>
  465. <li>Je ne code plus (<em>principalement car je n’arrive pas à retenir le raccourci clavier pour faire un [ ou une { sur Mac</em>).</li>
  466. <li>Je passe mes journées à faire des slides ou des réunions.</li>
  467. </ul>
  468. <p>Naturellement, j’imagine que des questions vous brûlent les lèvres : <em>Que s’est-il passé ? Comment en suis-je arrivée là ? Ai-je aussi renié mes parents et ma patrie ?</em></p>
  469. <p>Pour répondre à ces questions tout à fait légitimes, je vais tenter de remonter dans le temps.</p>
  470. <h3>Où l’on essaye de retrouver quand tout à basculé</h3>
  471. <p><strong>En 2008</strong>, il y a 10 ans donc, j’étais étudiante : j’avais du temps et l’envie de tout découvrir. Le combo parfait pour participer activement à un projet open-source : <a href="https://fr.dotclear.org/">Dotclear</a>. Je touchais un peu à tout : code, documentation, forum d’entraide, web design, etc Et ce fut aussi et surtout l’occasion de rencontrer et travailler avec plein de gens hyper chouette, dont la fabuleuse <a href="https://www.redisdead.net/">Laurence Vagner</a> 🦄 (alias <a href="http://twitter.com/hellgy">@hellgy</a>).</p>
  472. <p><strong>En 2010</strong>, Laurence m’a envoyé un email qui a changé ma vie :</p>
  473. <p><img data-attachment-id="175" data-permalink="https://uxways.wordpress.com/2018/10/29/de-dev-a-ux-designer-reconversion-dune-convertie/mail-pw-hellgy/" data-orig-file="https://uxways.files.wordpress.com/2018/09/mail-pw-hellgy.png?w=660" data-orig-size="923,242" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="mail-pw-hellgy" data-image-description="&lt;p&gt;Capture d&amp;rsquo;écran de l&amp;rsquo;interface Gmail montrant un email de Laurence, reçu en 2010.&lt;/p&gt;&#10;" data-medium-file="https://uxways.files.wordpress.com/2018/09/mail-pw-hellgy.png?w=660?w=300" data-large-file="https://uxways.files.wordpress.com/2018/09/mail-pw-hellgy.png?w=660?w=660" class="alignnone size-full wp-image-175" src="https://uxways.files.wordpress.com/2018/09/mail-pw-hellgy.png?w=660" alt="mail-pw-hellgy" srcset="https://uxways.files.wordpress.com/2018/09/mail-pw-hellgy.png?w=660 660w, https://uxways.files.wordpress.com/2018/09/mail-pw-hellgy.png?w=150 150w, https://uxways.files.wordpress.com/2018/09/mail-pw-hellgy.png?w=300 300w, https://uxways.files.wordpress.com/2018/09/mail-pw-hellgy.png?w=768 768w, https://uxways.files.wordpress.com/2018/09/mail-pw-hellgy.png 923w" sizes="(max-width: 660px) 100vw, 660px"/></p>
  474. <p>Elle proposait de m’inviter à <a href="https://www.paris-web.fr/2010/">Paris Web</a>, une conférence qui me faisait vraiment de l’oeil, mais dont l’entrée coûtait l’équivalent de 5 mois de repas au RU (le repas au resto universitaire était mon unité de mesure de base à cette époque). Autrement dit, cette invitation était vraiment une opportunité fabuleuse et unique pour moi !</p>
  475. <p>Ni une ni deux, j’ai accepté en sautant de joie, et quelques mois plus tard, j’ai séché deux jours de cours pour débarquer, jeune, fraîche et pimpante, à Paris Web. Et ce fut une révélation !</p>
  476. <p>Déjà, je suis tombée en amour pour <a href="https://twitter.com/amelieboucher">Amélie Boucher</a>. Cette année là, elle proposait une conférence qui s’intitulait sobrement <a href="https://www.paris-web.fr/2010/conferences/internautes-sous-surveillance-retours-de-la-realite-pour-un-web-meilleur.php"><strong>Internautes sous surveillance : retours de la réalité pour un monde meilleur</strong></a>. C’est une révolution pour moi : elle explique qu’on peut observer et interroger des utilisateurs ! Pour améliorer ses produits ! C’est passionnant !! C’est un nouveau monde qui s’ouvre à moi !!!</p>
  477. <p>Ainsi, au fil des conférences, je découvre les termes <strong>design</strong>, <strong>ux</strong> et <strong>ergonomie</strong>. Des aspects totalement absent de ma formation très technique, mais qui me parlent vraiment.</p>
  478. <p>Et puis j’entends aussi des mots comme <strong>accessibilité</strong>, <strong>bonnes pratiques</strong> ou <strong>standards</strong>. Là encore, c’est une manière d’aborder les choses qu’on ne m’a pas du tout appris pendant mes études (Faire les choses bien, mais pourquoi faire ?). Cela me donne de perspectives inédites pour ma vie professionnelle à venir.</p>
  479. <h3>Où les années passent…</h3>
  480. <p><strong>En 2011</strong>, je finis mes études et je continue mon chemin de développeuse en m’orientant vers le web. Coïncidence (ou magie du <em>networking</em>), c’est un cofondateur de Paris-Web, Éric Daspet, qui m’embauche chez <a href="https://www.tea-ebook.com/">TEA</a>.</p>
  481. <p><strong>En 2013</strong>, (et les années qui suivent), je continue d’assister (et même de donner) des conférences, en prenant soin de choisir des conférences mixtes : j’évite les événements purement technique comme le PHP Tour pour me focaliser sur des événements mixtes : <a href="https://www.paris-web.fr/">Paris Web</a>, <a href="https://mixitconf.org/">MiXiT</a>, <a href="https://sudweb.fr/2018/">Sud Web</a>… Ces conférences sont toujours pour moi une bouffée d’air frais : j’évite soigneusement les talks techniques pour plutôt aller voir ce qui se passe du côté du design et de l’UX, et chaque fois, je suis passionnée.</p>
  482. <p><strong>En 2014</strong>, lors d’un entretien annuel, à la question <em>« Où tu te vois dans 5 à 10 ans ? »</em>, je verbalise pour la première fois mon envie de (un jour, éventuellement, peut être) quitter le développement pour me diriger vers de l’UX.</p>
  483. <p><strong><img data-attachment-id="183" data-permalink="https://uxways.wordpress.com/2018/10/29/de-dev-a-ux-designer-reconversion-dune-convertie/undercoverux/" data-orig-file="https://uxways.files.wordpress.com/2018/09/undercoverux.jpg" data-orig-size="333,499" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="undercoverUX" data-image-description="" data-medium-file="https://uxways.files.wordpress.com/2018/09/undercoverux.jpg?w=200" data-large-file="https://uxways.files.wordpress.com/2018/09/undercoverux.jpg?w=333" class="alignright size-thumbnail wp-image-183" src="https://uxways.files.wordpress.com/2018/09/undercoverux.jpg?w=100&amp;h=150" alt="Couverture du livre Undercover User Experience Design" srcset="https://uxways.files.wordpress.com/2018/09/undercoverux.jpg?w=100&amp;h=150 100w, https://uxways.files.wordpress.com/2018/09/undercoverux.jpg?w=200&amp;h=300 200w" sizes="(max-width: 100px) 100vw, 100px"/>En 2015</strong>, je (re)lis <strong><a href="https://www.decitre.fr/livres/undercover-user-experience-design-9780321719904.html">Undercover User Experience Design : Learn how to do great UX work with tiny budgets, no time and limited support </a></strong>(salut le titre le plus long mais le plus parlant du monde). Ça me motive à essayer de mettre des choses en place, avec les moyens du bord (des tests utilisateurs par exemple). Ce sont des petites actions mais toujours immensément gratifiantes pour moi.</p>
  484. <p><strong>En 2016</strong>, je commence à me renseigner sur les formations pour devenir UX designer. Je mets de côté les cursus basés sur les sciences humaines (sociologie ou psychologie) : c’est un domaine où j’ai tout à apprendre mais je n’ai pas l’énergie de reprendre 3 à 5 ans d’études. Je trouve d’autres formations plutôt orientées web mais elles ne me conviennent pas non plus : cela fait 5 ans que je travaille dans le monde du web, je n’ai pas besoin de tout apprendre depuis les bases. Et puis, surtout, je suis bloquée par la peur : peur de quitter un CDI confortable (développeuse, c’est la belle vie quand même niveau marché du travail !), peur d’investir du temps et de l’argent dans une formation mais de ne pas trouver de travail ensuite… Bref, je laisse le temps passer.</p>
  485. <p><strong>En 2017</strong>, c’est finalement mon entreprise, TEA, qui m’apporte la réponse : ma hiérarchie réalise que nous avons (grandement) besoin de nous améliorer sur les questions d’expérience utilisateur. Comme ça fait quelques mois/années que je <del>saoule toute la boîte avec ça</del> manifeste un interêt pour la chose, mes chefs me demandent : <em>« Est-ce ce que ça t’intéresse de t’en occuper à temps plein ? »</em></p>
  486. <figure data-shortcode="caption" id="attachment_198" class="wp-caption aligncenter"><img data-attachment-id="198" data-permalink="https://uxways.wordpress.com/2018/10/29/de-dev-a-ux-designer-reconversion-dune-convertie/de-dev-a-lux-_-reconversion-dune-convertie-13/" data-orig-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie1-e1540217016205.png?w=660" data-orig-size="960,206" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="De dev à l&amp;rsquo;UX _ reconversion d&amp;rsquo;une convertie" data-image-description="&lt;p&gt;Séquence de 5 émojis, passant du facepalm, la peur puis la joie et la danse.&lt;/p&gt;&#10;" data-medium-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie1-e1540217016205.png?w=660?w=300" data-large-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie1-e1540217016205.png?w=660?w=660" class="alignnone size-full wp-image-198" src="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie1-e1540217016205.png?w=660" alt="De dev à l'UX _ reconversion d'une convertie" srcset="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie1-e1540217016205.png?w=660 660w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie1-e1540217016205.png?w=150 150w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie1-e1540217016205.png?w=300 300w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie1-e1540217016205.png?w=768 768w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie1-e1540217016205.png 960w" sizes="(max-width: 660px) 100vw, 660px"/><figcaption class="wp-caption-text">Petit résumé de ce qui se passe dans ma tête</figcaption></figure>
  487. <ul>
  488. <li>D’abord, je m’auto-dépite : <em>« Se reconvertir au sein même de mon entreprise ? C’est du génie ! Mais pourquoi n’y ai-je pas pensé moi même ??!! »</em></li>
  489. <li>Ensuite, je réfléchis un peu à la question et j’ai peur : <em>« Mais ils sont fous ! J’y connais rien en UX moi, j’ai juste lu 2-3 trucs par ci par là… »</em></li>
  490. <li>Et puis, majoritairement, je saute et je danse de joie : <em>« Olala mais c’est le job de mes rêves, ça va être trop bien, c’est une évidence ! »</em></li>
  491. </ul>
  492. <h3>Où je deviens UX designer</h3>
  493. <p>Évidemment, je dis oui. Alors, tout va très vite : on annonce la nouvelle à l’équipe (tout le monde est plutôt content car c’est vraiment un poste qui manquait) et la semaine d’après, je commence ma nouvelle mission. Je suis UX Designer !</p>
  494. <p>Yay ! Super ! Bon, mais…. je fais quoi concrètement ?</p>
  495. <h3><img data-attachment-id="185" data-permalink="https://uxways.wordpress.com/2018/10/29/de-dev-a-ux-designer-reconversion-dune-convertie/de-dev-a-lux-_-reconversion-dune-convertie-4/" data-orig-file="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-4.png?w=660" data-orig-size="960,540" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="De dev à l&amp;rsquo;UX _ reconversion d&amp;rsquo;une convertie (4)" data-image-description="&lt;p&gt;Fake it until you make it&lt;/p&gt;&#10;" data-medium-file="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-4.png?w=660?w=300" data-large-file="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-4.png?w=660?w=660" class="alignnone size-full wp-image-185" src="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-4.png?w=660" alt="De dev à l'UX _ reconversion d'une convertie (4)" srcset="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-4.png?w=660 660w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-4.png?w=150 150w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-4.png?w=300 300w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-4.png?w=768 768w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-4.png 960w" sizes="(max-width: 660px) 100vw, 660px"/></h3>
  496. <p>Autant être honnête, les premières semaines ont été… particulières ! Je me suis laissée portée : dès le départ, mes collègues (à tous les niveaux, qu’ils soient des équipes marketing ou dev) m’ont impliquée dans de nombreuses discussions (je vous l’ai dit : nous avions vraiment un manque à ce niveau). Comme ils avaient l’air de penser que je pouvais apporter des solutions à leurs questions, j’ai fait comme si je savais comment leur apporter une réponse. J’ai bricolé des trucs ; et puis, personne ne se plaignant de mon travail, j’ai commencé à prendre confiance en moi, à y voir plus clair.</p>
  497. <p>Mais très vite, la nécessité de structurer tout ça est apparue.</p>
  498. <h3>Où je me construit une base de référence</h3>
  499. <p><img data-attachment-id="202" data-permalink="https://uxways.wordpress.com/2018/10/29/de-dev-a-ux-designer-reconversion-dune-convertie/de-dev-a-lux-_-reconversion-dune-convertie-14/" data-orig-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie2.png?w=660" data-orig-size="960,540" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="De dev à l&amp;rsquo;UX _ reconversion d&amp;rsquo;une convertie" data-image-description="" data-medium-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie2.png?w=660?w=300" data-large-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie2.png?w=660?w=660" class="alignnone size-full wp-image-202" src="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie2.png?w=660" alt="De dev à l'UX _ reconversion d'une convertie.png" srcset="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie2.png?w=660 660w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie2.png?w=150 150w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie2.png?w=300 300w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie2.png?w=768 768w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie2.png 960w" sizes="(max-width: 660px) 100vw, 660px"/></p>
  500. <p>J’ai d’abord eu besoin de faire un état des lieux de ce que je savais. Après 10 ans de veille légère, j’ai repris toutes les conférences que j’avais vu et les livres que j’avais lu pour faire un état des lieux. J’ai commencé à rencontrer des membres de ma nouvelle communauté et j’ai entreprit une veille plus active grâce notamment à des newsletters et à Twitter.</p>
  501. <p>Tout cela m’a permis de me constituer une <strong>base de référence</strong> de méthodes à réutiliser. Ainsi, quand on me présente un problème, je peux très vite trouver les ressources me permettant de le résoudre, même si je n’ai jamais utilisé cette méthode avant. J’avais listé les outils qui m’ont été très utiles au début dans cet article : <a href="https://uxways.wordpress.com/ressources-pour-debuter-en-ux-design/">Ressources pour débuter en UX design</a>.</p>
  502. <h3>Où je me rends compte de la diversité des concepts engagés</h3>
  503. <p>Que ce soit en interne, ou en parlant à mes amis ou à mes proches, souvent, j’ai dû répondre à la question suivante : <em>« Mais au fait, c’est quoi ton nouveau métier ? ». </em>Telle une bonne élève, j’ai appris à réciter une définition toute faite : <em>« Je travaille à penser et concevoir des services et produits proposant la meilleure expérience utilisateur possible. » </em>Mais je dois l’admettre, ça reste fort peu compréhensible pour le commun des mortels. Ceux et celles n’étant pas dans le web bloquent aux termes « service » et « produit ». Les autres s’arrêtent à l’expression « expérience utilisateur ». Qu’est-ce que ça désigne au juste ?</p>
  504. <p>Et bien, il faut admettre que ça n’est pas si simple car derrière l’expérience utilisateur se cache effectivement BEAUCOUP de concepts différents.</p>
  505. <p><img data-attachment-id="194" data-permalink="https://uxways.wordpress.com/2018/10/29/de-dev-a-ux-designer-reconversion-dune-convertie/de-dev-a-lux-_-reconversion-dune-convertie-1-3/" data-orig-file="https://uxways.files.wordpress.com/2018/09/de-dev-c3a0-lux-_-reconversion-dune-convertie-1.png?w=660" data-orig-size="960,540" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="De dev à l&amp;rsquo;UX _ reconversion d&amp;rsquo;une convertie (1)" data-image-description="&lt;p&gt;Infographie décrivant les concepts derrière l&amp;rsquo;expérience utilisateur, sous forme d&amp;rsquo;un diagramme de Venn. &lt;/p&gt;&#10;" data-medium-file="https://uxways.files.wordpress.com/2018/09/de-dev-c3a0-lux-_-reconversion-dune-convertie-1.png?w=660?w=300" data-large-file="https://uxways.files.wordpress.com/2018/09/de-dev-c3a0-lux-_-reconversion-dune-convertie-1.png?w=660?w=660" class="alignnone size-full wp-image-194" src="https://uxways.files.wordpress.com/2018/09/de-dev-c3a0-lux-_-reconversion-dune-convertie-1.png?w=660" alt="De dev à l'UX _ reconversion d'une convertie (1)" srcset="https://uxways.files.wordpress.com/2018/09/de-dev-c3a0-lux-_-reconversion-dune-convertie-1.png?w=660 660w, https://uxways.files.wordpress.com/2018/09/de-dev-c3a0-lux-_-reconversion-dune-convertie-1.png?w=150 150w, https://uxways.files.wordpress.com/2018/09/de-dev-c3a0-lux-_-reconversion-dune-convertie-1.png?w=300 300w, https://uxways.files.wordpress.com/2018/09/de-dev-c3a0-lux-_-reconversion-dune-convertie-1.png?w=768 768w, https://uxways.files.wordpress.com/2018/09/de-dev-c3a0-lux-_-reconversion-dune-convertie-1.png 960w" sizes="(max-width: 660px) 100vw, 660px"/></p>
  506. <p>Pour pouvoir répondre aux questions : <em>« Que veut faire cette utilisatrice ? Pourquoi ? Et comment ? », </em>un certain nombre de critères doivent être pris en compte : de la définition des fonctionnalités en passant par des notions de marketing et d’information de l’architecture. Je me rends compte par exemple que :</p>
  507. <ul>
  508. <li>Il va falloir que j’arrête de considérer les termes « marketing » et « analyse business » comme des gros mots (désolé, habitude de développeuse…), car je réalise vite que cela joue effectivement beaucoup sur l’expérience utilisateur.</li>
  509. <li>Je vais devoir faire un petit état des lieux de ce que je sais, mais surtout ce que j’ai besoin d’apprendre.</li>
  510. </ul>
  511. <h3>Où j’évalue mes compétences</h3>
  512. <p>Pour faire un premier bilan, je me suis appuyée sur <a href="https://blocnotes.iergo.fr/articles/competences-ux-et-modele-en-t/">le modèle de compétences UX en T</a> proposé par Raphaël Yharrassary.</p>
  513. <figure data-shortcode="caption" id="attachment_203" class="wp-caption alignnone"><img data-attachment-id="203" data-permalink="https://uxways.wordpress.com/2018/10/29/de-dev-a-ux-designer-reconversion-dune-convertie/de-dev-a-lux-_-reconversion-dune-convertie-1-4/" data-orig-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-1.png?w=660" data-orig-size="960,540" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="De dev à l&amp;rsquo;UX _ reconversion d&amp;rsquo;une convertie (1)" data-image-description="" data-medium-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-1.png?w=660?w=300" data-large-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-1.png?w=660?w=660" class="alignnone size-full wp-image-203" src="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-1.png?w=660" alt="Tableau du modèle en T de compétences UX " srcset="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-1.png?w=660 660w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-1.png?w=150 150w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-1.png?w=300 300w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-1.png?w=768 768w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-1.png 960w" sizes="(max-width: 660px) 100vw, 660px"/><figcaption class="wp-caption-text">Compétences UX et modèle en T</figcaption></figure>
  514. <p>Sur l’axe horizontal, Raphaël a listé toutes les grandes familles de compétences indispensables en UX. Sur l’axe vertical, de bas en haut, on passe de compétences les plus basiques et des compétences plus spécialisées.</p>
  515. <figure data-shortcode="caption" id="attachment_191" class="wp-caption alignnone"><img data-attachment-id="191" data-permalink="https://uxways.wordpress.com/2018/10/29/de-dev-a-ux-designer-reconversion-dune-convertie/de-dev-a-lux-_-reconversion-dune-convertie-10/" data-orig-file="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-10.png?w=660" data-orig-size="960,540" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="De dev à l&amp;rsquo;UX _ reconversion d&amp;rsquo;une convertie (10)" data-image-description="" data-medium-file="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-10.png?w=660?w=300" data-large-file="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-10.png?w=660?w=660" class="alignnone size-full wp-image-191" src="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-10.png?w=660" alt="De dev à l'UX _ reconversion d'une convertie (10)" srcset="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-10.png?w=660 660w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-10.png?w=150 150w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-10.png?w=300 300w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-10.png?w=768 768w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-10.png 960w" sizes="(max-width: 660px) 100vw, 660px"/><figcaption class="wp-caption-text">Après 6 ans de dev, les compétences techniques, ça me connait !</figcaption></figure>
  516. <p>Si l’on regarde la colonne <em>Technique</em> (acquise de par mon background de développeuse) l’idée n’est évidemment pas de dire qu’un·e UX designer doit savoir mettre en place une infrastructure ou une architecture système mais plutôt de savoir que ça existe et que ça influe sur l’expérience utilisateur.</p>
  517. <p>Ainsi, pour se construire une base de compétences pertinente, un·e UX designer doit d’abord avoir des connaissances « de bases » sur toutes les grandes familles, avant de se spécialiser dans certains domaines selon les affinités ou les besoins de l’entreprise.</p>
  518. <p><img data-attachment-id="195" data-permalink="https://uxways.wordpress.com/2018/10/29/de-dev-a-ux-designer-reconversion-dune-convertie/de-dev-a-lux-_-reconversion-dune-convertie-3-3/" data-orig-file="https://uxways.files.wordpress.com/2018/09/de-dev-c3a0-lux-_-reconversion-dune-convertie-3.png?w=660" data-orig-size="960,540" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="De dev à l&amp;rsquo;UX _ reconversion d&amp;rsquo;une convertie (3)" data-image-description="&lt;p&gt;Tableau de compétences UX et modèle en T, où certaines compétences acquises sont mises en avant.&lt;/p&gt;&#10;" data-medium-file="https://uxways.files.wordpress.com/2018/09/de-dev-c3a0-lux-_-reconversion-dune-convertie-3.png?w=660?w=300" data-large-file="https://uxways.files.wordpress.com/2018/09/de-dev-c3a0-lux-_-reconversion-dune-convertie-3.png?w=660?w=660" class="alignnone size-full wp-image-195" src="https://uxways.files.wordpress.com/2018/09/de-dev-c3a0-lux-_-reconversion-dune-convertie-3.png?w=660" alt="De dev à l'UX _ reconversion d'une convertie (3)" srcset="https://uxways.files.wordpress.com/2018/09/de-dev-c3a0-lux-_-reconversion-dune-convertie-3.png?w=660 660w, https://uxways.files.wordpress.com/2018/09/de-dev-c3a0-lux-_-reconversion-dune-convertie-3.png?w=150 150w, https://uxways.files.wordpress.com/2018/09/de-dev-c3a0-lux-_-reconversion-dune-convertie-3.png?w=300 300w, https://uxways.files.wordpress.com/2018/09/de-dev-c3a0-lux-_-reconversion-dune-convertie-3.png?w=768 768w, https://uxways.files.wordpress.com/2018/09/de-dev-c3a0-lux-_-reconversion-dune-convertie-3.png 960w" sizes="(max-width: 660px) 100vw, 660px"/></p>
  519. <p>Ce modèle en T est donc très utile pour faire un bilan sur les compétences que l’on a (ou a acquérir), mais aussi dans le cas d’une équipe de plusieurs UX designers pour voir comment les profils se complètent.</p>
  520. <h3>Où j’évalue l’étendue de ma mission</h3>
  521. <p>Pour mieux cerner les bornes de ma mission d’UX Designer, je me suis appuyée sur le travail de Jasper Stephenson sur les <a href="https://www.jasperstephenson.com/posts/spectrum/">différents rôles et métiers du design UX selon l’étape du cycle de travail</a> .</p>
  522. <p>D’abord, un petit rappel sur le cycle de vie d’un projet d’un point de vue de designer : le travail se découpe en plusieurs phases, sur lesquelles on peut boucler :</p>
  523. <p><img data-attachment-id="207" data-permalink="https://uxways.wordpress.com/2018/10/29/de-dev-a-ux-designer-reconversion-dune-convertie/de-dev-a-lux-_-reconversion-dune-convertie-4-3/" data-orig-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-4.png?w=660" data-orig-size="960,540" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="De dev à l&amp;rsquo;UX _ reconversion d&amp;rsquo;une convertie (4)" data-image-description="" data-medium-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-4.png?w=660?w=300" data-large-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-4.png?w=660?w=660" class="alignnone size-full wp-image-207" src="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-4.png?w=660" alt="Cycle de vie d'un projet vue par un UX designer" srcset="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-4.png?w=660 660w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-4.png?w=150 150w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-4.png?w=300 300w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-4.png?w=768 768w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-4.png 960w" sizes="(max-width: 660px) 100vw, 660px"/></p>
  524. <ul>
  525. <li>La phase de <em>recherche</em>, auprès d’utilisateurs par exemple.</li>
  526. <li>La phase de <em>synthèse et idéation</em>, où l’on génère des idées.</li>
  527. <li>La phase de <em>prototypes et design</em>, où l’on conceptualise une solution.</li>
  528. <li>La phase d’<em>implémentation</em>, où la solution voit le jour.</li>
  529. </ul>
  530. <p>En tant que développeuse, mon métier intervenait plutôt en fin de cette chaîne :<img data-attachment-id="211" data-permalink="https://uxways.wordpress.com/2018/10/29/de-dev-a-ux-designer-reconversion-dune-convertie/de-dev-a-lux-_-reconversion-dune-convertie-17/" data-orig-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie4-e1540804321338.png?w=660" data-orig-size="856,230" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="De dev à l&amp;rsquo;UX _ reconversion d&amp;rsquo;une convertie" data-image-description="" data-medium-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie4-e1540804321338.png?w=660?w=300" data-large-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie4-e1540804321338.png?w=660?w=660" class="alignnone size-full wp-image-211" src="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie4-e1540804321338.png?w=660" alt="Web designer et Dev front end interviennent en fin de chaîne" srcset="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie4-e1540804321338.png?w=660 660w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie4-e1540804321338.png?w=150 150w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie4-e1540804321338.png?w=300 300w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie4-e1540804321338.png?w=768 768w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie4-e1540804321338.png 856w" sizes="(max-width: 660px) 100vw, 660px"/></p>
  531. <ul>
  532. <li><em>Web designer</em> : s’occupe du design et de l’implémentation</li>
  533. <li><em>Développeuse front end</em> : se concentre sur l’implémentation.</li>
  534. </ul>
  535. <p>Mais, en amont de ces phases, différents métiers de l’UX existent :</p>
  536. <p><img data-attachment-id="212" data-permalink="https://uxways.wordpress.com/2018/10/29/de-dev-a-ux-designer-reconversion-dune-convertie/de-dev-a-lux-_-reconversion-dune-convertie-1-6/" data-orig-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-12-e1540804405230.png?w=660" data-orig-size="862,431" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="De dev à l&amp;rsquo;UX _ reconversion d&amp;rsquo;une convertie (1)" data-image-description="" data-medium-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-12-e1540804405230.png?w=660?w=300" data-large-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-12-e1540804405230.png?w=660?w=660" class="alignnone size-full wp-image-212" src="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-12-e1540804405230.png?w=660" alt="De dev à l'UX _ reconversion d'une convertie (1)" srcset="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-12-e1540804405230.png?w=660 660w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-12-e1540804405230.png?w=150 150w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-12-e1540804405230.png?w=300 300w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-12-e1540804405230.png?w=768 768w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-12-e1540804405230.png 862w" sizes="(max-width: 660px) 100vw, 660px"/></p>
  537. <ul>
  538. <li>L’<em>UX Designer</em>, qui intervient sur toute la chaîne.</li>
  539. <li>L’<em>UX Researcher</em>, qui se spécialise dans la phase de recherche et de synthèse.</li>
  540. <li>L’<em>UI Designer</em>, qui se concentre sur les interfaces.</li>
  541. <li>L’<em>UX Writer</em>, qui est encore plus spécialisé puisqu’iel s’occupe exclusivement de la copie (micro ou macro, j’en parle un peu dans <a href="https://uxways.wordpress.com/2018/03/19/la-micro-copie-de-limportance-du-choix-des-mots/">La micro-copie : de l’importance du choix des mots</a>)</li>
  542. </ul>
  543. <p>Et puis, il y a le cas particulier de l’<strong>UX Designer « Team of one »</strong>. Quand, comme moi, on travaille seul·e dans son équipe, la situation demande d’avoir des compétences particulières :</p>
  544. <ul>
  545. <li>Accepter d’avoir un profil <strong>généraliste</strong> : on touche à tout, mais pas avant autant d’expertise qu’une personne spécialisée.</li>
  546. <li>Savoir <strong>évangéliser</strong> : toute la démarche UX repose sur nos épaules. Il faut arriver à motiver les autres corps de métiers pour avancer dans la même direction.</li>
  547. <li>Être <strong>ingénieuse</strong> : avec du temps et des ressources limitées, il faut savoir adapter parfois les méthodes.</li>
  548. <li>Et surtout <strong>audodidacte</strong> : je ne peux pas m’appuyer sur mes collègues pour progresser.</li>
  549. </ul>
  550. <p><img data-attachment-id="204" data-permalink="https://uxways.wordpress.com/2018/10/29/de-dev-a-ux-designer-reconversion-dune-convertie/de-dev-a-lux-_-reconversion-dune-convertie-2-4/" data-orig-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-2.png?w=660" data-orig-size="960,540" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="De dev à l&amp;rsquo;UX _ reconversion d&amp;rsquo;une convertie (2)" data-image-description="" data-medium-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-2.png?w=660?w=300" data-large-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-2.png?w=660?w=660" class="alignnone size-full wp-image-204" src="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-2.png?w=660" alt="Spectre des métiers de l'UX selon les phases du cycle du travail" srcset="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-2.png?w=660 660w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-2.png?w=150 150w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-2.png?w=300 300w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-2.png?w=768 768w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-2.png 960w" sizes="(max-width: 660px) 100vw, 660px"/></p>
  551. <p>Enfin, il est toujours bon de préciser que les licornes n’existent pas : aborder la chaîne de bout en bout est extrêmement compliqué. Je m’en rends compte maintenant : quand j’étais développeuse mais que je tentais de mettre en place des améliorations UX, malgré toute ma bonne volonté, je ne pouvais pas avoir le même recul qu’aujourd’hui. Le fait de savoir et de déjà réfléchir à comment implémenter et coder ma solution me limitait grandement dans ma réflexion. J’ai mis du temps à quitter cet état d’esprit « réflexion de développeur » mais ça m’est indispensable pour proposer aujourd’hui des solutions vraiment centrées sur l’utilisateur.</p>
  552. <h2>Où j’évalue le degré de maturité de mon entreprise</h2>
  553. <p>Une fois que les tenants et aboutissants de ma mission étaient plus clairs pour nous, j’ai pu mettre en place des choses plus structurées chez TEA.</p>
  554. <p>Je ne l’ai pas mentionné avant, mais je suis arrivée chez TEA au tout début de l’entreprise, quand elle n’avait que quelques mois. Je l’ai donc vu évoluer (en même temps que moi), à tous les niveaux.</p>
  555. <p>Les premières années, l’UX n’était pas un mot de notre vocabulaire, et donc pas un problème : l’UX chez nous était <strong>non reconnue</strong>. Nous, développeuses et développeurs, créions nous-même les interfaces, avec tous les problèmes que cela peut causer.</p>
  556. <p><img data-attachment-id="192" data-permalink="https://uxways.wordpress.com/2018/10/29/de-dev-a-ux-designer-reconversion-dune-convertie/de-dev-a-lux-_-reconversion-dune-convertie-11/" data-orig-file="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-111.png?w=660" data-orig-size="960,540" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="De dev à l&amp;rsquo;UX _ reconversion d&amp;rsquo;une convertie (11)" data-image-description="" data-medium-file="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-111.png?w=660?w=300" data-large-file="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-111.png?w=660?w=660" class="alignnone size-full wp-image-192" src="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-111.png?w=660" alt="Tableau de résumé des différents degrés de maturité UX d'une entreprise" srcset="https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-111.png?w=660 660w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-111.png?w=150 150w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-111.png?w=300 300w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-111.png?w=768 768w, https://uxways.files.wordpress.com/2018/09/de-dev-acc80-lux-_-reconversion-dune-convertie-111.png 960w" sizes="(max-width: 660px) 100vw, 660px"/></p>
  557. <p>Au fur et à mesure de mes révélations (mais aussi du travail d’autres collègues), l’UX est devenue une question <strong>ponctuelle </strong>: nous avions connaissance des bonnes pratiques. Hélas, cela ne suffit pas : si aucune méthode n’est mise en place de manière systématique et si les utilisateurs ne sont pas impliqués régulièrement, les problématiques d’UX ne sont pas vraiment abordées dans leur ensemble.</p>
  558. <p>Nous avons atteint le degré de maturité où l’UX est devenue <strong>considérée</strong> quand TEA a choisi d’investir, via du personnel dédié donc (moi). J’ai ainsi pu commencer à mettre en place des méthodes, sur certains projets.</p>
  559. <p>Depuis un an et demi que j’exerce ce poste, les choses évoluent, j’interviens à plusieurs niveaux du cycle de vie d’un projet. On peut dire que l’UX est <strong>gérée</strong>.</p>
  560. <p>Nous ne sommes pas encore à une phase où l’UX serait <strong>intégrée</strong>, ni même <strong>institutionalisée</strong>. En effet, il ne suffit pas de dire que l’UX doit être au coeur de la stratégie de l’entreprise pour qu’elle le soit vraiment : cela demande du temps et de l’investissement, que les changements se fassent et que l’organisation se développe de manière structurée et pérenne. Mais, chaque jour, on y travaille un peu plus 🙂</p>
  561. <h3>Où je m’adapte à mes interlocuteurs</h3>
  562. <p>Au fil du temps, j’ai vite appris à identifier mes interlocuteurs, mais aussi à adapter mon discours pour obtenir les réponses les plus pertinentes.</p>
  563. <p><img data-attachment-id="205" data-permalink="https://uxways.wordpress.com/2018/10/29/de-dev-a-ux-designer-reconversion-dune-convertie/de-dev-a-lux-_-reconversion-dune-convertie-3-4/" data-orig-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-3.png?w=660" data-orig-size="960,540" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="De dev à l&amp;rsquo;UX _ reconversion d&amp;rsquo;une convertie (3)" data-image-description="&lt;p&gt;Je travaille avec 3 grandes catégories de personnes : les décideurs, les utilisateurs et l&amp;rsquo;équipe technique&lt;/p&gt;&#10;" data-medium-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-3.png?w=660?w=300" data-large-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-3.png?w=660?w=660" class="alignnone size-full wp-image-205" src="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-3.png?w=660" alt="De dev à l'UX _ reconversion d'une convertie (3)" srcset="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-3.png?w=660 660w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-3.png?w=150 150w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-3.png?w=300 300w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-3.png?w=768 768w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-3.png 960w" sizes="(max-width: 660px) 100vw, 660px"/></p>
  564. <p>D’abord en amont du projet, puis tout au long de son cycle de vie, je commence par m’entretenir avec les <strong>décideurs</strong> (ma hiérarchie, ou nos clients, selon les projets). L’identification des besoins nécessite souvent de poser beaucoup de questions.</p>
  565. <p>Évidemment, ces besoins sont toujours croisés avec les besoins réels des <strong>utilisateurs</strong>. Il existe de nombreuses manières de récolter du feedback : par le biais des utilisatrices et utilisateurs eux même, évidemment ; mais aussi par des biais détournés, via l’équipe du service client, par les réseaux sociaux (commentaires…) mais aussi en analysant l’utilisation de nos produits.</p>
  566. <p>Enfin, discuter avec l’<strong>équipe technique</strong> est indispensable, notamment pour identifier les contraintes techniques au problème donné.</p>
  567. <p>Pour chacun de ces interlocuteurs, j’adapte mon discours :</p>
  568. <ul>
  569. <li><em>Avec les décideurs</em> : je suis souvent dans une démarche de convaincre. Le <strong>storytelling</strong> est devenue ma manière privilégiée de communiquer, avec l’appui de maquette et prototypes basse ou haute résolution selon l’avancée du projet.</li>
  570. <li><em>Avec les équipes techniques</em> : je privilégie la <strong>mise en place d’outils</strong> et de canaux de communication efficaces.</li>
  571. <li><em>Avec les utilisateurs : </em>j’adapte radicalement mon discours puisque j’ai appris à… <strong>me taire</strong> pour mieux écouter, lors d’entretiens téléphoniques ou de visu.</li>
  572. </ul>
  573. <h3>Où j’ai gardé mes supers pouvoirs</h3>
  574. <p>Depuis bientôt deux ans que j’ai changé de métier, une question qui revient souvent c’est <em>« Mais ça ne te manque pas trop, le métier de dev ? ». </em>Et bien… non, ça va merci ☺️ .</p>
  575. <p>En tant que développeuse, ce que j’aimais particulièrement, c’était avoir l’étincelle et l’illumination de génie quand j’arrivais à résoudre mon problème avec une solution élégante techniquement, pragmatique, et évolutive.</p>
  576. <p>De ce point de vue là, ça n’a pas tellement changé : je cherche toujours une solution qui soit élégante, pragmatique et évolutive, pour répondre aux besoins de l’utilisateurs, aux contraintes techniques et aux besoins des décideurs.</p>
  577. <p><img data-attachment-id="208" data-permalink="https://uxways.wordpress.com/2018/10/29/de-dev-a-ux-designer-reconversion-dune-convertie/de-dev-a-lux-_-reconversion-dune-convertie-16/" data-orig-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie3.png?w=660" data-orig-size="960,540" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="De dev à l&amp;rsquo;UX _ reconversion d&amp;rsquo;une convertie" data-image-description="" data-medium-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie3.png?w=660?w=300" data-large-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie3.png?w=660?w=660" class="alignnone size-full wp-image-208" src="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie3.png?w=660" alt="De dev à l'UX _ reconversion d'une convertie.png" srcset="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie3.png?w=660 660w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie3.png?w=150 150w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie3.png?w=300 300w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie3.png?w=768 768w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie3.png 960w" sizes="(max-width: 660px) 100vw, 660px"/></p>
  578. <p>Et puis, de mon ancien métier, j’ai gardé quelques super pouvoirs :</p>
  579. <p><img data-attachment-id="209" data-permalink="https://uxways.wordpress.com/2018/10/29/de-dev-a-ux-designer-reconversion-dune-convertie/de-dev-a-lux-_-reconversion-dune-convertie-1-5/" data-orig-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-11.png?w=660" data-orig-size="960,540" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="De dev à l&amp;rsquo;UX _ reconversion d&amp;rsquo;une convertie (1)" data-image-description="" data-medium-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-11.png?w=660?w=300" data-large-file="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-11.png?w=660?w=660" class="alignnone size-full wp-image-209" src="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-11.png?w=660" alt="De dev à l'UX _ reconversion d'une convertie (1).png" srcset="https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-11.png?w=660 660w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-11.png?w=150 150w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-11.png?w=300 300w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-11.png?w=768 768w, https://uxways.files.wordpress.com/2018/10/de-dev-c3a0-lux-_-reconversion-dune-convertie-11.png 960w" sizes="(max-width: 660px) 100vw, 660px"/></p>
  580. <ul>
  581. <li>Je sais faire des requêtes SQL, toujours pratique pour obtenir en quelques minutes des réponses à des questions bizarre <em>« Mais au fait, est-ce que cette fonctionnalité est utilisée comme ceci ou comme cela ? ».</em></li>
  582. <li>Je sais manipuler les langages HTML/CSS/JS : pratique pour faire des prototypes, manipuler directement le code source d’une page ou communiquer avec les devs.</li>
  583. <li>Et surtout, surtout, surtout, je sais <strong>lire la documentation </strong>: je n’ai pas besoin de tout savoir, j’ai juste besoin de savoir où je peux trouver la réponse à ma question, et tout ira bien pour moi. Ouf, voilà qui est rassurant !</li>
  584. </ul>
  585. <h3>Où je tente une conclusion</h3>
  586. <p>Voilà donc la fin de ce retour d’expérience : je n’ai pas vraiment de conclusion, car je ne sais pas si on peut tirer de généralités de mon expérience personnelle ; mais surtout parce que mon chemin est loin d’être fini : <strong>je continue d’apprendre chaque jour</strong>.</p>
  587. <p>Mais quand même, juste un truc : si vous en avez l’occasion, invitez des jeunes à des conférences, c’est l’occasion de planter des graines qui pourront germer dans le futur 🙂</p>
  588. <p> </p>
  589. <p>À celles et ceux qui ont lu jusqu’au bout, merci ! Vous pouvez aussi retrouver les slides <a title="De dev à l'UX _ reconversion d'une convertie" href="https://www.slideshare.net/annso54/de-dev-a-lux-reconversion-dune-convertie">sur Slideshare</a>.</p>
  590. </article>
  591. </section>
  592. <nav id="jumpto">
  593. <p>
  594. <a href="/david/blog/">Accueil du blog</a> |
  595. <a href="https://uxways.wordpress.com/2018/10/29/de-dev-a-ux-designer-reconversion-dune-convertie/">Source originale</a> |
  596. <a href="/david/stream/2019/">Accueil du flux</a>
  597. </p>
  598. </nav>
  599. <footer>
  600. <div>
  601. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  602. <p>
  603. Bonjour/Hi!
  604. 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>
  605. 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>).
  606. </p>
  607. <p>
  608. 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>.
  609. </p>
  610. <p>
  611. Voici quelques articles choisis :
  612. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  613. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  614. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  615. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  616. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  617. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  618. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  619. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  620. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  621. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  622. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  623. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  624. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  625. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  626. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  627. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  628. </p>
  629. <p>
  630. 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>.
  631. </p>
  632. <p>
  633. Je ne traque pas ta navigation mais mon
  634. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  635. conserve des logs d’accès.
  636. </p>
  637. </div>
  638. </footer>
  639. <script type="text/javascript">
  640. ;(_ => {
  641. const jumper = document.getElementById('jumper')
  642. jumper.addEventListener('click', e => {
  643. e.preventDefault()
  644. const anchor = e.target.getAttribute('href')
  645. const targetEl = document.getElementById(anchor.substring(1))
  646. targetEl.scrollIntoView({behavior: 'smooth'})
  647. })
  648. })()
  649. </script>