Aésio

Mise en place d'un design system

Mise en place d'un design system

Mise en place d'un design system

Mise en place d'un design system

Mise en place d'un design system

2024

Contexte

Aésio est un groupement de mutuelles qui compte plus de 2,7 millions de clients.

Début 2024, j’accompagne les équipes d’Aésio pour une mission de 3 mois pour la mise en place de leur design system.

Je travaille en autonomie sur cette mission et collabore de manière hebdomadaire avec les services intégrés côté Aésio (design, développement, communication, etc.).


Phase d’audit

La première phase a été de réaliser un audit des produits numériques conçus et développés par Aésio : outils internes à destination des conseillers et experts métiers, sites et outils côtés clients (particuliers, entreprises, partenaires), le site institutionnel.

Les objectifs ont été pour moi :

  • de prendre la mesure de la maturité des produits en terme d’expérience utilisateur,

  • d’estimer le nombre et de la diversité des composants et de principes des interfaces,

  • d’identifier les points forts et les points faibles,

  • d’anticiper la quantité de travail qui s’annonce, notamment en listant et priorisant les composants à concevoir,

  • d’embarquer l’équipe Aésio dans le projet.

Après avoir passé en revue 7 outils, 233 écrans et compté 161 composants (et leur variants) différents, je restitue mes enseignements dans un document de synthèse et propose d’adresser 5 sujets :

  • améliorer l’utilisation de la couleur, aujourd’hui utilisé,

  • définir clairement le périmètre d’utilisation des pictogrammes et des illustrations, aujourd’hui utilisé,

  • améliorer la cohérence des contenus rédactionnels,

  • créer une bibliothèque de composants homogène, fonctionnelle et accessible,

  • apporter de la rigueur dans l’exécution (lors de la conception des interfaces et lors de leur développement).

En somme, définir un cadre simple, sain et facile à enrichir par la suite.

Le bilan de cette phase est plutôt encourageant. Certes il y a de nombreux axes d’amélioration, mais il n’y a pas d’écart majeur en terme d’expérience utilisateur ou d’interface.


Phase de création du design system

A la suite de l’audit, j’ai récupéré la charte graphique (orientée print) existante et me suis servi de cette base pour adapter les choix (de couleurs, de typos, etc.) aux contraintes numériques.

L’objectif n’est pas de bouleverser les habitudes (parcours) ou codes graphiques, mais plutôt de capitaliser sur l’existant, de corriger les manques et les erreurs et d’appliquer les bonnes pratiques.

Sur le fichier Fondations j’ai, par exemple, décliné les couleurs de la charte “print” en conservant la distinction par cibles (particuliers, entreprises, partenaires, institutions) et créé les nombreux styles de texte nécessaires pour améliorer la hiérarchie de l’information sur les écrans.


Sur le fichier Composants j’ai, par exemple, été vigilant à ce que les champs soient toujours associés à un label et à ce que l’ensemble des composants respectent le même usage de la couleur en fonction de leur état (désactivé, inactif, actif, focus, etc.).


Phase de documentation

En parallèle de la phase de conception, j’ai commencé la rédaction de la documentation sur Zeroheight.

Les enjeux étaient :

  • d’expliquer l’intérêt du design system en prévoyant un chapitre “Débuter” qui aborde des sujets tels que “c’est quoi un design system ?”, “à qui ça s’adresse ?”, “comment y contribuer”, “comment s’en servir ?”, “comment le design system est organisé ?”, etc.

  • de poser des bases saines et simples à enrichir pour que les équipes d’Aésio s’emparent du sujet,

  • de documenter un minimum tous les composants.

Cette phase a été assez chronophage mais l’implication de l’équipe côté Aésio a permis de valider tous les aspects de la documentation - le fond et la forme - au fur et à mesure.


Gouvernance du design system

Au fil des jours, j’ai accompagné le designer d’Aésio qui sera en charge du design system pour lui présenter la philosophie de ce projet d’envergure et lui expliquer les aspects très opérationnels autour du design system (comment faire évoluer les composants, comment mettre à jour la documentation, etc.).

Par des contraintes planning, la fin de la mission s’est achevée pour moi par la livraison du design system et mon collègue en charge de l’accompagnement commercial du client a présenté le design system aux équipes d’Aésio et à un public un peu plus large sous la forme d’un webinar.


Conclusion

J’ai beaucoup aimé travailler sur cette mission, tant par l’enjeux du chantier qui a été le nôtre que par la collaboration que j’ai pu avoir avec l’équipe Aésio et en particulier avec le designer plus junior que j’ai accompagné.

La mission a mêlé des temps de formation sur des sujets tels que l’utilisation de grilles et de règles de conception à des sujets très fonctionnels tels que la mise à l’épreuve du design system sur des écrans existants et dans des cas métiers parfois complexe (tableaux avec beaucoup de données, etc.).

