Un guide étape par étape pour créer un système de conception

Intro

À l'ère de l'accessibilité universelle, l'ubiquité est devenue une norme. Toutefois, il est également bien connu que la cohérence est synonyme de crédibilité. Les utilisateurs sont désormais plus conscients. Une expérience rapide et fluide est une attente fondamentale, quelle que soit l'interface.

En outre, le temps est un atout que vous ne pouvez pas vous permettre de gaspiller. Tous ces éléments devraient suffire à vous inciter à en faire plus avec votre site web ou votre interface. Cependant, essayer d'être cohérent avec 50 composants différents dans la conception sans erreurs est une tâche ardue.

Le "Design System" est là pourvous faciliter la vie.

Qu'est-ce qu'un système de conception ?

Un système de conception est une vaste archive de composants réutilisables clairement documentés que l'équipe produit peut exploiter pour créer des expériences numériques. En d'autres termes, les systèmes de conception sont la source unique de vérité pour une entreprise en matière de conception.

Plus que des guides de style ou des bibliothèques de modèles, un système de conception est en constante évolution. Cet écosystème de lignes directrices liées à diverses entités, y compris le design UX, peut être utilisé comme un cadre de blocs de construction pour tout projet afin de s'assurer que tous les composants sont cohérents et correspondent à l'image de marque.

Bien qu'utile pour les start-ups, les entreprises en croissance et les sociétés, un système de conception devient un atout essentiel et non négociable au fur et à mesure du développement d'un produit. Il peut également influencer positivement les objectifs de l'entreprise, le flux de travail, le travail d'équipe, l'expérience de l'utilisateur et l'expérience globale de la marque.

Quels sont les avantages d'un système de conception ?

Voici quelques-uns des avantages de la mise en œuvre d'une conception de système

1. Accroître l'efficacité tout en réduisant les délais - L'un des principaux avantages de tout système de conception est la possibilité de créer et de recréer rapidement des travaux de conception et de développement. Les équipes peuvent utiliser des éléments préfabriqués pour éviter de devoir constamment réinventer la roue et réduire le risque d'incohérence.
2. Amélioration de la cohérence visuelle entre les pages et les canaux - L'absence d'un système de conception à l'échelle de l'organisation peut conduire à des visuels incohérents, à une expérience utilisateur fragmentée ou à un isolement par rapport à l'image de marque. Un ensemble cohérent de normes permet également de gérer les refontes importantes ou les changements de marque à grande échelle.
3. Promouvoir un langage unifié - Un langage de conception partagé réduit le risque de perte de temps de conception ou de développement en raison d'une mauvaise communication au sein des équipes interfonctionnelles et entre elles.
4. Permet de mieux se concentrer sur des problèmes plus complexes - Les équipes peuvent mieux résoudre des problèmes complexes, comme la hiérarchisation des informations, la gestion des déplacements, etc. lorsque des composants d'interface utilisateur simples sont créés et sans équivoque.
5. Servir d'outil de référence et de formation pour les collaborateurs - Un système de conception facilite le processus d'intégration en cas de changement de personnel. Il aide également les nouveaux collaborateurs individuels à se familiariser avec la conception UI UX ou la création de contenu.
6. Contribuer à la création d'une marque forte et intemporelle - L'objectif d'un système de conception est de communiquer une identité et une conception particulières derrière les produits qu'il transporte. Il contribue à créer des marques percutantes et aide les gens à se souvenir de l'expérience de la marque. Les gens se sentent ainsi plus proches d'une marque et lui font davantage confiance.

Un guide en dix étapes pour construire un système de conception

Nous avons élaboré un processus en dix étapes pour aider votre entreprise à créer un système de conception.

1. Analyser en profondeur le processus de conception existant.

La première étape de l'élaboration d'une stratégie et du lancement d'un processus consiste à comprendre où vous en êtes actuellement. L'examen et l'analyse du processus de conception actuel de votre organisation peuvent vous aider à mieux comprendre la conception du système qui convient le mieux à votre marque. Posez-vous les questions suivantes :

• Quelle est l'approche actuelle de votre organisation en matière de conception ?
• Quels sont les outils existants utilisés par votre organisation ?

