{"id":125092,"date":"2017-06-21T09:46:18","date_gmt":"2017-06-21T07:46:18","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/content-pillars\/designing-ux-for-multiple-audiences-with-interactive-prototypes-scytl-case-study\/"},"modified":"2025-01-31T18:17:03","modified_gmt":"2025-01-31T17:17:03","slug":"designing-ux-for-multiple-audiences-with-interactive-prototypes-scytl-case-study","status":"publish","type":"tc_content_pillar","link":"https:\/\/www.justinmind.com\/fr\/clients\/scytl-case-study","title":{"rendered":"Prototypage de l&rsquo;UX pour des publics multiples : \u00c9tude de cas Scytl"},"content":{"rendered":"<h2>Prototypage d&rsquo;exp\u00e9riences utilisateur interactives pour la gouvernance en ligne et le vote en ligne, Scytl<\/h2>\n<p>En tant que chef d&rsquo;\u00e9quipe UX et Product Owner chez <a href=\"https:\/\/www.scytl.com\/en\/\" target=\"_blank\" rel=\"noopener noreferrer\">Scytl<\/a>, une organisation leader dans la gestion s\u00e9curis\u00e9e des \u00e9lections, Judit Casacuberta Bag\u00f3 est charg\u00e9e de cr\u00e9er et d&rsquo;optimiser l&rsquo;<strong>exp\u00e9rience utilisateur<\/strong> pour ses clients externes et ses \u00e9quipes internes. Nous avons pris contact avec elle pour savoir comment elle a utilis\u00e9 Justinmind pour cr\u00e9er des wireframes basiques et statiques et des prototypes complexes et enti\u00e8rement fonctionnels afin de cr\u00e9er des exp\u00e9riences si diff\u00e9rentes.<\/p>\n<h2>L&rsquo;exp\u00e9rience de l&rsquo;utilisateur depuis le d\u00e9but<\/h2>\n<p>Judit est praticienne de l&rsquo;exp\u00e9rience utilisateur et de l&rsquo;interface utilisateur depuis pr\u00e8s de 10 ans. Elle a travaill\u00e9 en tant que design UX, consultante, chercheuse, contributrice, professeur et chef d&rsquo;\u00e9quipe. Elle a commenc\u00e9 par \u00e9tudier le multim\u00e9dia \u00e0 l&rsquo;universit\u00e9 en Espagne, mais a rapidement d\u00e9couvert sa passion pour l&rsquo;UX. Pour Judit, l&rsquo;UX est l&rsquo;art et la science de rendre la vie de chacun plus facile &#8211; de l&rsquo;identification des besoins r\u00e9els des utilisateurs \u00e0 la conceptualisation de solutions potentielles qui s&rsquo;alignent sur ces besoins et s&rsquo;assurent qu&rsquo;elles fonctionnent. En tant que chef d&rsquo;\u00e9quipe UX chez Scytl, la strat\u00e9gie qu&rsquo;elle a invent\u00e9e est 100 % centr\u00e9e sur l&rsquo;utilisateur, la recherche et les tests utilisateurs prenant la t\u00eate de tous ses projets.  <\/p>\n<h2>Donner vie aux id\u00e9es gr\u00e2ce au prototypage<\/h2>\n<p>Judit d\u00e9crit le prototypage comme un moyen de <em>raconter une histoire<\/em> et de <em>donner vie \u00e0 ses id\u00e9es<\/em>. Elle a commenc\u00e9 \u00e0 utiliser Justinmind il y a 8 ans lors de son master en interaction homme-machine, utilisant l&rsquo;outil pour capturer les exigences et les valider avec les utilisateurs. Le r\u00f4le de Judit chez Scytl consiste \u00e0 am\u00e9liorer les performances et le design visuel des prototypes de l&rsquo;entreprise, en suivant ses directives visuelles de base. Ses livrables comprennent des sp\u00e9cifications fonctionnelles, des plans de site et des flux sous forme de wireframes et de prototypes interactifs, r\u00e9alis\u00e9s avec Justinmind. <\/p>\n<blockquote><p>\u00ab\u00a0Justinmind est ma solution de design num\u00e9ro un pour la cr\u00e9ation de wireframes et de prototypes !\u00a0\u00bb<\/p><\/blockquote>\n<h2>Prototypage interactif pour valider le parcours de l&rsquo;utilisateur<\/h2>\n<p>Le prototypage intervient dans les projets de Judit d\u00e8s le d\u00e9but du processus de design. Elle commence par cr\u00e9er des <a href=\"https:\/\/www.justinmind.com\/fr\/wireframe\/site-web\">wireframes de sites web<\/a> statiques qui l&rsquo;aident \u00e0 imaginer des concepts et \u00e0 proposer des solutions potentielles aux probl\u00e8mes des utilisateurs. Une fois que Judit et son \u00e9quipe ont d\u00e9cid\u00e9 d&rsquo;un flux de travail initial &#8211; qu&rsquo;ils d\u00e9crivent \u00e0 l&rsquo;aide de ses wireframes &#8211; elle passe \u00e0 la cr\u00e9ation de prototypes fonctionnels. Les fonctions interactives de Justinmind lui permettent d&rsquo;essayer et de tester de nouvelles fonctionnalit\u00e9s et d&rsquo;en d\u00e9finir de nouvelles. Elle utilise le syst\u00e8me d&rsquo;\u00e9v\u00e9nements pour cr\u00e9er des interactions complexes qui l&rsquo;aident \u00e0 recr\u00e9er un v\u00e9ritable flux de travail. Cela permet \u00e9galement \u00e0 l&rsquo;\u00e9quipe d&rsquo;\u00e9valuer l&rsquo;impact de chaque point de contact sur l&rsquo;ensemble du produit. <\/p>\n<h2>Comment les UX Designers peuvent utiliser les prototypes pour les comptes des parties prenantes externes.<\/h2>\n<p>Chez Scytl, Judit partage son temps entre les projets sp\u00e9cifiques aux parties prenantes externes et les mises \u00e0 jour internes. En tant qu&rsquo;UX Designer, elle a g\u00e9n\u00e9ralement travaill\u00e9 sur des comptes externes de gouvernance \u00e9lectronique. Cela n\u00e9cessitait des recherches sur chaque client, ainsi que leur inclusion dans la partie feedback et it\u00e9ration du processus de design.  <\/p>\n<h3>Phase de d\u00e9couverte : recherche approfondie<\/h3>\n<p>Lorsque Judit travaille sur un nouveau projet pour un client externe, elle commence par une phase de conceptualisation. Avec les clients, elle identifie et rassemble les <strong>exigences commerciales<\/strong> pour la nouvelle application, en se basant sur les profils des <a href=\"https:\/\/www.justinmind.com\/fr\/clients\" target=\"_blank\" rel=\"noopener noreferrer\">clients<\/a>, les secteurs verticaux cibl\u00e9s et les diff\u00e9rents march\u00e9s. Elle documente ensuite tous les objectifs des sp\u00e9cifications d\u00e9finis par les parties prenantes du projet. Une fois les exigences d\u00e9finies, elle cr\u00e9e des sketchs de base des principaux \u00e9crans de l&rsquo;application. <\/p>\n<h3>Du papier au prototype<\/h3>\n<p>Les sketchs sont traduits du papier \u00e0 l&rsquo;\u00e9cran sous forme de prototypes interactifs web ou mobiles. Ils permettent \u00e0 l&rsquo;\u00e9quipe et au client de se faire une meilleure id\u00e9e de l&rsquo;aspect et de la convivialit\u00e9 des besoins en temps r\u00e9el. Il s&rsquo;agit d&rsquo;une \u00e9tape importante dans l&rsquo;identification des caract\u00e9ristiques visuelles et fonctionnelles des besoins de chaque client. Le prototype est ensuite valid\u00e9 et les exigences sont hi\u00e9rarchis\u00e9es par le client lors d&rsquo;une s\u00e9ance de co-conception. L&rsquo;\u00e9quipe <a href=\"https:\/\/www.justinmind.com\/fr\/aide\/partager-obtenir-retour-information\">exporte le prototype en HTML<\/a>. Judit pr\u00e9sente ensuite au client les principaux flux de travail, les utilisateurs cibles et les fonctionnalit\u00e9s d\u00e9finis dans la documentation des exigences. Cela inclut la fa\u00e7on dont une \u00e9lection pourrait \u00eatre mise en place et comment les donn\u00e9es des \u00e9lecteurs peuvent \u00eatre import\u00e9es, en utilisant des <a href=\"https:\/\/www.justinmind.com\/fr\/aide\/prototypage-formulaires-listes-et-grilles-de-donnees\">donn\u00e9es r\u00e9elles<\/a> au sein de Justinmind.  <\/p>\n<div class=\"jim-banner mobile\">\n<hr>\n<h2 style=\"text-align: center;\"><span style=\"color: #21c0c0;\">T\u00e9l\u00e9chargez Justinmind d\u00e8s maintenant et commencez \u00e0 cr\u00e9er des prototypes interactifs.<\/span><\/h2>\n<p style=\"text-align: center;\"><a style=\"color:#FFFFFF; background-color:#000000;\" data-category=\"cta-download-other\" data-label=\"banni\u00e8re1-post\" data-action=\"fr\/wp-json\/wp\/v2\/tc_content_pillar\/125092\" data-tracking-name=\"__jim\" data-tracking-content=\"eyJkYXRhIjoiZXlKallYUmxaMjl5ZVNJNkltTjBZUzFrYjNkdWJHOWhaQzF2ZEdobGNpSXNJbXhoWW1Wc0lqb2lZbUZ1Ym1sY2RUQXdaVGh5WlRFdGNHOXpkQ0lzSW1GamRHbHZiaUk2SW1aeVhDOTNjQzFxYzI5dVhDOTNjRnd2ZGpKY0wzUmpYMk52Ym5SbGJuUmZjR2xzYkdGeVhDOHhNalV3T1RJaWZRPT0iLCJzaWduYXR1cmUiOiI4NjliNDk4OGExMmIzZDU0OWY5ODQwNDkxMDZmMWIyYzhlMDVhYWRkNDdlMDc4ZTgxYzYwOWEyNjJkOWIxNzNmIn0=\" data-tracking-content--after-scroll=\"eyJkYXRhIjoiZXlKallYUmxaMjl5ZVNJNkltTjBZUzFrYjNkdWJHOWhaQzF2ZEdobGNpSXNJbXhoWW1Wc0lqb2lZbUZ1Ym1sY2RUQXdaVGh5WlRFdGNHOXpkQ0lzSW1GamRHbHZiaUk2SW1aeVhDOTNjQzFxYzI5dVhDOTNjRnd2ZGpKY0wzUmpYMk52Ym5SbGJuUmZjR2xzYkdGeVhDOHhNalV3T1RJaWZRPT0iLCJzaWduYXR1cmUiOiI4NjliNDk4OGExMmIzZDU0OWY5ODQwNDkxMDZmMWIyYzhlMDVhYWRkNDdlMDc4ZTgxYzYwOWEyNjJkOWIxNzNmIn0=\" class=\"action-tracking-button mks_button mks_button_large squared\" href=\"https:\/\/www.justinmind.com\/usernote\/signUp.action\" target=\"_blank\">T\u00e9l\u00e9charger gratuitement<\/a><\/p>\n<hr>\n<\/div>\n<h3>Commentaires des clients<\/h3>\n<p>Les clients ont la possibilit\u00e9 de faire part de leurs commentaires et les modifications sont apport\u00e9es par le biais de cycles it\u00e9ratifs. Il est facile d&rsquo;effectuer ces changements dans Justinmind gr\u00e2ce \u00e0 l&rsquo;utilisation de mod\u00e8les et de masters &#8211; effectuez de petites modifications et \u00e9tendez-les \u00e0 des \u00e9crans prototypes ou \u00e0 plusieurs prototypes en quelques clics. <\/p>\n<h3>Recherche sur les utilisateurs et essais constants<\/h3>\n<p>Les tests utilisateurs sont men\u00e9s tout au long de la phase de prototypage. Il s&rsquo;agit g\u00e9n\u00e9ralement de tests qualitatifs avec <a href=\"https:\/\/www.techsmith.com\/morae.html\" target=\"_blank\" rel=\"noopener noreferrer\">Morae<\/a>, ax\u00e9s sur les commentaires verbaux des utilisateurs. Cela permet d&rsquo;obtenir un retour d&rsquo;information pr\u00e9cieux et de comprendre pourquoi l&rsquo;utilisateur effectue certaines actions. Les tests utilisateurs sont r\u00e9alis\u00e9s avec des prototypes html publi\u00e9s, soit dans des laboratoires de tests utilisateurs, soit avec des outils en ligne. Ces tests aident l&rsquo;\u00e9quipe \u00e0 cr\u00e9er des it\u00e9rations des prototypes avant de poursuivre le d\u00e9veloppement.  <\/p>\n<h3>Mise en \u0153uvre du projet pour le d\u00e9veloppement<\/h3>\n<p>L&rsquo;\u00e9tape suivante pour l&rsquo;\u00e9quipe de Judit consiste \u00e0 cr\u00e9er une ligne directrice PSD avec les actifs finaux avant que le mod\u00e8le HTML ne soit d\u00e9velopp\u00e9 et que l&rsquo;application finale ne soit livr\u00e9e. L&rsquo;exportation HTML permet \u00e0 Judit de cr\u00e9er des livrables que les d\u00e9veloppeurs peuvent facilement suivre pour mettre en \u0153uvre l&rsquo;interaction dans le produit\/application final. <\/p>\n<h2>Comment les UX Leads peuvent utiliser les prototypes pour les projets de mises \u00e0 jour internes.<\/h2>\n<p>Lorsque Judit travaille sur des projets de d\u00e9veloppement de produits en tant qu&rsquo;UX Lead, elle et son \u00e9quipe travaillent g\u00e9n\u00e9ralement sur des am\u00e9liorations de produits\/applications\/sites web. Ces mises \u00e0 jour sont g\u00e9n\u00e9ralement destin\u00e9es \u00e0 des projets internes et impliquent des mises \u00e0 jour de leurs actifs UX et de leurs interfaces utilisateur. <\/p>\n<h3>G\u00e9n\u00e9rer des actifs UX<\/h3>\n<p>L&rsquo;\u00e9quipe cr\u00e9e ses propres biblioth\u00e8ques UX, avec des <a href=\"https:\/\/www.justinmind.com\/fr\/aide\/bibliotheques-widgets-ui\">actifs d&rsquo;interface utilisateur personnalis\u00e9s<\/a>, dans Justinmind. Celles-ci comprennent des \u00e9l\u00e9ments et des ic\u00f4nes interactifs de Scytl. La fonction de glisser-d\u00e9poser de l&rsquo;UI de Justinmind permet \u00e0 l&rsquo;\u00e9quipe de prototyper rapidement un nouveau produit ou une nouvelle fonctionnalit\u00e9 en faisant simplement glisser les \u00e9l\u00e9ments sur le canevas. La possibilit\u00e9 de cr\u00e9er ses propres actifs permet de maintenir une standardisation entre les d\u00e9partements et les niveaux de l&rsquo;entreprise lorsque des mises \u00e0 jour sont n\u00e9cessaires, ainsi que de cultiver la <strong>notori\u00e9t\u00e9 de la marque<\/strong> dans l&rsquo;ensemble de l&rsquo;organisation.  <\/p>\n<h3>Cr\u00e9ation de la pr\u00e9sentation de l&rsquo;UI<\/h3>\n<p>Ensuite, l&rsquo;\u00e9quipe cr\u00e9e une ligne directrice d&rsquo;une page avec tous les \u00e9l\u00e9ments de base affich\u00e9s. Cela leur permet de d\u00e9finir le design visuel du produit\/de l&rsquo;application. Les \u00e9l\u00e9ments UX d\u00e9finis dans Justinmind sont ensuite d\u00e9velopp\u00e9s en tant qu&rsquo;objets dans les biblioth\u00e8ques Front-end (HTML, CSS, JS), ce qui permet aux d\u00e9veloppeurs de les utiliser pour adapter rapidement l&rsquo;aspect et la convivialit\u00e9 conform\u00e9ment aux lignes directrices visuelles de Scytl. <\/p>\n<h3>Concevoir pour des publics diff\u00e9rents : ce qu&rsquo;il faut retenir<\/h3>\n<p>Le secret pour jongler avec des projets internes et externes et concevoir pour diff\u00e9rents utilisateurs cibles est d&rsquo;avoir une compr\u00e9hension profonde de votre public et de vos objectifs. Ce n&rsquo;est qu&rsquo;\u00e0 cette condition que vous pourrez vraiment produire des solutions qui tiennent la route. Un outil de prototypage interactif est un excellent moyen de concevoir pour un objectif et\/ou un groupe d&rsquo;utilisateurs sp\u00e9cifique. Cr\u00e9ez plusieurs \u00e9crans, ajoutez des <a href=\"https:\/\/www.justinmind.com\/fr\/aide\/modeles-masters\" target=\"_blank\" rel=\"noopener noreferrer\">mod\u00e8les et des styles<\/a> pour centraliser vos actifs UI autour des fonctionnalit\u00e9s du client et simulez votre prototype sur diff\u00e9rents appareils ou navigateurs &#8211; le tout dans le m\u00eame outil. Ensuite, vous <a href=\"https:\/\/www.justinmind.com\/fr\/aide\/justinminds-integration-avec-les-outils-de-test-des-utilisateurs\" target=\"_blank\" rel=\"noopener noreferrer\">testez votre solution<\/a> avec de vrais utilisateurs en temps r\u00e9el pour voir \u00e0 quel point elle sera efficace lorsque vous lancerez le produit final. T\u00e9l\u00e9chargez Justinmind d\u00e8s maintenant et prototypez des solutions pour vos groupes d&rsquo;utilisateurs sp\u00e9cifiques. <\/p>\n<p><em>Vous souhaitez figurer dans une \u00e9tude de cas de Justinmind ? Prenez contact avec nous via notre <a href=\"https:\/\/twitter.com\/just_in_mind\" target=\"_blank\" rel=\"noopener noreferrer\">poign\u00e9e Twitter<\/a>! <\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Prototypage d&rsquo;exp\u00e9riences utilisateur interactives pour les \u00e9quipes internes et les parties prenantes externes dans le cadre de la gouvernance \u00e9lectronique et du vote en ligne, Scytl<\/p>\n","protected":false},"author":11,"featured_media":90921,"parent":0,"menu_order":0,"template":"","tags":[8466,8412,8486,8473],"content_category":[],"class_list":["post-125092","tc_content_pillar","type-tc_content_pillar","status-publish","has-post-thumbnail","hentry","tag-etude-de-cas","tag-legacy-fr","tag-prototypage-interactif","tag-prototypes-interactifs"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tc_content_pillar\/125092"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tc_content_pillar"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/tc_content_pillar"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/11"}],"version-history":[{"count":3,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tc_content_pillar\/125092\/revisions"}],"predecessor-version":[{"id":125498,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tc_content_pillar\/125092\/revisions\/125498"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media\/90921"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=125092"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=125092"},{"taxonomy":"content_category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/content_category?post=125092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}