top of page

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.
 

La recherche et processus

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.

01

Atomic design & a component audit

Commencer petit pour voir grand. Les principes de Brad Frost sont essentiels. En parallèle, l’équipe et moi réalisons un vaste audit des composants des 14 sites web de la PHSA afin d’identifier ceux qui doivent être intégrés au système.

02

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.

03

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.

Attentes et résultats des enquêtes et des analyses comparatives

Comprendre les objectifs commerciaux et l'industrie

Ici, j’ai identifié les thèmes principaux, la priorisation du public, les objectifs commerciaux du site Web, ainsi que ce que les parties prenantes souhaitaient obtenir du nouveau site Web.

Thèmes principaux

Il y avait un fort consensus sur le fait que l'information était difficile à trouver et qu'une refonte majeure de l'architecture de l'information s'imposait. La nécessité de démontrer les valeurs du collège, ses différents campus, ses programmes et son innovation tout en étant une petite communauté dynamique était une priorité absolue.

Priorisation du public

Il n’y a pas eu beaucoup de surprises ici, les principaux publics identifiés par les parties prenantes étaient les étudiants et le personnel actuels et potentiels . Bien sûr, de nombreux publics secondaires et tertiaires sont concernés, tels que les donateurs, les parents, etc., mais cette enquête est utile pour réaligner les parties prenantes lors des phases ultérieures de conception et d’itération. L’une des choses qui est ressortie de la découverte était le besoin urgent d’améliorer l’expérience des futurs étudiants étrangers .

Objectifs commerciaux

Comme dans la plupart des établissements d’enseignement supérieur, l’un des principaux objectifs était d’ encourager les inscriptions d’étudiants potentiels. Étonnamment, nous avons appris grâce à l’enquête que l’amélioration de la découvrabilité du contenu et des documents sur la vie étudiante pour les étudiants et le personnel était une priorité absolue, car cela avait un impact négatif sur l’expérience des étudiants. De plus, il était important de communiquer la marque et la philosophie Loyalist. Ils voulaient traduire l’ambiance du campus en une expérience en ligne. Petit, mais solide.

This is text to into the gallery underneath

Résultats et validations des ateliers user persona

Parler aux élèves (8 participants), au personnel, aux parents et aux membres de la collectivité (12 participants)

Pour l’atelier, j’ai préparé un tableau FigJam avec les différentes personas. En groupe, nous avons attribué des noms et des photos à chaque persona après un brise-glace. Nous avons examiné chacune des hypothèses que j’avais formulées lors de l’atelier au sujet des motivations, des objectifs et des points douloureux. Les membres de l’atelier pouvaient être d’accord ou non et ajouter leurs propres notes autocollantes, puis nous en avons discuté ensemble.

​

Une grande surprise : le groupe des jeunes étudiants a eu les défis les plus techniques. J’ai pris note de consacrer plus de temps à présenter FigJam à l’avenir et de laisser aux étudiants le temps de se connecter. 
 

Les 5 étudiants canadiens étaient un mélange d’étudiants de première année, de deuxième année et de diplômés. Les principaux points problématiques dont ils ont discuté étaient la confusion au sujet des détails du programme et le fait de ne pas pouvoir trouver d’information sur les cours du campus en ligne. Tous ont dit qu’il était plus facile d’aller demander en personne aux bureaux des services aux étudiants. Les étudiants diplômés n’ont pas pu trouver en ligne des documents et des renseignements importants sur les diplômes et les diplômes. Ce que j’entends, c’est qu’il y a beaucoup de travail à faire dans l’architecture de l’information et que je vais aider mon stratège numérique au sein de l’équipe.  

​

Les 3 étudiants internationaux étaient des étudiants de première année et des diplômés. Ils ont surtout parlé de confusion au sujet des exigences internationales, des programmes qui leur étaient offerts, des programmes disponibles pour les cours et de la façon d’intégrer la vie étudiante à leur arrivée sur le campus. 

​

​Les professeurs et le personnel ont tous signalé des problèmes similaires en trouvant de l’information pertinente et à jour sur les offres d’emploi et les possibilités de carrière. Le Loyalist College utilise une plateforme distincte pour les carrières, de sorte que la section des demandes d’emploi était hors de portée, mais j’ai appris que nous pourrions fournir plus de renseignements et d’orientation sur les emplacements, les campus et les cheminements de carrière avant que les professeurs et le personnel potentiels ne se rendent à la plateforme externe. Ils ont également dit qu’ils voulaient en apprendre davantage sur le campus principal de Belleville et sur ce à quoi ressemblerait la vie là-bas.

Add gallery

​Les professeurs et le personnel ont tous signalé des problèmes similaires en trouvant de l’information pertinente et à jour sur les offres d’emploi et les possibilités de carrière. Le Loyalist College utilise une plateforme distincte pour les carrières, de sorte que la section des demandes d’emploi était hors de portée, mais j’ai appris que nous pourrions fournir plus de renseignements et d’orientation sur les emplacements, les campus et les cheminements de carrière avant que les professeurs et le personnel potentiels ne se rendent à la plateforme externe. Ils ont également dit qu’ils voulaient en apprendre davantage sur le campus principal de Belleville et sur ce à quoi ressemblerait la vie là-bas.

Définir les renseignements sur les activités de découverte pour la conception des décisions