Veillez à évaluer le niveau de maturité de la conception de l'équipe chargée du produit. Cela vous aidera à évaluer le temps nécessaire à la mise en œuvre du nouveau système dans votre organisation.

2. Déterminer l'alphabet de votre marque

L'alphabet d'une marque conduit à l'identité de la marque, c'est-à-dire aux valeurs de la marque et du produit et au langage de la marque. Le langage de la marque comprend les formes, les polices, les couleurs, les animations, la voix et le ton.

Les concepteurs utiliseront un langage visuel défini par l'alphabet de la marque. L'examen des lignes directrices de la marque et les entretiens avec les parties prenantes peuvent vous aider à comprendre l'identité et le langage de la marque.

3. Réalisation d'un audit pour le produit actuel AI

La réalisation d'un audit de l'interface utilisateur du produit actuel vous aidera à relever un défi majeur en matière de conception de produits : la duplication de la conception. L'audit vise à atteindre deux objectifs

• Attirer l'attention sur les zones du produit présentant des incohérences significatives.
• Discerner les éléments les plus utilisés et les plus essentiels du produit.

Un audit de l'interface utilisateur est un processus en plusieurs étapes. Il est essentiel d'identifier et d'analyser les principales propriétés de l'interface utilisateur et leur utilisation dans les composants. Vous pouvez utiliser les outils disponibles pour déterminer le nombre de couleurs et de polices de caractères uniques dans vos feuilles de style. Vous pouvez ensuite décomposer chaque conception de site web en éléments individuels.

4. Établir les principes de conception de votre système

Pour créer une excellente expérience utilisateur, il est impératif de comprendre les raisons qui sous-tendent les décisions de conception. En outre, un ensemble clair d'objectifs facilite la définition des principes de conception et la coordination avec les équipes.

Vous souhaitez mettre en place un système de conception ? Commencez par ces questions :

• Que créez-vous ?
• Pourquoi le faire
• Comment allez-vous le construire ?

Les principes de conception doivent refléter les valeurs et la vision de votre marque.

5. Construire une bibliothèque de composants

Également connue sous le nom de bibliothèque de modèles, cette bibliothèque doit comprendre tous les éléments fonctionnels et décoratifs de votre interface utilisateur. Évaluez les composants en fonction du projet, des besoins des utilisateurs et des objectifs de l'entreprise, et conservez ceux dont vous avez besoin.

6. Établir des règles

Les systèmes de conception ne sont pas conçus pour restreindre les concepteurs à une direction de conception spécifique. Au contraire, ils sont censés fournir aux concepteurs et aux développeurs un cadre fondamental qui élargit l'orientation créative et laisse place à l'innovation.

Il s'agit de deux approches des règles du système de conception, comme le mentionne le livre d'Alla Kholmatova :

• Règles strictes - Les concepteurs et les développeurs suivent un processus rigoureux pour introduire de nouveaux modèles ou composants.
• Règles souples - Ces règles permettent aux concepteurs et aux développeurs de créer sans adhérer à des contraintes strictes s'ils pensent que cela permet d'obtenir une meilleure conception.

Comme pour beaucoup d'autres aspects de la vie, il est essentiel de trouver le bon équilibre entre ces règles afin que le produit soit cohérent tout en étant créatif.

7. Choisissez votre modèle de gouvernance

Les systèmes de conception dynamiques et en constante évolution nécessitent un processus simple d'approbation et de mise en œuvre des changements. Il existe trois modèles de gouvernance :

• Modèle solitaire - Un individu ou un groupe d'individus "dirige" directement le processus du système de conception.
• Modèle centralisé - Une équipe est responsable et guide l'évolution du système.
• Modèle fédéré - Plusieurs personnes issues de plusieurs groupes dirigent le processus de conception du système.

Si chacun de ces modèles a ses avantages et ses inconvénients, le modèle solitaire, en particulier, peut conduire à ce que la personne responsable devienne un goulot d'étranglement pour l'exécution de nombreuses tâches. La meilleure solution consiste à utiliser une combinaison de différents modèles en fonction de vos besoins.

8. Définir la structure des composants

