Système de design global pour les soins de santé

Répondre aux besoins de 14 programmes provinciaux avec un seul système

Situation

Client

Provincial Health Services Authority of British Columbia

Mon rôle

Spécialiste des systèmes de design

Mon équipe

3 Chefs de projet, un lead technique, 5 développeurs front-end, un directeur créatif, un rédacteur de contenu

Bref

En Colombie-Britannique, au Canada, la Provincial Health Services Authority (PHSA) supervise 14 programmes et institutions au service de millions de personnes. Leurs sites web faisaient face à des défis majeurs : un design obsolète, une information peu claire et une accessibilité insuffisante.

Chez Evolving Web, où je travaillais, nous avions pour mission de moderniser la présence en ligne de la PHSA, y compris les 14 sites de programmes comme British Columbia Mental Health and Substance Use. Pour répondre à leurs besoins variés, nous avons proposé un système de design fédéré—un cadre flexible permettant d’unifier leurs plateformes tout en laissant place à des personnalisations propres à chaque programme.

Le défi

Ce projet n’était qu’une succession de défis, sans la moindre partie facile. Chaque jour, il fallait veiller à ce que les UI designers, UX designers, directeurs artistiques, parties prenantes, chefs de projet, encore plus de parties prenantes, développeurs—et toujours plus de parties prenantes représentant 14 organismes de santé provinciaux—soient continuellement informés et alignés sur la vision.

En dehors de ça, nous avons rencontré les défis classiques d’un système de design global :

Comment équilibrer cohérence et flexibilité à travers 14 programmes tout en permettant à chacun de conserver son identité visuelle et ses fonctionnalités uniques ?
Comment établir une gouvernance et une structure de gestion claires pour assurer l’efficacité du design system sur l’ensemble des programmes ?
Et enfin, c’était la première fois que l’agence tentait de lancer un design system externe

Processus du projet

La PHSA prévoyait de refondre l’ensemble de ses 14 sites web tout en effectuant une refonte complète de son identité visuelle. Chez Evolving Web, nous avons collaboré avec les parties prenantes de chaque programme pour déployer ces mises à jour. J’ai rejoint le projet très tôt, dès la phase d’idéation, grâce à mon expérience avec les design systems.

Le premier site à être refondu était celui de B.C. Mental Health. En tant que petite agence, nous faisions face à un calendrier extrêmement serré. Idéalement, j’aurais d’abord créé une version aboutie du design system sous forme de wireframes, puis je l’aurais adapté à l’identité visuelle de chaque programme. Cependant, par manque de temps, j’ai développé le design system en parallèle des wireframes de BCMHSUS, tandis que le développement débutait simultanément afin de respecter les délais.

Voir l'étude de cas de B.C. Mental Health & Substance Use Services

Différents utilisateurs, différents objectifs, un seul système.

Que faut-il faire et comment puis-je le réaliser ?

Ce projet était franchement intimidant. Jusqu’à présent, j’avais conçu des design systems pour des logiciels comptant des milliers d’utilisateurs—costaud, mais gérable. Mais là ? Des millions d’utilisateurs, plusieurs équipes, et une base qui allait soutenir des années de développement entre Evolving Web et la PHSA. Ce n’était pas mon premier design system, mais c’était le premier à cette échelle, où la scalabilité n’était pas juste un atout, mais une nécessité absolue.

Designer

Scalabilité

Les designers ont besoin d’un système qui s’adapte à 14 marques différentes tout en maintenant la cohérence, permettant des solutions créatives sans réinventer les composants.

Éditeur de contenu

Flexibilité

Les éditeurs de contenu ont besoin d’un système capable de répondre à une grande variété de besoins tout en assurant une expérience cohérente et facile à maintenir.

Entreprise

Efficacité

Un système réutilisable et mesurable permet de gagner du temps et des ressources grâce à des composants standardisés, réduisant le travail redondant et simplifiant les mises à jour entre les équipes.

Recherche et processus

Que doit-il se passer et comment puis-je y parvenir ?

Atomic Design + Audit des composants

Commencer petit pour voir grand. Les principes de design atomique de Brad Frost sont essentiels. En parallèle, l’équipe et moi avons réalisé un vaste audit des composants sur les 14 sites web de la PHSA afin de déterminer ce qui devait être intégré au système. Nous avons identifié les composants clés communs aux sites pour repérer des modèles. De quoi aurions-nous besoin à l’avenir ? Que pouvons-nous rationaliser ?

Nouveaux variables et modes Figma

À ce moment-là, Figma lance les variables et les modes (mais malheureusement pas encore les variables de texte, à ma grande déception). Je discute avec le lead technique pour voir comment nous pouvons les intégrer au développement.

Gouvernance et nomenclature

Une quantité immense de temps a été consacrée à la façon dont les dossiers, fichiers et pages Figma seraient organisés. Et les composants pour les cas limites ? Comme toujours, la nomenclature a été un sujet de collaboration intense, évoluant à plusieurs reprises au cours du projet.

Travailler avec les composants : Pages d’accueil

Un exemple de gestion des composants avec variantes

J’ai créé trois variantes de pages d’accueil :
- Landing page A – La page principale pour tous les sites de la PHSA.
- Landing page B – Pages parents, correspondant aux éléments du menu de navigation.
- Landing page C – Pages enfants, situées plus bas dans la hiérarchie de l’information.

Landing page B

Ces pages parentales contiennent un haut niveau d’information. La navigation principale et l’image de la bannière héro resteront toujours sous le texte d’en-tête.
1. Elles sont principalement destinées aux éléments du menu de navigation.
2. À ce niveau, j’ai ajouté des fils d’Ariane pour améliorer l’orientation et la navigation.

