Blog

Actualité

<p><img class="alignnone size-full wp-image-4265" src="https://wp.smartagence.com/wp-content/uploads/2022/09/capture-decran-2019-01-24-a-17-21-24.png" alt="" width="616" height="181" /></p>
<p>&nbsp;</p>
<p>L’année 2018 a été marquée par de nouveaux clients, de beaux projets et de grands événements pour l’agence. En effet, en cette fin d’année les compagnons Smart Agence ont fermé les portes de la rue Geoffroy-Marie dans laquelle les bureaux étaient installés depuis 2004 pour ouvrir celles de <a href="https://twitter.com/SmartAgence/status/1085929962228645889" target="_blank" rel="noreferrer noopener" aria-label=" (s’ouvre dans un nouvel onglet)">locaux flambant neufs</a>, rue de Paradis dans le 10e arrondissement.</p>
<p>Nous avons découvert avec joie à cette même période que Smart Agence confirme sa place parmi les leaders des agences spécialisées en <em>conseil marketing et communication</em> dans la 162<sup>e </sup>édition du magazine Décideurs<sup>(</sup>. Ce classement désigne chaque année les agences digitales à forte notoriété sur le marché français. Notre présence dans plusieurs catégories est le témoignage du dynamisme de notre activité et de notre positionnement hybride « Conseil &amp; Design ».</p>
<h3>Smart Agence, dans le top 4 des agences incontournables de l’expérience utilisateur</h3>
<p>Cœur de notre métier, notre démarche UX s’incarne à travers deux piliers :</p>
<ul>
	<li><strong>L’observation et l’étude</strong> des comportements utilisateur. La recherche utilisateur est indispensable à tout projet qui s’inscrit dans une démarche UX. Elle permet d’identifier des pistes d’amélioration grâce notamment à des Focus groups, Etudes ethnographiques et sociologiques, Tests utilisateurs, tests A/B et eye tracking, Analyse statistiques de la performance, Data mining, etc.</li>
	<li><strong>Le design de solutions digitales</strong> innovantes qui optimise la performance du dispositif existant à travers des parcours et architecture de l’information, Design UX / UI, Création graphique, Prototypage haute définition et Spécifications.</li>
</ul>
<div class="wp-block-button aligncenter"> </div>
<h3>Smart Agence, forte notoriété en conseil &amp; stratégie</h3>
<p>Le magazine Décideurs nous distingue également en tant qu’agence à forte notoriété dans la catégorie « agences spécialisées en conseil &amp; stratégie ». Véritable ADN de notre travail, le conseil fait partie intégrante de notre approche design. À chaque étape du projet, ces deux dimensions coexistent et s’expriment à travers notre accompagnement. </p>
<p>Notre expertise conseil s’incarne à travers deux piliers :</p>
<ul>
	<li><strong>La définition de votre stratégie digitale</strong> : nous vous accompagnons pour définir et mettre en œuvre les meilleures stratégies digitales grâce à des outils tels que des audits, benchmarks, diagnostics, études d’opportunités, plan d’actions opérationnels, etc.</li>
	<li><strong>L’accompagnement dans votre transformation digitale</strong> : la plupart du temps en renforçant vos équipes, nous vous apportons un soutien dans le pilotage et l’organisation de vos projets de transformation digitale. Nous vous accompagnons tout au long du cycle de vie de vos projets, depuis la définition du besoin jusqu’au déploiement opérationnel des solutions.</li>
</ul>
<div class="wp-block-button aligncenter"> </div>
<h3>Smart Agence, forte notoriété en développement de sites et d’applications</h3>
<p>Ce troisième classement des agences à forte notoriété « spécialisées dans le développement de sites et d’applications » est le fruit de la mise en œuvre opérationnelle de nos projets.</p>
<p>Composante important du design de solutions digitales, nos <strong>prototypes HTML</strong> représentent l’ensemble des interactions du futur dispositif. L’ensemble des pages sont optimisées en matière de <strong>référencement naturel</strong> au travers de conception <strong>multi-devices via Bootstrap.</strong> Ce design d’interactions respecte toutes les exigences techniques telles que le Privacy by design, les normes d’accessibilité <strong>W3C</strong> et les <strong>bonnes pratiques Opquast</strong>.</p>

Concevoir un design system pour un client : cinq conseils pour prendre un bon départ

<h2>1. <strong>Un design system, vraiment ?</strong></h2>
<p>La question peut paraître élémentaire mais elle est pourtant bien légitime. Entre l’effet de mode, l’envie d’innover et parfois la pression client, il est très facile de se jeter tête baissée dans une telle entreprise alors que ce n’est pas toujours nécessaire, ou même possible. Il faut donc se poser la bonne question.</p>
<h3><strong>Un design system va-t-il vraiment me faciliter la vie ?</strong></h3>
<p>OUI, dans 95% des cas un design system vous fera gagner du temps en apportant de la consistance et de la fluidité dans tous vos processus de design, de la phase de conception à la phase de développement. Mais ce sera seulement suite à la mise en ligne de votre dispositif que les choses sérieuses commenceront : évangélisation, formation des équipes, maintiens et mise à jour des éléments, partage avec les collaborateurs, gestion de la gouvernance etc. seront autant de missions que vous aurez à gérer au quotidien. C’est pour cela qu’il faudra décider en amont si le temps passé et les ressources qui seront affectées à votre design system sont à votre portée et ne transformeront pas votre projet en un gouffre financier et temporel oblitérant tous les avantages cités plus haut.</p>
<p>Il n’est cependant pas nécessaire d’abandonner complètement l’idée d’un design system si vous ne pensez pas être en mesure de le faire vivre, mais peut-être simplement de revoir vos ambitions à la baisse en dimensionnant correctement votre outil. </p>
<h2>2. <strong>Bien dimensionner son design system</strong></h2>
<p>Couleurs, styles de texte, iconographie, guidelines, composants, interactions, accessibilité son, spécifications fonctionnelles, code : les éléments qui peuvent composer un design system sont aussi nombreux que variés mais suis-je obligé de tous les intégrer ? Bien sûr que non, mais plus votre design system sera riche, plus il sera solide et plus il sera à même de remplir sa fonction fédératrice. </p>
<p>Il faudra commencer très tôt à lister l’ensemble des éléments que vous souhaitez intégrer, puis les prioriser tout en y associant les ressources (humaines, matérielles, temporelles) nécessaires à leur mise en place. En procédant ainsi vous aurez une première feuille de route suffisamment précise qui vous permettra d’aborder le projet sereinement. </p>
<p>Le design system étant un dispositif évolutif il est tout à fait possible de commencer modestement et de petit à petit venir l’enrichir jusqu’à obtenir le résultat escompté. Si vous travaillez par exemple sur Sketch, le simple fait d’utiliser la méthode Atomic Design et d’organiser correctement votre fichier source constitue déjà une première version de design system.</p>
<h2>3. <strong>Dispositif final et design system: deux projets différents</strong></h2>
<p>Même s’ils sont étroitement liés, un dispositif et son design system (quelles que soient leurs tailles) sont deux éléments bien distincts et doivent donc être traités comme tels. C’est un projet à part entière qui si comme nous, vous utilisez la méthode Design Thinking, devra suivre les mêmes étapes : Exploration –&gt; Cadrage –&gt; Conception –&gt; Développement.</p>
<p>Cette mise en parallèle est importante et permettra d’allouer plus facilement les ressources aussi bien humaines que matérielles. Elle permettra également de faire avancer les deux projets de manière indépendante : une pause sur le projet principal n’empêchera pas de continuer à enrichir le design system et inversement.</p>
<h2>4. <strong>Choisir les bons outils</strong></h2>
<p>De plus en plus d’outils permettent de faciliter la mise en place des designs systems, mais tout comme pour les outils de design (Sketch, Figma, Photoshop, etc.) la bataille fait rage et le choix est de plus en plus difficile. Cependant, pas d’inquiétudes nous allons passer en revue quelques-unes des options qui s’offrent à vous.</p>
<h3><strong>Les outils payants qui proposent des solutions clés en main</strong></h3>
<p>InvisionDSM, Zeroheight, Lingo sont autant de qui plateformes qui proposent des solutions d’hébergement prêtes à l’emploi. <br />
Moyennant un coût mensuel/annuel ces plateformes proposent en général : </p>
<ul>
	<li>Une structure “prémâchée” permettant d’accueillir les divers éléments de votre dispositif (gabarits, modules, code, documentation, etc)</li>
	<li>Des outils de synchronisation avec les logiciels de design (Sketch, Figma, XD etc.) permettant de faciliter le maintien à jour du Design System pour des profils non-développeur</li>
	<li>La gestion utilisateurs (gestions des droits, autorisations etc.)</li>
	<li>Un back-office prêt à l’emploi</li>
	<li>Des coûts pouvant être assez élevés pour les versions “Entreprises” (plusieurs milliers d’euros par an, mais assez fluctuant d’une plateforme à l’autre).</li>
	<li>Les plateformes ne sont pas ou peu personnalisables (structure du Design system, Branding etc.)</li>
	<li>Dépendance forte à la plateforme (mise à jour, fonctionnalités etc.)</li>
</ul>
<h3><strong>Le dispositif ex nihilo</strong></h3>
<p>La deuxième alternative consiste à développer une plateforme propriétaire permettant de répondre à l’ensemble de ses besoins. </p>
<ul>
	<li>Grande liberté : fonctionnalités, structure, hébergement, gestion des droits. Aucune dépendance.</li>
	<li>Plateforme sur-mesure et évolutive selon les besoins</li>
	<li>Pas de synchronisation avec les outils de design (à moins de mettre en place son propre outil…)</li>
	<li>Si pas de back-office dédié, la mise en place des évolutions est plus compliquée</li>
	<li>Efforts de mise en place initial très importants si l’on souhaite utiliser des fonctionnalités avancées telles qu’un back-office ou un outil de synchronisation etc.</li>
</ul>
<p>Ces deux propositions représentent les “extrêmes” mais il existe évidemment une myriade de solutions intermédiaires qui pourront sûrement correspondre à vos besoins, mais que nous vous laissons découvrir par vous-même…</p>
<h2>5. <strong>S’adresser aux bonnes personnes</strong></h2>
<p>En tant qu’agence, le design system ne s’adressera pas uniquement à nos collaborateurs, mais bien au client qui devra finalement le prendre en main et le faire vivre. Il est donc très important d’identifier et d’inclure dès le début du processus toutes les personnes qui seront de près ou de loin en contact avec le design system.</p>
<p>La logique de celui qui a mis en place le design system doit être partagée et comprise dès les prémices du projet et inclure le plus de profils possible : chefs de projet, designers UX/UI, développeurs etc...).<br />
Des incompréhensions et des zones de flou conduiront inévitablement à des frictions dès que le projet commencera à être bien avancé.</p>
<p>Des points d’avancement pourront être mis en place régulièrement afin que tout le monde soit toujours en phase avec la vision du design system, l’idée étant qu’à la livraison tout le monde soit à même d’utiliser ces merveilleux outils dans les meilleures conditions.</p>

