Design System : L'arme secrète pour la croissance exponentielle des SaaS

Un Design System, c’est quoi ? Définitions.

Un Design System est bien plus qu'un simple guide de style ou une bibliothèque de composants visuels. C'est un écosystème évolutif et collaboratif regroupant un ensemble de règles, de principes, de guidelines et de ressources centralisées qui définissent et documentent l'ensemble des éléments constitutifs de l'expérience utilisateur d'un produit logiciel, SaaS, ou d’une app.

En d'autres termes, c'est la source unique de vérité pour tout ce qui concerne le design de votre produit SaaS. Il assure la cohérence visuelle, l'efficacité du développement et une meilleure expérience utilisateur.

Afin de mieux comprendre ce qu’est un Design System, il faut aussi comprendre ce qu’on appelle les Tokens, le Color System, le Type System et la bibliothèque de composants.

Les Tokens, c’est quoi ?

Les tokens sont les éléments constitutifs les plus élémentaires d'un Design System. Ce sont des valeurs uniques et nommées qui représentent des décisions de conception telles que les couleurs, la typographie, l'espacement, etc. Ils servent de base pour construire tous les autres éléments du Design System. Ils sont reliés à des variables, par exemple une variable de couleur dans une palette, et peuvent être primitifs, sémantiques, ou liés à des composants en particulier. L’utilisation de tokens permet une meilleure harmonie au sein de la plateforme, et permettent au Design System d’évoluer de façon efficace. Pour en savoir davantage sur les tokens, lisez notre article sur le sujet. L'image suivante illustre comment fonctionnent les tokens.

Le Color System, c’est quoi ?

Le Color System définit la palette de couleurs utilisée dans votre SaaS ainsi que les tokens qui y sont liés. Il comprend les couleurs de la marque, les couleurs primaires et secondaires, ainsi que les couleurs utilisées pour les états et les messages (succès, erreur, avertissement). Il peut être judicieux de correctement documenter le Color System au sein d’un style guide pour une meilleure collaboration. N'hésitez pas à lire notre article dédié au sujet du Color System pour comprendre les enjeux pour votre SaaS.

Le Type System, c’est quoi ?

De la même manière que le Color System, le Type System définit les styles typographiques utilisés dans votre SaaS, notamment les familles de polices, les tailles de police, les poids de police, l'interlignage et l'espacement des lettres. Il est aussi renseigné au sein du style guide.

La bibliothèque de composants

La bibliothèque de composants est un ensemble de composants d'interface utilisateur réutilisables, tels que des boutons, des formulaires, des menus déroulants, des modales, etc. Ces composants sont conçus et développés une seule fois, puis réutilisés dans l'ensemble du SaaS, garantissant ainsi la cohérence et l'efficacité.

Différences entre Design System et Style Guide

Il est important de distinguer un Design System d'un simple Style Guide. Bien que souvent utilisés de manière interchangeable, les Design Systems et les Style Guides sont distincts. Imaginez une maison : le Design System représente les fondations, la structure et les matériaux, tandis que le Style Guide s'apparente aux choix de décoration intérieure (chez merveilleUX, on adore comparer l’UX au domaine de la construction).

Un Design System est bien plus qu'un simple document. Il se compose de :

• Principes et valeurs : Un socle commun qui guide les décisions de design, comme l'accessibilité ou la simplicité.
• Composants d'interface et patterns : Boutons, formulaires, menus - des éléments réutilisables accompagnés de leur code et de leurs règles d'utilisation.
• Style Guide : Définit l'identité visuelle (couleurs, typographie, iconographie) et les règles de rédaction (ton, style).
• Documentation et ressources : Un référentiel clair et accessible pour tous les intervenants.

Le Style Guide est un élément du Design System. Il se concentre sur l'aspect visuel et rédactionnel du produit :