La duplication des composants fonctionnels est un défi important pour les systèmes de conception. Il en résulte un système inflexible qui oblige les concepteurs (et les développeurs) à créer de nouveaux éléments à chaque fois qu'il y a un nouveau scénario.

Les conceptions de systèmes réussies sont hautement réutilisables et permettent aux utilisateurs de s'en servir comme base pour leurs produits. Il est donc recommandé de développer des éléments qui peuvent être réutilisés dans différents contenus.

Critères pour des composants réutilisables et évolutifs :

• Modulaire - Composants indépendants et éléments interchangeables.
• Composable - Fusionner des composants existants pour en créer de nouveaux
• Personnalisable - Des composants personnalisables qui fonctionnent dans une multitude de contextes.

9. S'assurer que toutes les équipes utilisent un langage unifié

L'objectif d'un système de conception est notamment de faciliter un travail d'équipe sans faille. Il est donc essentiel d'intégrer le système dans le flux de travail de l'équipe. Elle augmente la productivité tout en apportant de la valeur aux membres de l'équipe.

Une meilleure compréhension de la manière dont les différentes personnes utilisent le système de conception au cours du processus d'intégration initial peut vous aider à modifier le système en conséquence.

10. Transmettre régulièrement les changements

Le processus d'un système de conception évolue avec l'organisation et ne peut être statique. C'est pourquoi, après avoir introduit le système dans votre organisation, il est essentiel de communiquer tous les changements et de tenir l'organisation informée.

Un journal des modifications concis et bien tenu peut aider les utilisateurs à comprendre les différentes mises à jour et l'impact qu'elles auront sur leur travail.

Trois exemples pour commencer

Système de conception Atlassian