Flupa UX Days 2018 la conférence Smart Agence

Smart Agence, acteur incontournable de l’expérience utilisateur

<h2>Objectifs</h2>
<ul>
	<li>Donner une image attractive de l’association,</li>
	<li>Moderniser l’image de l’assurance-vie pour en faire un réflexe pour tous les projets de vie,</li>
	<li>Faciliter la mise en relation avec des conseillers et augmenter le nombre d’adhérents,</li>
	<li>Simplifier et rendre intuitive la lecture et l’expérience proposée sur le site.</li>
</ul>
<h2> </h2>
<h2>Éléments marquants du nouveau dispositif</h2>
<ul>
	<li>Une approche centrée utilisateurs avec des entrées par projet de vie,</li>
	<li>Un module de recherche de conseillers impactant et performant,</li>
	<li>Une mise en avant des événements organisés par l’Afer.</li>
</ul>
<h2> </h2>
<h2>Démarche</h2>
<ul>
	<li>Immersion dans les enjeux, usages actuels et site existant,</li>
	<li>Exploration et cadrage à travers 4 ateliers collaboratifs,</li>
	<li>Conception et formalisation à travers des réunions de travail et le design des wireframes, maquettes graphiques et prototypes HTML, rédaction des spécifications,</li>
	<li>Réalisation et mise en ligne à travers les développements techniques, recette, formation au back-office, saisie des contenus, audits de sécurité et mise en ligne.</li>