• Identité visuelle : Définit la palette de couleurs, la typographie, l'iconographie, l'utilisation du logo et les règles d'illustration.
• Tone of Voice : Guide le style rédactionnel, le ton employé et la grammaire pour garantir une cohérence dans la communication.

Pourquoi mettre en place un Design System pour un SaaS ?

Mettre en place un Design System pour votre SaaS va représenter un investissement précieux à plusieurs niveaux.

Cohérence et uniformité

• Expérience utilisateur unifiée : Le Design System garantit que tous les produits et fonctionnalités de votre SaaS ont une apparence et un fonctionnement cohérents, ce qui facilite la navigation et l'utilisation pour vos utilisateurs.
• Renforcement de la marque : Un style visuel cohérent renforce l'identité de la marque et crée une image plus professionnelle et mémorable (même personnalisé pour vos clients !)
• Réduction des erreurs : Des directives claires et précises pour les éléments d'interface utilisateur réduisent les erreurs de conception et de développement.

Efficacité et productivité

• Accélération du développement : Les composants réutilisables et les guidelines claires accélèrent le processus de conception et de développement, permettant de gagner du temps et de l'argent.
• Amélioration de la collaboration : Le Design System fournit un langage commun aux designers et aux développeurs, ce qui facilite la communication et la collaboration.
• Maintenance simplifiée : Des composants centralisés et documentés facilitent la maintenance et les mises à jour du SaaS, car les changements sont automatiquement répercutés partout.

Adaptabilité et évolutivité

• Adaptation aux évolutions : Le Design System est conçu pour être modulaire et évolutif, ce qui permet de l'adapter facilement aux nouveaux besoins et aux nouvelles fonctionnalités du SaaS.
• Intégration de nouveaux produits : L'ajout de nouveaux produits ou services est simplifié, car le Design System fournit une base solide pour maintenir la cohérence.
• Gestion de la croissance : Le Design System permet de gérer la croissance du SaaS en assurant la cohérence et l'efficacité malgré l'augmentation de la complexité.
• Intégration du Green UX: Un Design System bien conçu peut grandement faciliter l'intégration des principes du Green UX, en favorisant la sobriété numérique et en permettant de déployer rapidement des optimisations à l'échelle de toute la plateforme.

Amélioration de l'expérience utilisateur

• Meilleure utilisabilité : Un design cohérent et ergonomique améliore la navigation, la compréhension et l'utilisation du SaaS.
• Satisfaction client accrue : Une expérience utilisateur positive renforce la satisfaction client et la fidélisation.
• Diminution du taux de rebond : Un design clair et intuitif réduit le taux de rebond et encourage les utilisateurs à explorer le SaaS.

Comment faire un Design System ?

Créer un Design System est un projet d’envergure qui nécessite une approche méthodique et collaborative.

1. Commencez par un audit et une analyse de l’existant

• Inventoriez les éléments existants : Rassemblez tous les composants, styles, guidelines et documents existants.
• Évaluez la cohérence et la qualité : Identifiez les incohérences, les points faibles et les opportunités d'amélioration.
• Analysez les besoins des équipes : Designers, développeurs, équipes marketing, etc.

2. Définissez les principes et les guidelines.

Architecture, catalogue de composants, règles de style : choisissez une structure pour le Design System avec différents fichiers, pages et composants en fonction de l’envergure du logiciel.

Attention, il ne s’agit pas là du Style Guide, qui sert lui de documentation.

Choisissez et définissez des normes de nomenclature pour vos variables, tokens et composants.

Faites une recherche sur les différents plugins que vous pouvez utiliser (par exemple, Tailwind CSS pour les couleurs).

Si vous êtes suffisamment familier avec un logiciel de conception d’interfaces comme Figma ou Adobe XD, vous pouvez passer à l’étape suivante. Sinon, n’hésitez pas à externaliser la partie conception de Design System.

3. Construisez le Design System

Une fois la documentation bien structurée, vous pouvez commencer à faire des choix esthétiques en créant des tokens primitifs et sémantiques (*).

