Case Study | Pourquoi et comment mettre en œuvre un système de conception dans ton entreprise
World of Digits / Explorer
World of Digits / Explorer
Travailler intelligemment plutôt que durement, c’est possible pour tes développeurs et concepteurs grâce au bon outil de collaboration tel qu’un système de conception. Que tu travailles sur un changement de marque, le lancement d’un produit ou l’amélioration de l’expérience utilisateur, il est important de bien organiser les éléments de conception pour te permettre de gagner du temps et de l’argent. Plus besoin de réunions pour discuter avec les équipes de la façon dont les choses doivent fonctionner. Un système de conception bien mis en œuvre prédéfinit toutes les utilisations et fonctions de tes composants.
La cohérence de tes projets de conception est un point essentiel pour tes utilisateurs. Même une petite erreur pourrait affaiblir l’image de marque et la crédibilité. Reproduire chaque élément de tes conceptions graphiques est une tâche fastidieuse qui peut prendre un temps monstrueux. Un temps qui pourrait être investi dans l’amélioration d’autres détails de l’expérience utilisateur. Ne serait-il pas plus facile pour toi et ton équipe de collaborer efficacement à votre projet de conception sans avoir à vous soucier de la cohérence entre les tâches qui vous sont assignées ? Ne serait-il pas gratifiant de savoir que ton travail n’a pas été vain et qu’il va même perdurer dans le temps et profiter à de nombreuses personnes qui reprendront ton travail ? Si telles sont tes préoccupations, la solution n’est rien de plus simple et de plus facile que le système de conception, une bibliothèque où tous les éléments de conception sont accessibles à tous tes collaborateurs. Le fonctionnement du système de conception est très simple à comprendre. Les éléments de base sont appelés “atomes”, comme les couleurs, les polices, les icônes et les formes. Lorsque ces éléments sont assemblés, ils peuvent créer des éléments plus complexes, appelés “molécules”, tels que des boutons, des pictogrammes, des champs de saisie, des cases à cocher, etc. Tous les composants et assemblages créés peuvent être stockés dans la bibliothèque en cas d’utilisation fréquente. Les composants clés des interfaces sont conservés, et leur utilisation et leur fonction sont indiquées pour être réutilisées dans tes produits et ton entreprise. En effet, le système de conception garantit que, lorsqu’un nouveau produit ou site Web est créé par une équipe, il se comportera et sera mis en œuvre de la même manière que le type de contenu précédemment créé. Le grand plus de cette solution ? Le système de conception évolue avec les besoins de l’entreprise et tous les composants peuvent être mis à jour individuellement sans devoir modifier l’ensemble du contenu. Elle s’adapte aux changements et aux cycles de développement rapides et peut également réduire la dette technique accumulée par les équipes de développement en raison des modifications successives.
Les 8 étapes suivies par nos experts WOD pour développer un système de conception :
Brief les équipes de développement et les designers
Dans ce Case Study, découvre comment nos experts ont procédé pour créer un écosystème cohérent pour le projet de leur client et comment cette solution a rendu leurs efforts durables dans le temps.
Ils sont fournisseurs de solutions multi-énergies et de mobilité aux particuliers, professionnels, entreprises et collectivités locales.
En mai 2021, Total Energies (anciennement connu sous le nom de Lampiris) a annoncé son changement de marque. Ils avaient besoin de refondre leurs deux sites web, notamment Lampiris (conçu pour le B2C en tant que fournisseur d’électricité et de gaz) et Total (en tant que site web B2B pour les petites et grandes entreprises). Jusque-là, Lampiris B2C et Total B2B étaient très différents l’un de l’autre, avec toutes leurs simulations de prix complexes et leurs zones de clientèle. Ces deux marques devaient être rebaptisées en une seule. Il fallait donc donner un aspect cohérent et homogène à tous ces différents projets.
Comme le rebranding avait déjà commencé en France, des lignes directrices de base étaient déjà disponibles. Toutefois, ces éléments de conception de base n’étaient pas suffisants pour mener à bien ces missions.
Nous adoptons une vision large et veillons à proposer des solutions adaptées aux besoins de nos clients tout en anticipant les défis futurs. L’objectif est de leur permettre d’être autonomes avec leurs produits et de profiter pleinement des avantages à long terme de nos solutions innovantes. Grâce à notre approche globale et pratique, il est rapidement apparu que des outils efficaces et performants devaient être mis en place pour mener à bien ce rebranding. Compte tenu du manque d’éléments graphiques et de conceptions disponibles à l’époque, il a fallu repartir de zéro pour réussir la création d’un site web complexe répondant à toutes les attentes de TotalEnergies.
L’utilisation d’un système de conception permettrait de s’assurer que tous les projets ont la même apparence, même si leur fonctionnalité est très différente. Avant le changement de marque, Sketch était utilisé pour mettre en forme les conceptions. Cependant, après avoir audité le contexte de développement et défini les objectifs finaux du nouveau site web, il a été décidé de passer à Figma, un outil plus adapté aux exigences d’un rebranding aussi important. En effet, c’est sur cette nouvelle plateforme d’édition qu’il a été possible de créer un système de conception et une bibliothèque de composants entièrement nouveaux pour le projet. Sachant que plusieurs designers allaient travailler sur cette tâche, il était important de s’assurer que ce système de conception était complet et bien documenté, et qu’il était développé sur un support accessible à l’ensemble de l’équipe. Dans un premier temps, le système de conception comprenait les quelques éléments du premier rebranding qui devaient être conservés, tels que les couleurs et la typographie. Ensuite, le travail s’est poursuivi en suivant l’approche Atomic Design. Cette approche est une méthode basée sur une métaphore biologique permettant la création de systèmes de composants modulaires adaptables à tout type de support. Ainsi, ils ont commencé par les “atomes”, comme l’utilisation des couleurs, les règles typographiques, l’espacement, les grilles, les icônes, etc. Ensuite, ils ont créé les composants intermédiaires ou “molécules” comme les boutons, les liens et les champs de formulaire.
Grâce au système de conception mis en place et à la puissance incroyable de Figma, TotalEnergies dispose désormais d’une liste complète de composants mobiles et de bureau entièrement prototypés et prévus pour chaque circonstance avec une multitude d’états différents. Chaque fois qu’une conception nécessite un nouveau composant, il faut d’abord valider si ce composant sera effectivement utilisé sur plusieurs plateformes. Si oui, il est alors implémenté dans le système de conception général. Dans le cas contraire, le composant est uniquement inclus en tant que composant local pour ce projet spécifique. Comme vous pouvez le constater, un système de conception assure la cohérence de l’image de marque et permet à tout nouveau concepteur de reprendre facilement les projets futurs.
“Il y a un an, je n’avais jamais travaillé avec Figma et je n’avais jamais créé de système de conception. Je me suis tourné vers des collègues designers de World of Digits qui l’avaient déjà fait auparavant pour obtenir des conseils et des trucs et astuces qui m’ont vraiment aidé. En outre, le fait de travailler avec plusieurs consultants de WOD chez notre client rend la collaboration si facile et agréable. Nous pouvons compter sur les connaissances et l’expérience de chacun pour créer de la valeur à court terme.”
Chaque entreprise qui possède un site Web ou une application a besoin d’un système de conception, car c’est le seul moyen de maintenir une cohérence entre les projets. Que ce soit pour les petites ou les grandes entreprises, des lignes directrices sont nécessaires pour garantir une image de marque forte et une expérience utilisateur optimale. En outre, le système de conception a également l’avantage de simplifier la communication entre les équipes, car elles ont toutes accès à cet outil collaboratif qui leur permet d’évaluer rapidement l’image de marque.
Lorsqu’il s’agit de combiner deux sites web indépendants en un seul, il est essentiel d’établir une cohérence et une homogénéité solides. Par conséquent, la création d’un système de conception est la solution qui garantit que la combinaison des deux sites Web a le même aspect et la même convivialité, malgré leurs fonctionnalités divergentes et leur public cible. En outre, cette cohérence peut également être maintenue entre le bureau et le mobile grâce au même système de conception, qui garantit une expérience optimale à l’utilisateur, quel que soit son appareil.
Dirk, Responsable Digital chez TotalEnergies
Pourquoi avez-vous choisi WOD pour avancer dans votre projet ?
WOD regroupe plusieurs types de profils qui se complètent les uns les autres. En faisant collaborer des responsables PO, UX et UI, nous sommes certains que leur mission sera accomplie de bout en bout, et avec l’avantage d’être abordée sous le regard de plusieurs experts. Lorsqu’il s’est agi de créer notre nouveau site web, ils ont pu utiliser les outils dont ils disposaient et créer ceux qui manquaient, comme le système de conception.
Comment cela vous a-t-il aidé ?
Leur haut niveau d’expertise a permis d’accomplir un bon travail qualitatif. Ils ont été capables de partager et de mettre en œuvre leurs connaissances au sein de l’équipe TotalEnergies. Leur esprit de collaboration et leur capacité d’adaptation sont de véritables atouts dans leur approche qui se reflète dans leur façon de travailler centrée sur le client. Ils ont proposé des méthodes et des techniques innovantes pour relever ce défi, ce qui a fait de ce projet commun une réussite.
Maintenant que vous avez votre système de conception, quelle est la prochaine étape ?
Ce changement de marque est l’occasion de franchir une nouvelle étape dans l’expérience numérique de TotalEnergies. Avec l’ambition d’améliorer constamment l’expérience de nos utilisateurs et clients, nous espérons pouvoir compter sur WOD pour nous guider vers notre évolution de la performance dans l’univers digital grâce à leur expertise et leurs solutions centrées sur le client.
Avec tous ses avantages, le système de conception est sans aucun doute l’outil indispensable pour les équipes de développeurs et de designers impliqués dans la conception d’un produit. Il est cependant important de le mettre en place dès le début d’un nouveau projet, surtout lorsqu’on est dans une équipe de plusieurs personnes. Indispensable pour accélérer le processus de conception, il permet de s’assurer que le style reste cohérent dans toutes les conceptions et que le produit final est conçu de manière homogène malgré le fait que de nouveaux concepteurs prennent en charge le projet.
Tu as besoin d’aide pour élaborer et mettre en œuvre un système de conception ?
Es-tu un designer spécialisé dans ce domaine ou désireux d’en savoir plus ?
Lire cet article
Lire cet article
Découvre les contextes d'utilisation du Scrum et de Kanban pour mieux entreprendre tes projets.
Lire cet article