</ul>
<p>&nbsp;</p>
<h2>Profils associés</h2>
<p>Directeur conseil, chef de projet, UX strategist, designer UX/UI, directrice artistique, designer d’interaction, directeur technique, développeurs.<br />
<br />
<br />
</p>

Smart Agence membre du groupe de travail designers interactifs 2018

<h2>Objectifs de la mission</h2>
<ul>
	<li>Créer un tableau périodique interactif avec des données attractives, accessibles et évolutives,</li>
	<li>Créer une interface qui réponde aussi bien au grand public qu’aux experts grâce à des niveaux de lecture différents,</li>
	<li>Devenir le site de référence francophone.</li>
</ul>
<h2> </h2>
<h2>Éléments marquants du nouveau dispositif</h2>
<ul>
	<li>Une approche graphique, rendant le contenu agréable à consulter ​tout​ ​en​ ​conservant​ ​une​ ​tonalité​ ​experte,</li>
	<li>Une approche ergonomique, proposant un parcours utilisateur simple et intuitif,</li>
</ul>
<h2> </h2>
<h2>Démarche projet</h2>
<ul>
	<li>Exploration &amp; Cadrage à travers deux ateliers collaboratifs,</li>
	<li>Conception &amp; Formalisation à travers le design des wireframes, la conception graphique, l’intégration HTML et les spécifications fonctionnelles,</li>
	<li>Développement &amp; Mise en ligne à travers les développements techniques, la recette et la saisie des contenus et mise en ligne.</li>
</ul>
<h2> </h2>
<h2>Profils associés</h2>
<p>Planeur stratégique, designer UX/UI, directrice artistique, designer d’interaction, développeur front/back-end, chef de projet.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img class="alignnone size-medium wp-image-4194" src="https://wp.smartagence.com/wp-content/uploads/2022/09/elementarium-small-1-300x261.jpeg" alt="" width="300" height="261" /> <img class="alignnone size-full wp-image-4193" src="https://wp.smartagence.com/wp-content/uploads/2022/09/elementarium-small-2.jpeg" alt="" width="450" height="480" /></p>

Groupe Agrica - Intégration d’un nouvel espace

Notre atelier au 17e séminaire francophone de la collecte de fonds

<h2>Objectifs</h2>
<ul>
	<li>Proposer une ​offre globale de protection sociale complémentaire aux branches et entreprises qui sont proches du ​monde agricole,</li>
	<li>Amorcer le discours commercial du Groupe Agrica sur d’autres marchés.</li>