Choisissez les couleurs et créez les palettes : le Color System

Choisissez correctement des couleurs en vous basant sur la charte graphique de votre marque, tout en les adaptant en fonction de l’accessibilité. Au minimum, vous aurez besoin de noir, de blanc, de nuances de gris, de couleurs de marque (primaires et secondaires), et de couleurs de niveau d’alerte (danger, warning et success). Pour un SaaS, les couleurs seront définies pour les surfaces (div{background-color}), les bordures (div{border}), les textes (p{color}) et les formes (icônes ou svg).

Attention à l’accessibilité : Nous n’avons pas tous les mêmes yeux. Il est important de vérifier sur des sites tels que Coolors ou ContrastChecker que deux couleurs sont compatibles visuellement, notamment lorsqu’on écrit sur des surfaces.

Choisissez la typographie

En plus des couleurs, créez aussi des styles de texte, notamment des polices d’écriture. Commencez par définir des variables et tokens primitifs pour chaque élément dont peut dépendre une balise texte (font-family, line-height, size, weight, letter-spacing).

Ensuite, définissez les styles de texte. Pour un SaaS, vous aurez besoin la plupart du temps de styles “Display” (boutons, labels), de styles “Titres” et de styles “Body” (pour les paragraphes). Chaque style peut être de différentes tailles.

Choisissez les icônes

Un aspect souvent négligé, mais crucial pour la cohérence de votre Design System est le choix des icônes. Il ne s'agit pas simplement de trouver des icônes "jolies", mais de sélectionner un style qui s'intègre harmonieusement à l'identité visuelle de votre SaaS. Vous avez le choix entre des icônes en ligne fine pour des actions subtiles, des icônes pleines pour des boutons importants, ou encore des illustrations plus détaillées pour des cas spécifiques. Des bibliothèques d'icônes populaires comme Font Awesome ou Material Icons vous offrent un large choix, mais vous pouvez aussi opter pour des icônes personnalisées.

N'oubliez jamais l'accessibilité : vos icônes doivent être lisibles et compréhensibles par tous, y compris les personnes ayant des problèmes de vision.

Choisissez et définissez les dimensions

La cohérence visuelle passe aussi par une gestion rigoureuse des dimensions et de l'espacement. Un système de grille (Grid System) est votre meilleur allié : il divise l'espace en colonnes et gouttières, offrant une structure solide pour positionner vos éléments. Définissez un système d'espacement rythmé (par exemple 4px, 8px, 16px) pour garantir une harmonie visuelle.

N'oubliez pas le Responsive Design : les dimensions doivent s'adapter aux différents appareils (ordinateurs, tablettes, mobiles).

Créez et configurez la Grid

Avant de vous lancer tête baissée, réfléchissez au type de grille qui correspond le mieux aux besoins de votre SaaS. Le nombre de colonnes et la largeur des gouttières auront un impact sur l'organisation du contenu. L'objectif est de créer une grille flexible, capable de s'adapter aux différentes tailles d'écran grâce à des techniques comme flexbox ou grid layout CSS.

Créez les composants UI (Boutons, tabs, alertes etc.).

Les composants UI sont les briques de votre interface utilisateur. Commencez par identifier les composants essentiels pour votre SaaS : boutons, formulaires, menus déroulants, modales, cards, etc. Pour chaque composant, décrivez ses différents états (actif, inactif, survolé) et leur impact visuel. L'accessibilité est primordiale : utilisez des attributs ARIA, vérifiez le contraste des couleurs, etc. Illustrez chaque composant avec des exemples visuels et des extraits de code pour faciliter leur utilisation par les développeurs.

4. Créez des resources relatives

Que ce soit à l’aide d’un projet Figma, d’un fichier .pdf ou d’une page Web, il est important de répertorier correctement le fonctionnement et l’architecture de votre Design System, notamment à l’aide de conseils d’utilisations et de guides de style. Vous assurerez une parfaite harmonisation et collaboration entre les différents membres de l’équipe et les prochains qui arriverons.