Fighting with PMs

Parce que les étudiants étrangers, que le Loyalist College tente de recruter, ont tant de difficultés à trouver l’information dont ils ont besoin, je la présente dans la navigation d'utilité et je crée une catégorie distincte pour leurs besoins dans le menu déroulant

En raison des réponses des intervenants, des étudiants et du personnel qui ont signalé des problèmes liés à la capacité de trouver de l’information et des documents de façon fiable et attendue, je travaille en étroite collaboration avec le stratège numérique. Ensemble, nous avons examiné les activités de découverte et réorganisé l’architecture d’information du site Web. À ce moment-là, je n’ai examiné que les données de l’analyse des lunettes du Loyalist College pour voir les chemins empruntés par les utilisateurs et les points faibles dans les données. J’ai pu examiner les données des six derniers mois et j’ai rédigé un rapport d’analyse de données que j’ai remis aux intervenants pour appuyer davantage les décisions de conception. 

adagency.png

Wireframes

Le wireframing est un processus collaboratif essentiel.
 

Livrables inclus :

  • Page d’accueil

  • Vie chez les loyalistes page

  • Page de liste des programmes

  • Page de détails du programme

  • Page du centre des médias (nouvelles et événements agrégés)

  • Page de détails sur les actualités et l’événement

  • Page des politiques

Screenshot 2024-12-03 at 1.07.40 PM.png

Traduire les idées et le développement de Wordpress en décisions de conception 

Les couleurs et la typographie

Frame 6035.png
Frame 6035-1.png

Collaboration au développement et compromis sur les ressources

En travaillant avec l’architecte des solutions du projet, nous avons identifié très tôt que compte tenu du budget avec lequel nous devions travailler, nous compterions sur les plugins WordPress pour les cartes de détails d’événement et le calendrier des événements.

​

 

L’architecte a partagé un environnement de jeu WordPress avec moi pour comprendre les limitations et j’ai conçu les wireframes autour des fonctionnalités du plugin WordPress

wp-1.png

Cela signifie que nous pourrions affecter plus de ressources à des éléments plus importants, comme la page d’accueil et la page de détails du programme très chargée en information
 

  1. La navigation et le wayfinding étaient essentiels. L’utilisateur est maintenant plusieurs couches de profondeur et je me suis assuré avec le leader technique qu’un étudiant pourrait revenir à leurs résultats de recherche sans perdre leurs filtres. Les breadcrumbs sont visibles sur une page de troisième niveau (Accueil / Page parent / Page enfant) pour assurer la visibilité de l’état du système

  2. L’appel à l’action principal est « Appliquer », qui mène au site de demande du gouvernement provincial et qui était hors de notre champ d’application (c’est un cauchemar UX). Les intervenants ont mentionné que les étudiants devraient réserver une visite, car les visites de campus peuvent entraîner des conversions plus élevées d’inscriptions.  

  3.  L’un des principaux points de difficulté soulevés par les intervenants du sondage et les étudiants dans le cadre de l’atelier sur la personnalité des utilisateurs était la confusion quant à savoir quel campus se trouve sur le programme, si le programme est ouvert aux étudiants canadiens ou étrangers et pendant quel semestre le cours est offert. J’ai fait ressortir cette information pour que les élèves puissent la comprendre rapidement et prendre plus de décisions. 

  4. Encore une fois, la navigation était essentielle pour obtenir ce bon résultat. J’ai réutilisé la disposition des 2 colonnes avec navigation latérale, qui colle au haut de l’écran lorsque l’utilisateur fait défiler. Les étudiants (ou leurs parents et conseillers) peuvent maintenant voir rapidement les exigences, le contenu des cours et les coûts. L’ordre de cette navigation latérale a été guidé par les commentaires des participants à l’atelier et validé par les parties prenantes.

  5. Les commentaires des étudiants de l’atelier ont souligné la nécessité de comprendre et d’accéder facilement aux coûts pour les étudiants nationaux et internationaux, donc je fais une distinction claire dans les accordéons qui ont également servi à économiser un peu de l’immobilier vertical.

  6. Un objectif commercial principal était de mettre en valeur le campus et l’expérience des étudiants. Pour ajouter de l’impact, j’ai inclus un espace pour les nombreux témoignages des anciens et des vidéos. Le Loyalist College a également inclus un widget externe de Lightcast Data qui faisait partie des exigences relatives au cadre de connexion.

5

6

Offrir des solutions parallèlement à la direction créative

Valider avec les intervenants

Je ne suis pas concepteur d’interface utilisateur ni directeur artistique. Heureusement, j’ai travaillé avec un membre de l’équipe incroyablement talentueux qui est les deux. Ils ont mené la vision artistique et nous avons collaboré pour assurer que le design de l’interface utilisateur soit en phase avec les wireframes.

Add gallery

​

Résultats finaux et prochaines étapes

Voici la page d’accueil en production.

 â€‹

Voici l’étude de cas écrite par EvolvingWeb.

​

Les analyses ont été mises à jour dans Google Analytics 4 afin que nous puissions surveiller l’activité des utilisateurs et trouver des endroits pour optimiser l’expérience utilisateur et les parcours. Les intervenants étaient ravis des résultats, et l’équipe et moi-même étions tout aussi satisfaits du résultat de nos efforts.

Voir plus d’études de cas

bottom of page