</ul>
<h2> </h2>
<h2>Notre réponse</h2>
<ul>
	<li>Un parcours global simple, transparent, et sans rupture,</li>
	<li>Un site unique, qui met en avant un discours commercial et des canaux d’échanges adaptés à chacune des cibles,</li>
	<li>Une architecture de l’information qui met l’offre au centre,</li>
	<li>Une interface animée, qui favorise la prise de contact,</li>
	<li>Une conception avec une approche responsive design.</li>
</ul>
<h2> </h2>
<h2>Démarche</h2>
<ul>
	<li>Conception &amp; Formalisation à travers 3 réunions de travail sur l’ajustement et validation des éléments : arborescence, identité graphique, ergonomie, fonctionnalités, contenus et SEO,</li>
	<li>Mise à jour de la page d’accueil proposée en appel d’offres,</li>
	<li>Conception de 4 gabarits/modules complémentaires,</li>
	<li>Création des éléments graphiques à intégrer sur le site Groupe,</li>
	<li>Accompagnement éditorial et SEO,</li>
	<li>Intégration HTML du site statique et des contenus de l’espace Agrica Prévoyance.</li>
</ul>
<h2> </h2>
<h2>Profils associés</h2>
<p>Directeur conseil, UX Strategist, trafic manager, designer UX/UI, directrice artistique, designer d’interaction, développeur front/back-end.</p>
<p>&nbsp;</p>
<p><img class="alignnone size-medium wp-image-4188" src="https://wp.smartagence.com/wp-content/uploads/2022/09/agrica-prevoyance-small-1-298x300.jpeg" alt="" width="298" height="300" /><img class="alignnone size-medium wp-image-4187" src="https://wp.smartagence.com/wp-content/uploads/2022/09/agrica-prevoyance-small-2-300x241.jpeg" alt="" width="300" height="241" /></p>

BPI France - accompagnement et pilotage

Réalisation​ ​d’un tableau​ ​périodique pour France Chimie et SCF

<main class="reference__body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<div id="primary" class="content-area">
<div id="main" class="site-main" role="main">
<article id="post-4552" class="enl-post-single post-4552 post type-post status-publish format-standard hentry category-references tag-banques-asset-managers">
<div class="post-entry-content">
<h2>Les objectifs</h2>
<ul>
	<li>Optimiser le parcours des utilisateurs,</li>
	<li>Faciliter les mises en relation entre les entrepreneurs, leurs associés et les professionnels de l’accompagnement,</li>
	<li>Apporter de la visibilité aux financeurs sur les actions menées par les organismes d’accompagnement qu’ils financent,</li>
	<li>Fidéliser les clients professionnels et apporter des services à valeur ajoutée pour leurs quotidiens.</li>
</ul>
<h2> </h2>
<h2>Notre réponse</h2>
<ul>
	<li>Retranscrire les nouvelles orientations de l’Agence dans le positionnement du site,</li>
	<li>Proposer un dispositif efficace tout en répondant à des attentes hétérogènes,</li>
	<li>S’assurer de la bonne continuité de service notamment d’un point de vue technique et en termes de visibilité,</li>
	<li>Articuler le dispositif autour des moments de vie des entrepreneurs.</li>
</ul>
<h2> </h2>
<h2>Démarche</h2>
<ul>
	<li>Interview et focus group de l’ensemble des cibles du site,</li>
	<li>Atelier d’idéation  et de recherche d’opportunités,</li>
	<li>Rédaction d’une recommandation stratégique,</li>
	<li>Rédaction du cahier des charges et aide à la sélection du prestataire,</li>
	<li>Accompagnement au pilotage du projet et assistance à la recette.</li>
</ul>
<h2> </h2>
<h2>Profils associés</h2>
<p>Consultant AMOA, Directeur conseil UX Strategist</p>
<p>&nbsp;</p>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</main>
<div class="reference__screenshots">
<div class="container">
<div class="row">
<div class="refscreenshot-a"><img class="alignnone size-medium wp-image-4177" src="https://wp.smartagence.com/wp-content/uploads/2022/09/bpi-france-small-1-298x300.jpeg" alt="" width="298" height="300" /> <img class="alignnone size-medium wp-image-4178" src="https://wp.smartagence.com/wp-content/uploads/2022/09/bpi-france-small-2-281x300.jpeg" alt="" width="281" height="300" /></div>
</div>
</div>
</div>

Audit et optimisation de l’extranet OPCA/Formation

<h2>Enjeux de la mission</h2>
<ul>
	<li>Limiter les irritants utilisateurs,</li>
	<li>Optimiser la cohérence ergonomique et graphique de l’espace client,</li>
	<li>Créer un design émotionnel à travers une interaction personnalisée pour rendre l’expérience utilisateur plus agréable et mémorable.</li>
</ul>
<p>&nbsp;</p>
<h2>Éléments marquants du nouveau dispositif</h2>
<ul>
	<li>Amélioration de l’accompagnement de l’utilisateur :