J’ai particulièrement apprécié intervenir de manière complète sur le sujet : conseil, formation, production, vulgarisation, présentation avec des enjeux politiques, etc.

Contexte

Aésio est un groupement de mutuelles qui compte plus de 2,7 millions de clients.

Début 2024, j’accompagne les équipes d’Aésio pour une mission de 3 mois pour la mise en place de leur design system.

Je travaille en autonomie sur cette mission et collabore de manière hebdomadaire avec les services intégrés côté Aésio (design, développement, communication, etc.).


Phase d’audit

La première phase a été de réaliser un audit des produits numériques conçus et développés par Aésio : outils internes à destination des conseillers et experts métiers, sites et outils côtés clients (particuliers, entreprises, partenaires), le site institutionnel.

Les objectifs ont été pour moi :

  • de prendre la mesure de la maturité des produits en terme d’expérience utilisateur,

  • d’estimer le nombre et de la diversité des composants et de principes des interfaces,

  • d’identifier les points forts et les points faibles,

  • d’anticiper la quantité de travail qui s’annonce, notamment en listant et priorisant les composants à concevoir,

  • d’embarquer l’équipe Aésio dans le projet.

Après avoir passé en revue 7 outils, 233 écrans et compté 161 composants (et leur variants) différents, je restitue mes enseignements dans un document de synthèse et propose d’adresser 5 sujets :

  • améliorer l’utilisation de la couleur, aujourd’hui utilisé,

  • définir clairement le périmètre d’utilisation des pictogrammes et des illustrations, aujourd’hui utilisé,

  • améliorer la cohérence des contenus rédactionnels,

  • créer une bibliothèque de composants homogène, fonctionnelle et accessible,

  • apporter de la rigueur dans l’exécution (lors de la conception des interfaces et lors de leur développement).

En somme, définir un cadre simple, sain et facile à enrichir par la suite.

Le bilan de cette phase est plutôt encourageant. Certes il y a de nombreux axes d’amélioration, mais il n’y a pas d’écart majeur en terme d’expérience utilisateur ou d’interface.


Phase de création du design system

A la suite de l’audit, j’ai récupéré la charte graphique (orientée print) existante et me suis servi de cette base pour adapter les choix (de couleurs, de typos, etc.) aux contraintes numériques.

L’objectif n’est pas de bouleverser les habitudes (parcours) ou codes graphiques, mais plutôt de capitaliser sur l’existant, de corriger les manques et les erreurs et d’appliquer les bonnes pratiques.

Sur le fichier Fondations j’ai, par exemple, décliné les couleurs de la charte “print” en conservant la distinction par cibles (particuliers, entreprises, partenaires, institutions) et créé les nombreux styles de texte nécessaires pour améliorer la hiérarchie de l’information sur les écrans.


Sur le fichier Composants j’ai, par exemple, été vigilant à ce que les champs soient toujours associés à un label et à ce que l’ensemble des composants respectent le même usage de la couleur en fonction de leur état (désactivé, inactif, actif, focus, etc.).


Phase de documentation

En parallèle de la phase de conception, j’ai commencé la rédaction de la documentation sur Zeroheight.

Les enjeux étaient :

  • d’expliquer l’intérêt du design system en prévoyant un chapitre “Débuter” qui aborde des sujets tels que “c’est quoi un design system ?”, “à qui ça s’adresse ?”, “comment y contribuer”, “comment s’en servir ?”, “comment le design system est organisé ?”, etc.

  • de poser des bases saines et simples à enrichir pour que les équipes d’Aésio s’emparent du sujet,

  • de documenter un minimum tous les composants.

Cette phase a été assez chronophage mais l’implication de l’équipe côté Aésio a permis de valider tous les aspects de la documentation - le fond et la forme - au fur et à mesure.


Gouvernance du design system

Au fil des jours, j’ai accompagné le designer d’Aésio qui sera en charge du design system pour lui présenter la philosophie de ce projet d’envergure et lui expliquer les aspects très opérationnels autour du design system (comment faire évoluer les composants, comment mettre à jour la documentation, etc.).

Par des contraintes planning, la fin de la mission s’est achevée pour moi par la livraison du design system et mon collègue en charge de l’accompagnement commercial du client a présenté le design system aux équipes d’Aésio et à un public un peu plus large sous la forme d’un webinar.


Conclusion

J’ai beaucoup aimé travailler sur cette mission, tant par l’enjeux du chantier qui a été le nôtre que par la collaboration que j’ai pu avoir avec l’équipe Aésio et en particulier avec le designer plus junior que j’ai accompagné.

La mission a mêlé des temps de formation sur des sujets tels que l’utilisation de grilles et de règles de conception à des sujets très fonctionnels tels que la mise à l’épreuve du design system sur des écrans existants et dans des cas métiers parfois complexe (tableaux avec beaucoup de données, etc.).

J’ai particulièrement apprécié intervenir de manière complète sur le sujet : conseil, formation, production, vulgarisation, présentation avec des enjeux politiques, etc.