5. Gérez la maintenance et l’évolution.

Un Design System n’est jamais fixe. Au fur et à mesure du développement de votre interface, des composants vont changer, être dupliqués puis adaptés, et ils vont parfois être “cassés” (non fonctionnels à cause d’une erreur humaine de conception). Il faudra donc gérer cette maintenance et évolution en collaborant avec les dev et en documentant correctement les changements.

Conseils pour un bon Design System

Construire un Design System efficace demande de la rigueur et de la prévoyance. Voici quelques conseils pour vous guider :

1. Posez des fondations solides :

• Commencez par l'essentiel : Inutile de vouloir tout faire d'un coup. Concentrez-vous d'abord sur les éléments fondamentaux : la charte graphique (couleurs, typographie), les composants de base (boutons, formulaires), et la grille. Vous pourrez enrichir votre Design System progressivement.
• Définissez une nomenclature claire : Adoptez une convention de nommage cohérente et descriptive pour vos variables, vos composants, et vos fichiers. Cela facilitera la navigation et la maintenance du Design System.
• Impliquez les développeurs dès le départ : Le Design System n'est pas qu'une affaire de designers. La collaboration avec les développeurs est cruciale pour garantir la faisabilité technique et la cohérence entre le design et le code.

2. Soyez itératifs et adaptables :

• Commencez petit, évoluez progressivement : N'essayez pas de créer un Design System parfait du premier coup. Commencez par un MVP (Minimum Viable Product) et faites-le évoluer en fonction des besoins de votre SaaS et des retours de votre équipe.
• Restez flexibles : Le monde du design est en constante évolution. Soyez prêt à adapter votre Design System aux nouvelles tendances, aux nouvelles technologies et aux nouveaux besoins de vos utilisateurs.
• Intégrez les feedbacks : Le Design System est un projet collaboratif. Encouragez les retours de votre équipe (designers, développeurs, product managers) et intégrez-les pour l'améliorer continuellement.

3. Faites de la documentation une priorité :

• Documentation claire et concise : Une bonne documentation est essentielle pour garantir l'adoption et la bonne utilisation du Design System. Soyez clair, concis et allez droit au but.
• Exemples concrets et cas d'utilisation : Illustrez chaque composant et chaque règle avec des exemples concrets et des cas d'utilisation réels.

4. N'hésitez pas à externaliser :

• Expertise externe : Si vous manquez de temps, de ressources ou d'expertise en interne, n'hésitez pas à faire appel à des experts externes pour vous accompagner dans la création de votre Design System.
• Gain de temps et d'efficacité : L'externalisation peut vous permettre de gagner du temps, de bénéficier d'un regard neuf et d'accéder à des compétences pointues.

Conclusion

Créer un Design System pour un SaaS est indispensable pour en permettre une croissance exponentielle. C'est un investissement stratégique payant à long terme : en misant sur la cohérence, l'efficacité et l'évolutivité, vous offrez à vos équipes les clés d'une meilleure collaboration et à vos utilisateurs une expérience intuitive et plaisante. N'oubliez pas : un Design System est un organisme vivant qui se construit et se peaufine au fil du temps. En restant à l'écoute des besoins de vos utilisateurs et en intégrant les retours de votre équipe, votre Design System deviendra un atout majeur pour la croissance et le succès de votre SaaS.

Malheureusement c’est un processus itératif qui demande de la rigueur et de l’expertise que certaines équipes n’ont pas toujours en interne. Alors parfois, externaliser une partie de la conception produit de votre SaaS (dont les bases d’un bon Design System) peut être une solution économique et efficace pour (re)partir sur de bons rails.

Chez merveilleUX, nous sommes flexibles et et pouvons collaborer avec vos équipes dans le but de réussir vos ambitions, alors contactez-nous dès maintenant pour en discuter.