<ol>
	<li>Normer et optimiser les messages d’information contextuels,</li>
	<li>Fluidifier l’accompagnement des utilisateurs à travers l’intégration de micro-interactions,</li>
	<li>Concevoir une interface interactive personnalisée pour rendre l’expérience utilisateur plus immersive.</li>
</ol>
</li>
	<li>Optimisation de la navigation principale :

<ol>
	<li>Harmoniser et <span style="color: #ff00ff;">optimation</span> de la sémantique pour faciliter le guidage,</li>
	<li>Optimisation de la navigation à travers la refonte des parcours les plus profonds.</li>
</ol>
</li>
	<li>Optimisation des parcours de recherche en optimisant l’accès et l’ergonomie des pages de recherche,</li>
	<li>Création d’un e-mailing relationnel.</li>
</ul>
<h2> </h2>
<h2>Démarche projet</h2>
<ul>
	<li>Audit et diagnostic, à travers trois types d’analyses. Une analyse statistique, une analyse des comportements via les cartes de chaleur et une analyse des parcours utilisateurs,</li>
	<li>Recommandation d’optimisation et plan d’action,</li>
	<li>Optimisation des interfaces à travers la conception et réalisation ergonomique et graphique.</li>
</ul>
<h2> </h2>
<h2>Profils associés</h2>
<p>Directeur conseil, chef de projet, UX strategist, UX designer, directeur artistique, designer d’interaction.</p>

Autorité des marchés financiers

<h2>Objectifs de la mission</h2>
<p>Analyser et optimiser les futurs gabarits du site Internet afin de :</p>
<ul>
	<li>Améliorer l’image de l’AMF et renforcer la visibilité et la lisibilités des messages,</li>
	<li>Faciliter l’accès à l’information et la documentation recherchée et attendue,</li>
	<li>Mettre en place un socle évolutif et souple permettant de répondre à une accélération des changements métiers,</li>
	<li>Répondre à des usages utilisateurs ayant évolués depuis la création des interfaces.</li>
</ul>
<h2> </h2>
<h2>Notre réponse</h2>
<ul>
	<li>Proposer une approche centrée utilisateur qui permet de répondre de manière adaptée et spécifique aux demandes de l’AMF,</li>
	<li>Explorer les attentes et les objectifs de la refonte à travers les livrables (gabarits, CCTP, parcours utilisateurs…),</li>
	<li>Donner un point de vue UX/UI sur l’expérience proposée et analyser les écarts avec les nouveaux usages et les nouvelles règlementations,</li>
	<li>Optimiser les gabarits réalisés au préalable.</li>
</ul>
<h2> </h2>
<h2>Démarche</h2>
<ul>
	<li>Audit et diagnostic,</li>
	<li>Recommandations d’optimisations,</li>
	<li>Interview et Focus group,</li>
	<li>Reprise de l’arborescence,</li>
	<li>Conception et réalisation ergonomique et graphique,</li>
</ul>
<h2> </h2>
<h2>Profils associés</h2>
<p>UX Strategist, Designer UX/UI, directrice artistique,  consultant AMOA, chef de projet.</p>

L’atomic design, une méthode de conception adaptée aux enjeux actuels du numérique

<h2>Les origines de l’Atomic Design &amp; le Design System</h2>
<p>En 2013, Brad Frost, un webdesigner, publie <a href="http://bradfrost.com/blog/post/atomic-web-design/" target="_blank" rel="noreferrer noopener" aria-label=" (s’ouvre dans un nouvel onglet)">un billet sur son blog</a> à propos d’une nouvelle conception d’interfaces qu’il avait créé. Il observait que pour répondre à des enjeux d’interfaces de plus en plus complexes, fluctuants et instables, les Design Systems devaient évoluer. Ils étaient trop focalisés sur les éléments de la charte graphique : trop statiques par rapport aux nouveaux enjeux numériques. C’est ainsi que l’Atomic Design est né.</p>
<p>Un très bel exemple de Design System en Atomic Design : <a href="https://material-ui.com/" target="_blank" rel="noreferrer noopener" aria-label=" (s’ouvre dans un nouvel onglet)">Material Design by Google.</a><br />
<br />
<img class="alignnone size-medium wp-image-4155" src="https://wp.smartagence.com/wp-content/uploads/2022/09/capture-decran-2019-03-14-a-11-23-18-1-1024x701-1-300x205.png" alt="" width="300" height="205" /><img class="alignnone size-medium wp-image-4154" src="https://wp.smartagence.com/wp-content/uploads/2022/09/capture-decran-2019-03-14-a-11-26-07-1024x719-1-300x211.png" alt="" width="300" height="211" /><br />
<br />
<br />
</p>
<h2>Pour quels types de projets ?</h2>
<p>Tous les projets peuvent accueillir de l’Atomic Design ! L’intérêt de cette méthode est qu’elle permet d’avoir une vue globale. Une conception évolutive &amp; homogénéisée sur l’ensemble des supports exploités. Enfin, elle facilite la création d’un environnement de marque pour l’utilisateur à travers l’ensemble du dispositif digital.</p>
<h2>L’Atomic Design, un environnement évolutif</h2>
<p>Il permet une généralisation de composants d’interface sur tout un produit (que ce soit un site web, une application ou autre) avec grande facilité. Il fonctionne comme une véritable bibliothèque dynamique dont tout est issu, des composants jusqu’à la notice d’utilisation.</p>
<p>La page web était dans sa conception relativement fixe, statique et délimitée. Elle héritait ses modalités de conception de la mise en page des livres. Or les enjeux de la création numérique imposent maintenant une conception facilement modifiable, car les contenus doivent être disponibles immédiatement, partout et sur tous les supports. L’Atomic Design, par son concept de composants interchangeables, s’adapte donc parfaitement à ces nouveaux enjeux business et utilisateurs actuels très fluctuants.<br />
“We’re not designing pages, we’re designing systems of components”.</p>