(https://atlassian.design/)

Atlassian Design System, un célèbre éditeur australien de logiciels d'entreprise, a pour objectif d'assurer une collaboration transparente entre des équipes agiles et dispersées dans le monde entier.

Trello et Jira, deux des outils de collaboration les plus utilisés d'Atlassian, reflètent parfaitement la philosophie de conception de l'entreprise. Cette philosophie consiste à tirer parti de l'expérience numérique pour accroître la productivité et le potentiel global des équipes et de leurs membres.

Cela dit, le système de conception d'Atlassian propose des techniques agiles et un suivi efficace de chaque étape d'un projet, de la planification du produit à sa livraison. Cela permet d'obtenir des résultats bénéfiques en termes de création et de livraison de produits. Le système de conception d'Atlassian comprend principalement

1. Lignes directrices pour la conception
2. Normes de la marque
3. Produit
4. Illustration
5. Prototypage
6. Marketing
7. Personnalité

Système de conception IBM

(https://carbondesignsystem.com/migrating/guide/design)

IBM est l'exemple type d'une grande entreprise informatique qui opère à l'échelle mondiale et suit son propre système de conception.

Leurs capacités vont du conseil aux entreprises et du financement à la création de logiciels, à l'hébergement et à la gestion des technologies de l'information et aux solutions qui relient les logiciels au matériel.

Le principe fondamental d'IBM est de favoriser constamment le progrès, qu'il s'agisse de la société humaine ou d'une marque, en utilisant la science, la raison et l'intellect.

Selon IBM, une bonne conception n'est pas seulement une nécessité, c'est aussi un engagement envers les utilisateurs. Voici quelques-unes des principales caractéristiques du Carbon Design System, qui offre aux développeurs et aux concepteurs travaillant avec Adobe, Axure et Sketch une multitude d'outils et de ressources :

1. Visualisation des données
2. Modèles
3. Composants
4. Lignes directrices
5. Tutoriels

Système de conception Uber

(https://baseweb.design/)

Nous avons tous pris un Uber au moins une fois. L'entreprise technologique américaine mise sur le mouvement, notamment la livraison de nourriture, le covoiturage, le partage de véhicules de pair à pair et la micro-mobilité à l'aide de scooters et de vélos électriques.

Uber a besoin d'un système efficace pour que ce type de service fonctionne parfaitement dans toutes les sous-marques, les services internes, les produits et les projets.

Les principaux attributs du système de conception d'Uber sont les suivants :

1. Architecture de la marque
2. Composition
3. Ton de la voix
4. Motion
5. Illustration
6. Photographie
7. Iconographie
8. Couleur
9. Logo
10. Typographie

Points à connaître avant de créer votre premier système de conception

1. Une communication claire et précoce est votre nouvelle meilleure amie

Il peut être compliqué d'impliquer immédiatement vos consommateurs internes. En fait, leurs commentaires peuvent entraver le processus s'ils sont ambigus, s'ils sont fournis trop tôt dans un cycle de lancement alpha ou bêta, ou s'ils ne sont pas utiles.

Dites à vos clients, les utilisateurs du système de conception, ce dont vous avez besoin pour vous assurer de recevoir un retour d'information constructif. Si vous êtes dans un cycle de pré-version précoce, soyez honnête et clair quant à la nature exacte des informations que vous souhaitez obtenir. Cela indique que vous recherchez les défauts les plus importants du produit et non des critiques de haute fidélité.

Veillez à ne pas trop réfléchir, à ne pas vous dessécher l'esprit, mais n'hésitez pas à communiquer à outrance.

2. Vos pas ne sont pas la seule chose que vous devez suivre

Un élément crucial manquant dans l'établissement des priorités est souvent le suivi de l'utilisation des systèmes de conception. Il est impératif de comprendre où le système est utilisé, par qui, à quelle fréquence et quelle est la fréquence des mises à jour.

La mise en place d'une collecte quotidienne de statistiques sur les équipes qui utilisent précisément les différentes versions de la bibliothèque permet d'avoir une bonne compréhension du taux d'adoption, de mise à niveau et de rétrogradation.

Lorsque vous identifiez les équipes qui effectuent rarement des mises à jour, vous pouvez chercher à connaître les problèmes qui bloquent la mise à jour et y remédier par la suite.

3. Les mécanismes de retour d'information sont aussi sous-estimés que Rhaeghal dans GOT

Pour s'assurer que votre système n'est pas seulement utile à ses utilisateurs, mais aussi quelque chose dont ils se sentent partie prenante et à laquelle ils ont activement contribué, il est essentiel de disposer de moyens simples et directs pour que les gens puissent donner leur avis (Slack, courriel, etc.) et contribuer au système.

Fournissez toujours des instructions sur la manière et l'endroit où fournir un retour d'information dans le plus grand nombre de domaines possible, et ne supposez jamais rien, en particulier qu'un utilisateur trouvera le retour d'information à l'endroit qui vous semble le plus évident.

Un système de conception est l'étoile polaire dont votre organisation a besoin

Un système de conception réussi et bien conçu devient une partie de l'ossature même d'une entreprise, ce qui se traduit par des expériences cohérentes et amplifiées. En outre, les concepteurs et les développeurs ont la possibilité de mieux communiquer l'objectif du produit au lieu de rester bloqués à assembler des éléments de base.

N'importe quel généraliste peut être votre partenaire dans la réalisation d'un projet, mais seul un spécialiste de la conception identifie les problèmes, les défis et les aspirations actuels pour élaborer un système de conception, spécialement pour vous. Ce n'est pas le moment d'attendre. Grâce à ce guide complet sur la création d'un système de conception, vous n'êtes plus qu'à une initiative de la transformation complète de votre processus de production.

Références

https://ionic.io/resources/articles/why-every-company-needs-a-design-system

https://www.baianat.com/books/merits-of-design-systems/design-systems-and-their-benefits

https://www.uxpin.com/create-design-system-guide/

https://builtin.com/design-ux/11-benefits-design-systems

https://elementor.com/blog/design-system/

https://www.nngroup.com/articles/design-systems-101/

https://www.uxpin.com/studio/blog/best-design-system-examples/#h-4-uber-design-system

https://www.eleken.co/blog-posts/7-design-systems-examples-for-your-inspiration

https://aufaitux.com/blog/best-design-systems/

https://www.copycat.dev/blog/design-system-examples/

https://builtin.com/design-ux/design-system

https://www.editorx.com/shaping-design/article/design-system-examples

https://medium.com/spotify-design/5-things-i-wish-id-known-before-starting-a-design-system-at-spotify-f8624abf1081