Contexte

Aésio est un groupement de mutuelles qui compte plus de 2,7 millions de clients.

Début 2024, j’accompagne les équipes d’Aésio pour une mission de 3 mois pour la mise en place de leur design system.

Je travaille en autonomie sur cette mission et collabore de manière hebdomadaire avec les services intégrés côté Aésio (design, développement, communication, etc.).


Phase d’audit

La première phase a été de réaliser un audit des produits numériques conçus et développés par Aésio : outils internes à destination des conseillers et experts métiers, sites et outils côtés clients (particuliers, entreprises, partenaires), le site institutionnel.

Les objectifs ont été pour moi :

  • de prendre la mesure de la maturité des produits en terme d’expérience utilisateur,

  • d’estimer le nombre et de la diversité des composants et de principes des interfaces,

  • d’identifier les points forts et les points faibles,

  • d’anticiper la quantité de travail qui s’annonce, notamment en listant et priorisant les composants à concevoir,

  • d’embarquer l’équipe Aésio dans le projet.

Après avoir passé en revue 7 outils, 233 écrans et compté 161 composants (et leur variants) différents, je restitue mes enseignements dans un document de synthèse et propose d’adresser 5 sujets :

  • améliorer l’utilisation de la couleur, aujourd’hui utilisé,

  • définir clairement le périmètre d’utilisation des pictogrammes et des illustrations, aujourd’hui utilisé,

  • améliorer la cohérence des contenus rédactionnels,

  • créer une bibliothèque de composants homogène, fonctionnelle et accessible,

  • apporter de la rigueur dans l’exécution (lors de la conception des interfaces et lors de leur développement).

En somme, définir un cadre simple, sain et facile à enrichir par la suite.

Le bilan de cette phase est plutôt encourageant. Certes il y a de nombreux axes d’amélioration, mais il n’y a pas d’écart majeur en terme d’expérience utilisateur ou d’interface.


Phase de création du design system

A la suite de l’audit, j’ai récupéré la charte graphique (orientée print) existante et me suis servi de cette base pour adapter les choix (de couleurs, de typos, etc.) aux contraintes numériques.

L’objectif n’est pas de bouleverser les habitudes (parcours) ou codes graphiques, mais plutôt de capitaliser sur l’existant, de corriger les manques et les erreurs et d’appliquer les bonnes pratiques.

Sur le fichier Fondations j’ai, par exemple, décliné les couleurs de la charte “print” en conservant la distinction par cibles (particuliers, entreprises, partenaires, institutions) et créé les nombreux styles de texte nécessaires pour améliorer la hiérarchie de l’information sur les écrans.


Sur le fichier Composants j’ai, par exemple, été vigilant à ce que les champs soient toujours associés à un label et à ce que l’ensemble des composants respectent le même usage de la couleur en fonction de leur état (désactivé, inactif, actif, focus, etc.).


Phase de documentation

En parallèle de la phase de conception, j’ai commencé la rédaction de la documentation sur Zeroheight.

Les enjeux étaient :

  • d’expliquer l’intérêt du design system en prévoyant un chapitre “Débuter” qui aborde des sujets tels que “c’est quoi un design system ?”, “à qui ça s’adresse ?”, “comment y contribuer”, “comment s’en servir ?”, “comment le design system est organisé ?”, etc.

  • de poser des bases saines et simples à enrichir pour que les équipes d’Aésio s’emparent du sujet,

  • de documenter un minimum tous les composants.

Cette phase a été assez chronophage mais l’implication de l’équipe côté Aésio a permis de valider tous les aspects de la documentation - le fond et la forme - au fur et à mesure.


Gouvernance du design system

Au fil des jours, j’ai accompagné le designer d’Aésio qui sera en charge du design system pour lui présenter la philosophie de ce projet d’envergure et lui expliquer les aspects très opérationnels autour du design system (comment faire évoluer les composants, comment mettre à jour la documentation, etc.).

Par des contraintes planning, la fin de la mission s’est achevée pour moi par la livraison du design system et mon collègue en charge de l’accompagnement commercial du client a présenté le design system aux équipes d’Aésio et à un public un peu plus large sous la forme d’un webinar.


Conclusion

J’ai beaucoup aimé travailler sur cette mission, tant par l’enjeux du chantier qui a été le nôtre que par la collaboration que j’ai pu avoir avec l’équipe Aésio et en particulier avec le designer plus junior que j’ai accompagné.

La mission a mêlé des temps de formation sur des sujets tels que l’utilisation de grilles et de règles de conception à des sujets très fonctionnels tels que la mise à l’épreuve du design system sur des écrans existants et dans des cas métiers parfois complexe (tableaux avec beaucoup de données, etc.).

J’ai particulièrement apprécié intervenir de manière complète sur le sujet : conseil, formation, production, vulgarisation, présentation avec des enjeux politiques, etc.

Visiter le site