<h2>Comment utiliser l’Atomic Design dans la pratique ?</h2>
<p>Il doit être pensé comme un environnement global, en l’occurrence celui du client. Avant d’introduire la notion d’identité de marque, voici une définition un peu plus nette des différents composants de l’Atomic Design.<br />
<img class="alignnone size-full wp-image-4143" src="https://wp.smartagence.com/wp-content/uploads/2022/09/1-atomes-pictogramme.jpeg" alt="" width="163" height="163" /><br />
<img class="alignnone size-full wp-image-4147" src="https://wp.smartagence.com/wp-content/uploads/2022/09/2-molecules-pictogramme.jpeg" alt="" width="163" height="163" /><br />
<img class="alignnone size-full wp-image-4148" src="https://wp.smartagence.com/wp-content/uploads/2022/09/3-organismes-pictogramme.jpeg" alt="" width="163" height="163" /><br />
<img class="alignnone size-full wp-image-4149" src="https://wp.smartagence.com/wp-content/uploads/2022/09/4-template-pictogramme.jpeg" alt="" width="163" height="163" /> <img class="alignnone size-medium wp-image-4150" src="https://wp.smartagence.com/wp-content/uploads/2022/09/5-pages-pictogramme.jpeg" alt="" width="163" height="163" /></p>

<h3>/Les atomes</h3>
<p>&nbsp;</p>
<p><img class="size-full wp-image-4143 alignleft" src="https://wp.smartagence.com/wp-content/uploads/2022/09/1-atomes-pictogramme.jpeg" alt="" width="163" height="163" />Les atomes définissent la base de cette méthodologie. Seuls, ils sont abstraits mais assemblés, ils forment des molécules et composent toutes les interfaces : bouton, blocs de texte, etc. Par ailleurs, chaque atome est créé pour porter le concept d’image de marque à l’intérieur de la conception. Assemblés, ils forment des molécules.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><strong>Voici un exemple :</strong></p>
<p><img class="alignnone size-full wp-image-4373" src="https://wp.smartagence.com/wp-content/uploads/2022/09/1-atomes-768x2745-1-scaled.jpeg" alt="" width="716" height="2560" /></p>

<h3>/Les molécules</h3>
<p><img class="size-full wp-image-4147 alignleft" src="https://wp.smartagence.com/wp-content/uploads/2022/09/2-molecules-pictogramme.jpeg" alt="" width="163" height="163" /></p>
<p>Les molécules sont une alliance d’atomes et ont leurs propres propriétés. Elles sont les premiers éléments structurants de l’Atomic. Elles sont modifiables et réutilisables très facilement. Assemblées, elles forment des organismes.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><strong>Voici un exemple :</strong></p>
<p>&nbsp;</p>
<p><img class="alignnone size-full wp-image-4374" src="https://wp.smartagence.com/wp-content/uploads/2022/09/2-molecules-439x1024-1.jpeg" alt="" width="439" height="1024" /></p>

<h3>/Les organismes<br />
<br />
</h3>
<p><img class="size-full wp-image-4148 alignleft" src="https://wp.smartagence.com/wp-content/uploads/2022/09/3-organismes-pictogramme.jpeg" alt="" width="163" height="163" /></p>
<p>C’est ici que la conception commence à prendre forme avec des parties distinctes de l’interface. Une même molécule peut profiter à plusieurs organismes.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><strong>Par exemple :</strong> la molécule de fonction “Rechercher” du header de l’exemple ci-dessous, se retrouve aussi à l’intérieur d’une page contenant une recherche contextuelle.</p>
<p>&nbsp;</p>
<p><img class="alignnone size-full wp-image-4375" src="https://wp.smartagence.com/wp-content/uploads/2022/09/3-organisme-510x1024-1.jpeg" alt="" width="510" height="1024" /></p>

<h3>/Templates</h3>
<p>&nbsp;</p>
<p><img class="size-full wp-image-4149 alignleft" src="https://wp.smartagence.com/wp-content/uploads/2022/09/4-template-pictogramme.jpeg" alt="" width="163" height="163" /></p>
<p>Les templates résultent de nombreux groupes d’organismes entre eux. La conception commence à prendre sens, à raconter une expérience, le client peut commencer à se projeter sans difficultés.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img class="alignnone size-full wp-image-4376" src="https://wp.smartagence.com/wp-content/uploads/2022/09/4-template-585x1024-1.jpeg" alt="" width="585" height="1024" /></p>
<p>&nbsp;</p>