Landing page C

Utilisé pour les pages enfants situées plus en profondeur dans la carte du site ou l’architecture de l’information.

1. Les fils d’Ariane améliorent l’orientation et aident les utilisateurs à naviguer dans la hiérarchie.
2. À ce niveau, les pages enfants comportent un menu latéral occupant le tiers gauche de la page, tandis que le contenu occupe le reste de la largeur.
3. Le menu latéral comprend un menu déroulant permettant d’afficher des niveaux supplémentaires de la hiérarchie de l’information. Étant donné la complexité des sites de santé, cela améliore la visibilité de l’état du système tout en maintenant un composant de design flexible.

Bien sûr, de nombreuses autres pages modèles ont été incluses dans le système de design, comme les pages de détail et de liste d’événements, les pages de détail et de liste d’actualités, les pages multimédias, les pages de recherche et de résultats de recherche, ainsi que les pages textuelles comme les conditions générales.

La typographie

Noto Sans a été choisi pour sa lisibilité et sa scalabilité, car il prend en charge de nombreuses langues autochtones couramment parlées en Colombie-Britannique.

Les couleurs

Pour offrir un maximum de flexibilité aux 14 sites de la PHSA sans submerger les éditeurs de contenu, j’ai décidé d’inclure :

11 nuances de gris
8 couleurs primaires
8 couleurs secondaires
8 couleurs tertiaires

Cette décision a été prise en collaboration avec le développeur principal, qui avait une grande expérience avec les éditeurs de contenu Drupal.

Réussir la personnalisation dans un système de design fédéré

Comment faire en sorte que chacun des 14 sites soit unique et mette en valeur sa marque et sa proposition de valeur.

Identité visuelle

Chacun des 14 sites avait son propre ensemble de couleurs primaires, secondaires et tertiaires. Pour définir l’identité de la marque, le designer UI a également créé une collection de 8 formes en trois couleurs (avec 5 formes supplémentaires à des fins de wireframing). B.C. Mental Health adopte un design plus naturel et biophilique afin d’inspirer un sentiment de calme et de confiance. En revanche, l’Hôpital pour enfants de la Colombie-Britannique adopte une approche plus jeune et ludique.

Les formes d’arrière-plan sont intégrées aux icônes de marque, qui sont utilisées dans les bannières principales, les collections d’images et les avatars des biographies et des témoignages.

Voici les formes de marque personnalisées utilisées dans le système de design pour les icônes de marque et les avatars.

Design system components and UI elements

Fournir des solutions tout en apportant des conseils techniques et une direction créative.

C’est énorme, tellement énorme que Figma plantait régulièrement.

Il y avait des centaines de composants ! J’ai constamment cherché à les rationaliser et à les regrouper. Voici un aperçu des différents composants et variantes. Si vous avez des questions sur leur gestion ou sur les décisions prises, n’hésitez pas à me contacter ! Je pourrais en parler pendant des heures.

Composants du design system et éléments d’UI

Leçons apprises à la dure

Difficultés techniques, compromis et communication

Bibliothèques Figma

Elles ne sont pas parfaites ! Elles n’ont pas fonctionné quand j’en avais le plus besoin, ce qui m’a obligé à restructurer complètement l’organisation des fichiers Figma. Un défi technique imprévu qui a pris énormément de temps.

Gestion de la documentation du design system

L’un de mes plus grands regrets est de ne pas avoir insisté davantage pour utiliser ZeroHeight pour la documentation du design system. J’ai rédigé toute la documentation, mais elle est restée dans Figma. J’aurais préféré une plateforme distincte ou intégrée aux blocs de code, mais cela faisait partie d’un compromis entre le PM et le client.

Gestion des équipes et documentation des décisions

Documenter les décisions produit est essentiel dans un design system de grande envergure pour assurer la cohérence, suivre les justifications et aligner les équipes. Cela évite la confusion, réduit le travail redondant et sert de référence pour les futures itérations, permettant aux designers, développeurs et PMs de rester alignés. (Pas facile !)

Points clés

Communication : La collaboration entre les équipes était essentielle pour aligner les designers, les développeurs et les parties prenantes, garantissant ainsi une adoption cohérente du système de design.
Réflexion et stratégie à l’échelle du système : Construire un système évolutif nécessitait d’anticiper les besoins futurs, de créer des composants flexibles mais structurés et de maintenir la cohérence sur 14 sites.
Documentation : Une documentation claire et complète était essentielle pour favoriser l’adoption, permettre une mise en œuvre correcte des composants et assurer la pérennité du système.

Résultats et prochaines étapes

Parties prenantes satisfaites

Tous les acteurs impliqués ont été très satisfaits des résultats, désormais en ligne. Pour la prochaine organisation, mes collègues ont confirmé que le système fonctionne très bien : il est rapide, fluide et facile à utiliser.

Amélioration des indicateurs

Grâce à Google Analytics, j’ai analysé les données avant et après la refonte du site web de BCMHSUS, et il est évident que l’expérience utilisateur s’est améliorée. Les utilisateurs peuvent désormais trouver l’information plus facilement.

Appliquer le design système aux futurs sites et itérer

Pendant que je travaillais encore chez Evolving Web, j’ai commencé à appliquer le système à d’autres sites, notamment celui de B.C. Children, B.C. Cancer et du B.C. Centre for Disease Control. De nouvelles palettes de couleurs et adaptations seront mises en place.