{"id":7898,"date":"2021-05-04T13:37:03","date_gmt":"2021-05-04T11:37:03","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=7898"},"modified":"2021-05-02T23:00:29","modified_gmt":"2021-05-02T21:00:29","slug":"suggest-design-suggestions-de-design-produits-digital-quotidien","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/retours-experience\/suggest-design-suggestions-de-design-produits-digital-quotidien","title":{"rendered":"Suggest.design \u2014 Suggestions de design aux produits du quotidien"},"content":{"rendered":"

Laissez-moi vous raconter l’histoire du d\u00e9but d’un side project<\/em><\/span> proposant des suggestions de design. L’un de mes nombreux projets, mais qui pour une fois a vu le jour bien plus vite que pr\u00e9vu. C’est gr\u00e2ce \u00e0 des gens comp\u00e9tents et \u00e0 des services (no-code) tellement facile \u00e0 prendre en main que nous avons pu nous concentrer sur nos contenus.<\/p>\n

<\/p>\n

Tout a commenc\u00e9 sur LinkedIn, Colbys faisait une de ses suggestions de design<\/a> comme il les fait si bien. Cela consiste \u00e0 proposer une suggestion d’am\u00e9lioration de l’exp\u00e9rience utilisateur<\/strong> sur un produit qu’il utilise au quotidien. Adrian lui fait une remarque sur le fait qu’il serait int\u00e9ressant de centraliser ce type de feedback<\/strong> quelque part.
\nCe qu’ils ne savent pas encore mais ils vont l’apprendre en lisant cet article : cela faisait un moment que je voulais r\u00e9aliser ce type de contenu (site web ou s\u00e9rie d’articles).<\/p>\n

J’ai donc saut\u00e9 sur l’occasion pour aller chercher un nom de domaine (suggest.design<\/a>) et leur proposer directement \u00e0 la suite de leur discussion. C’\u00e9tait une invitation \u00e0 peine cach\u00e9e \u00e0 collaborer. Quelques jours apr\u00e8s nous \u00e9tions Colbys et moi en visioconf\u00e9rence \u00e0 remplir un Startup Canvas. Objectif ? Coucher les premi\u00e8res id\u00e9es que nous compl\u00e8terons plus tard avec Adrian.<\/p>\n

Apr\u00e8s 5 s\u00e9ances en visio-conf\u00e9rence, nous lan\u00e7ons d\u00e9j\u00e0 un petit site web avec ses premiers contenus. Laissez-moi vous d\u00e9tailler les quelques \u00e9tapes simples qui nous ont permis d’en arriver l\u00e0.<\/p>\n

Voir Suggest.design<\/a><\/p>\n

Les outils pour lancer un side-project<\/h2>\n

Aujourd’hui nous avons une foule d’outils \u00e0 notre disposition, voici ceux qui nous ont permis d’avancer tr\u00e8s rapidement dans nos it\u00e9rations.<\/p>\n

Miro pour d\u00e9finir le cadre de notre projet<\/h3>\n

Comme tout bon projet qui se respecte, nous avons entam\u00e9 notre aventure par la d\u00e9finition du cadre du projet : la vision, la cible, les objectifs, les indicateurs cl\u00e9s de succ\u00e8s, les acteurs, etc. Pour cela nous avons utiliser Miro<\/a> et un template de Startup Canvas, ce qui nous a permis de d\u00e9marrer rapidement les r\u00e9flexions.<\/p>\n

Nous avons vite d\u00e9fini qu’un des objectifs principal est de se faire plaisir avant tout, ce qui a plut\u00f4t bien facilit\u00e9 la prise de d\u00e9cision par la suite : si c’est ennuyeux ou trop consommateur de notre temps, on ne fait pas ou on cherche une autre solution.<\/p>\n

\"\"<\/a>
Un startup canvas et un mind map<\/figcaption><\/figure>\n

A c\u00f4t\u00e9 de ce Startup Canvas se trouve un mind mapping assez classique que j’utilise souvent pour ne rien oublier : en g\u00e9n\u00e9ral en d\u00e9but de projet, les id\u00e9es fusent et ne sont pas bloqu\u00e9es par la r\u00e9alisation en cours ou les objectifs. En effet lorsque vous entrez dans la r\u00e9alisation, un effet tunnel se met en place, c’est alors que vous oubliez beaucoup de choses importantes. Poser toutes les id\u00e9es dans un mind map de la sorte permet d’y revenir plus tard en cas de besoin.<\/p>\n

D\u00e9couvrir Miro<\/a><\/p>\n

Notion pour centraliser les efforts<\/h3>\n

Notion<\/a> est un outil de \u00ab\u00a0prise de note\u00a0\u00bb tr\u00e8s puissant qui permet de cr\u00e9er des contenus typ\u00e9s tr\u00e8s utiles : tableau organis\u00e9, kanban, contenus li\u00e9s entre eux, bases de donn\u00e9es, etc.<\/p>\n

La puissance de Notion r\u00e9side dans l’aspect mutation de ses contenus<\/strong> : un ticket dans un Kanban peut devenir un article ou une page \u00e0 part enti\u00e8re sans avoir besoin de tout re-cr\u00e9er. Colbys et Adrian me l’ont fait d\u00e9couvrir, et je ne peux plus m’en passer. J’ai m\u00eame cr\u00e9\u00e9 un mini catalogue pour mes r\u00e9alisations en cuir<\/a> pour les personnes int\u00e9ress\u00e9es par une cr\u00e9ation faite maison.<\/p>\n

\"\"<\/a>
Notre page d’accueil de Notion<\/figcaption><\/figure>\n

Bref, Notion est devenu notre quartier g\u00e9n\u00e9ral pour centraliser nos efforts : proposition d’actions, \u00e9bauches d’article, mod\u00e8les de contenu, premiers \u00e9l\u00e9ments de charte graphique, etc.
\nIl nous permet de centraliser nos actions, savoir qui est sur quoi et ce qu’on doit valider \u00e0 notre prochaine visioconf\u00e9rence, sans se marcher sur les pieds avec la distance.<\/p>\n

Adrian a d’ailleurs \u00e9crit un article sur le sujet de Notion (FR<\/a> et EN<\/a>) si vous souhaitez en savoir un peu plus.<\/p>\n

D\u00e9couvrir Notion<\/a><\/p>\n

Figma pour les suggestions de design<\/h3>\n

Figma<\/a> est l’endroit id\u00e9al pour rapidement faire des propositions de design en collaboration. Nous utilisons Google Drive pour centraliser les captures d’\u00e9cran des produits que nous souhaitons faire \u00e9voluer : l’outil permet d’annoter les images pour expliquer aux autres ce que nous souhaitons am\u00e9liorer.<\/p>\n

Une fois que nous avons valid\u00e9 l’id\u00e9e, Figma sert de base de travail pour nos r\u00e9alisations graphiques et Notion permet de centraliser image et contenus textuels de pr\u00e9sentation de la solution.<\/p>\n

\"\"<\/a><\/p>\n

Nous n’avons pas encore eu l’occasion de challenger la solution des autres ayant trouv\u00e9 des sujets plut\u00f4t rapide \u00e0 traiter pour le moment. Mais nous comptons bien profit\u00e9 de notre force \u00e0 3 pour challenger des cas plus complexes \u00e0 venir, notamment gr\u00e2ce \u00e0 la collaboration possible dans Figma, et les solutions de visio pour du direct. D’ailleurs Figma va introduire le Voice Chat<\/a> d’ici peu de temps.<\/p>\n

\"\"<\/a>
Colbys nous d\u00e9tail sa recherche d’identit\u00e9 graphique<\/figcaption><\/figure>\n

Bien s\u00fbr nous avons \u00e9galement utilis\u00e9 d’autres outils pour la cr\u00e9ation graphique de l’identit\u00e9 et la notion de palettes de couleurs pour lesquels Colbys a r\u00e9dig\u00e9 un billet \u00e0 ce sujet. Voici ma m\u00e9thode pour cr\u00e9er la palette de couleur<\/a>.<\/p>\n

D\u00e9couvrir Figma<\/a><\/p>\n

Webflow pour cr\u00e9er le site web<\/h3>\n

Une autre tr\u00e8s bonne d\u00e9couverte<\/strong> pour moi durant ce side project<\/em><\/span> – et c’est ce qui fait l’int\u00e9r\u00eat de ce type de projet – c’est la d\u00e9couverte un peu plus pouss\u00e9e que juste \u00ab\u00a0de nom\u00a0\u00bb du produit Webflow<\/a>.<\/p>\n

Cet outil nous a permis de nous concentrer sur notre contenu sans trop passer de temps sur l’aspect graphique, le th\u00e8me, et le code de notre future site web. Nous avons list\u00e9 les premi\u00e8res fonctionnalit\u00e9s que nous souhaitions, et choisi un th\u00e8me correspondant : TechCues<\/a> dans notre cas.<\/p>\n

Le th\u00e8me est simple, propose un contenu de type blog avec un syst\u00e8me de cat\u00e9gories, articles, et auteurs. Nous avions juste besoin de cr\u00e9er la notion de tags dans l’outil de CMS de Webflow. Nous avons ajust\u00e9 quelques styles globaux pour cr\u00e9er une identit\u00e9 plus forte, et le tour \u00e9tait jou\u00e9.<\/p>\n

\"\"<\/a>
Ajustement des styles du th\u00e8me dans Figma<\/figcaption><\/figure>\n

La force de Webflow<\/a>, lorsque le th\u00e8me est bien pens\u00e9, c’est sa modularit\u00e9 : un grand nombre de blocs r\u00e9utilisables et de styles graphiques sont pr\u00e9d\u00e9finis et facilitent la cr\u00e9ation de nouveaux contenus. Pour une personne avec aucune connaissance en code informatique, on peut vite faire quelque chose de tr\u00e8s propre. Pour une personne comme moi avec des connaissances en code, on peut affiner plein de choses et pousser un peu le th\u00e8me dans ses retranchements.<\/p>\n

Une fois votre mod\u00e8le de contenu r\u00e9fl\u00e9chi est publi\u00e9, l’\u00e9dition devient un jeu d’enfant, et l’\u00e9volution du site web \u00e9galement. (nous avons d\u00e9j\u00e0 plein d’autres id\u00e9es)<\/p>\n

D\u00e9couvrir Webflow<\/a><\/p>\n

Pourquoi faire des suggestions de design ?<\/h2>\n

Avant d’\u00eatre des designers, nous sommes des utilisateurs de produits num\u00e9riques au quotidien. Nous sommes parfois utilisateurs amateurs, parfois aguerris. Dans bien des cas nous sommes des utilisateurs avec des frustrations. L’une de nos responsabilit\u00e9s en tant que designer est de tacler ces probl\u00e8mes dans les produits que nous d\u00e9veloppons.<\/p>\n

\"Suggest.<\/a><\/p>\n

Bien s\u00fbr, nous n’avons pas la science infuse, nous n’avons pas toujours acc\u00e8s aux utilisateurs finaux, et, comme le veut \u00e9galement le domaine : il faut faire des erreurs pour apprendre et avancer.<\/p>\n

\u00c0 trois, nous avons donc d\u00e9cid\u00e9 de proposer des am\u00e9liorations non sollicit\u00e9es de produits que nous utilisons. Il ne s’agit pas de r\u00e9volutionner le design complet d’un produit, mais d’it\u00e9rer sur des fonctionnalit\u00e9s manquantes ou (selon nous) mal pens\u00e9es, ou encore victimes de biais cognitifs<\/a> de ses cr\u00e9ateurs et cr\u00e9atrices.<\/p>\n

Aider les produits que nous appr\u00e9cions et utilisons<\/h3>\n

M\u00eame si nous n’avons pas la pr\u00e9tention de nous faire lire par lesdites marques \u00e9ditant les produits dont nous faisons la critique, nous souhaitons malgr\u00e9 tout contribuer \u00e0 notre mani\u00e8re. C’est \u00e9galement parfois pour nous passer les nerfs \u00e0 force d’attendre l’\u00e9volution du produit. (je ne m’engage pas pour mes camarades sur ce point \ud83d\ude01)<\/p>\n

Nous esp\u00e9rons secr\u00e8tement que pousser \u00e0 la r\u00e9flexion sur certains aspects des produits permettent d’am\u00e9liorer le quotidien d’autres utilisateurs et utilisatrices.<\/p>\n

Proposer des suggestions de design pour aider nos pairs<\/h3>\n

De nombreux designers d\u00e9butent dans le domaine. Je donne pas mal de\u00a0mentoring<\/em><\/span> individuel, et je me suis rendu compte qu’il manque de ressources traitant publiquement de cas concret. Ces \u00e9tudes de cas permettent de rester critiques m\u00eame sur des produits qui semblent \u00ab\u00a0termin\u00e9s\u00a0\u00bb. Cela d\u00e9montre que les usages peuvent \u00e9voluer, et que ne pas faire \u00e9voluer son produit en cons\u00e9quence, c’est laisser beaucoup de place \u00e0 la concurrence pour s’\u00e9panouir.<\/p>\n

Indirectement, proposer des critiques ouvertes sur certains produits nous exposent en tant que designers \u00e0 cette m\u00eame critique. Bien s\u00fbr que d’autres auront des id\u00e9es meilleures que les n\u00f4tres. Bien s\u00fbr que nous n’aurons nous-m\u00eame pas pens\u00e9 \u00e0 tout, et c’est normal. Nous sommes aussi l\u00e0 pour apprendre, encore et toujours \ud83d\ude0a<\/p>\n

Bonne lecture !<\/p>\n

D\u00e9couvrir Suggest.design<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Laissez-moi vous raconter l’histoire du d\u00e9but d’un side project proposant des suggestions de design. L’un de mes nombreux projets, mais qui pour une fois a vu le jour bien plus vite que pr\u00e9vu. C’est gr\u00e2ce \u00e0 des gens comp\u00e9tents et \u00e0 des services (no-code) tellement facile \u00e0 prendre en main que nous avons pu nous […]<\/p>\n","protected":false},"author":4,"featured_media":7905,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[875,700],"tags":[919,578],"coauthors":[597],"class_list":["post-7898","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-experience-utilisateur","category-retours-experience","tag-ui-design","tag-ux"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/7898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=7898"}],"version-history":[{"count":3,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/7898\/revisions"}],"predecessor-version":[{"id":7927,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/7898\/revisions\/7927"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/7905"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=7898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=7898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=7898"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=7898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}