<h3>/Pages</h3>
<p>&nbsp;</p>
<p><img class="size-full wp-image-4150 alignleft" src="https://wp.smartagence.com/wp-content/uploads/2022/09/5-pages-pictogramme.jpeg" alt="" width="163" height="163" />Les pages sont la dernière étape de cette méthode. C’est ici que l’interface globale prend forme et permet de prendre du recul sur la conception globale.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img class="alignnone size-full wp-image-4377" src="https://wp.smartagence.com/wp-content/uploads/2022/09/5-pages-585x1024-1.jpeg" alt="" width="585" height="1024" /></p>

<h2>Dans la pratique</h2>
<p>&nbsp;</p>
<h3>Trois grandes phases :</h3>
<p><strong>La première phase</strong> est la création du Design System traduisant ce que vous souhaitez refléter comme identité de marque en termes d’image et de valeurs. Le Design System sera donc porteur aussi bien du style de wording, de la typographie, des visuels etc.</p>
<p><strong>La deuxième phase </strong>est de lister les fonctionnalités et le contenu de votre futur produit qui vont trouver place dans l’interface. Pensée indépendamment de la conception, elle permettra aux designers de se concentrer sur l’ergonomie et l’expérience au global en troisième phase.</p>
<p><strong>La troisième phase </strong>est de définir une librairie de composants (atomes, molécules, organismes, templates). Tout commence par les atomes, porteurs de votre identité de marque à travers le futur environnement numérique de votre produit.</p>
<p>Ensuite, vos composants devront être établis à partir de vos insight autant en matière de désirabilité, faisabilité et viabilité (principes essentiels du Design Thinking).<br />
<br />
<br />
</p>
<h2>Les Avantages &amp; Inconvénients en Take Away<br />
<br />
</h2>
<h3><strong>Avantages</strong></h3>
<ul>
	<li>Une méthode de conception dont l’identité de marque est pensée dès les atomes qui la ré-affirment sans cesse à travers l’expérience,</li>
	<li>Par sa conception décomposée en éléments, l’Atomic Design procure un certain recul sur le design,</li>
	<li>Une homogénéisation simple des interfaces à travers l’expérience utilisateurs,</li>
	<li>Pensée sous le paradigme de l’évolution, la bibliothèque saura résister au temps et être flexible face aux besoins utilisateurs,</li>
	<li>Une fois en place, les itérations profiteront d’un ratio gain/temps optimisé,</li>
	<li>Chaque élément est codable, cela crée et participe d’un bel esprit de collaboration entre designers &amp; développeurs,</li>
	<li>Enfin, il y a une vraie liberté de langage (CSS, React etc), pour s’intégrer au mieux au projet.  </li>
</ul>
<h3>Inconvénients</h3>
<ul>
	<li>Cette méthode demande une réelle discipline, autant pour les designers que les développeurs,</li>
	<li>La catégorisation des éléments entre atomes/molécules/organismes/templates peut parfois être un peu compliqué,</li>
	<li>L’Atomic Design a beau être très puissant, il est quelque peu limitant en terme de liberté pour les développeurs,</li>
	<li>La collaboration entre les designers &amp; développeurs peut parfois être difficile avec un Design System, il est donc important d’avoir une documentation liée,</li>
	<li>Enfin, l’Atomic peut nécessiter plus de temps lors de l’implémentation  mais permet de gagner beaucoup de temps sur le moyen et long-terme.</li>
</ul>
<h2><strong>Conclusion</strong></h2>
<p>La présence des entreprises sur le digital est en expansion continue. Pour certaines, elle a même atteint une phase de maturité dans laquelle les projets de refonte globale ne sont plus envisagés, au profit de la mise en place d’une stratégie d’amélioration continue.</p>
<p>Dans ce contexte, la méthode de conception de l’Atomic Design est une opportunité à embrasser. Elle donne la possibilité de concevoir son dispositif dans une optique long-termiste pour asseoir une identité de marque forte, pérenne et maîtrisée.</p>
<p>Enfin, elle limite les coûts des optimisations futures grâce à un système homogène.</p>
<ul>
	<li><a href="https://newflux.fr/2017/09/01/avantages-de-latomic-design-appliquer-methode/">Les avantages de l’atomic design</a></li>
	<li><a href="https://medium.muz.li/building-design-systems-with-atomic-design-93a13286f676">Building design Systems with atomic design</a></li>
	<li><a href="http://bradfrost.com/blog/post/atomic-web-design/">Atomic web design</a></li>
	<li><a href="https://material-ui.com/">Material UI</a></li>
</ul>

Refonte du site de Groupe Agrica

<h2>Objectifs de la refonte</h2>
<ul>
	<li>Rationalisation technique de l’environnement digital existant,</li>
	<li>Mise en avant de manière fluide la nouvelle offre Agrica Prévoyance,</li>
	<li>Adresser les contenus et l’organisation du site en priorité aux prospects d’Agrica Prévoyance tout en consolidant le lien avec la clientèle actuelle.</li>
</ul>
<h2>Éléments marquants du nouveau dispositif</h2>
<ul>
	<li>Une architecture de l’information centrée utilisateurs et fonctionnelle,</li>
	<li>Une offre claire, un parcours utilisateur qui permet de trouver ​facilement et ​avec certitude l’offre adaptée,</li>
	<li>Une redirection des internautes vers l’espace personnel et une information sur les services qu’il offre,</li>
	<li>Des calls-to-action pour prendre contact avec un commercial ou le service client à tout moment.</li>
</ul>
<h2>Démarche du projet</h2>
<ul>
	<li>Immersion dans les enjeux, usages actuels et site existant,</li>
	<li>Exploration &amp; Cadrage à travers 6 ateliers collaboratifs,</li>
	<li>Conception &amp; Formalisation à travers 3 réunions de travail et le design des wireframes, maquettes graphiques et prototypes HTML, rédaction des spécifications,</li>
	<li>Réalisation &amp; Mise en ligne à travers les développements techniques, recette, formation, saisie des contenus et mise en ligne.</li>
</ul>
<h2>Profils associés</h2>
<p>Directeur conseil, UX Strategist, designer UX/UI, directrice artistique, designer d’interaction, directeur technique, développeur front/back-end, chef de projet.</p>

Refonte du site du Groupe La Française

Évènement

<h2><img class="alignnone size-full wp-image-4254" src="https://wp.smartagence.com/wp-content/uploads/2022/09/capture-decran-2018-04-26-a-18-26-49.png" alt="" width="1400" height="186" /></h2>
<h2>« Retour d’expériences sur l’UX Research avec pénurie de moyens »</h2>
<p>Animateur : <strong>Olivier Hournau, Directeur pôle design</strong><br />
Date/Heure : <strong>Vendredi 15 juin 2018, 14h15 – 15H15</strong><br />
Lieu : <strong>Cité des sciences et de l’industrie</strong></p>
<p>La recherche utilisateur est indispensable à tout projet qui prétend s’inscrire dans une démarche UX. Pourtant, dans les faits, il faut faire appel à un sens aigu de la frugalité pour réaliser cette étape essentielle dans la compréhension utilisateur.</p>
<p>Quelle stratégie adopter, quelles techniques retenir, comment multiplier les angles pour recueillir une vision utilisateur sans dénaturer et faire des concessions de méthode ?</p>
<p>L’intervention s’articule autour de la présentation de différents cas concrets d’application de technique de recueil, d’observation, d’auto-expérimentation, de coconstruction et de réalisation de test.</p>
<p>Un passage en revue de techniques simples dans une économie de moyen. Avec un regard sur les forces et faiblesses de chacun, leurs biais assumés et leurs efficacités constatées.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

AFER : Refonte du site institutionnel

Étude de cas

Fondations &amp; Associations

en refondant le site institutionnel pour développer la collecte en ligne, valoriser les contenus à forte valeur ajoutée et moderniser l’image.

pour renforcer son positionnement sur le web, augmenter l’acquisition de trafic via le canal digital, renforcer le positionnement de la Fondation Arc et développer la collecte en ligne.

pour développer la visibilité du nouveau site et améliorer l’e-réputation de la Fondation sur le digital.

pour maximiser l’expérience utilisateur et la collecte en ligne.

ONF : Refonte du site amiral et des sites satellites

Secteur public

en proposant une déclinaison graphique sur tout l'écosystème de l’ONF.

et non centrée sur l’organisation et la technique, via des parcours utilisateurs optimisés au sein des différents sites de l’écosystème.

par la création d’un site amiral autour duquel gravitent des sites thématiques spécifiques.

Refonte et création de modules et pages au sein du site web

Stratégie et dispositif digital

Industries &amp; Services

Objectifs site Internet

Problématique site Internet

avec un faible nombre de pages et une profondeur d’un seul niveau.

distinguant les besoins spécifiques à chaque profil utilisateur et les besoins transverses.

par section avec possibilité d’accès rapide à chaque section, une volonté de bien distinguer les typologies d’action et d'offrir une variété de traitement de contenus pour apporter clarté et dynamisme.

Refonte du site amiral et des sites satellites

Finance &amp; Asset management

pour la gestion des contenus multilingues et pour la télétransmission des actualités sur les autres sites partenaires.

pour chaque type de profil, plus ou moins engagés dans son parcours professionnel ou ses ambitions environnementales.

pour faciliter la navigation et la recherche des produits & services en fonction de chaque profil. 
Et des contenus personnalisés en fonction des profils utilisateurs.


garantissant la disponibilité, la fiabilité et la sécurité de tous les sites. 
Mais aussi permettant de répondre aux nouvelles attentes et comportements des utilisateurs.

L’Agence del’engagementdigital

L’agence

Offres

Approche

Projets

Équipe

Regards