Haute école pédagogique Vaud - Design system

Réfléchir à l'architecture de l'information d'un établissement de type Haute École Spécialisée (HES) ne se limite pas à une simple organisation des contenus, mais implique une véritable discussion sur la stratégie de l'école . Chaque décision prise lors de cette phase détermine ce que l'institution souhaite mettre en avant, ainsi que les priorités qui guideront l’expérience des utilisateur·trices. Cette réflexion stratégique est essentielle pour s'assurer que les objectifs pédagogiques et institutionnels soient alignés avec l'accès à l'information.

Pour mieux comprendre cet écosystème complexe, nous avons conduit un workshop visant à cartographier les différentes applications web de l'école. Cela a inclus l’identification des plateformes internes et externes, ainsi qu’un inventaire clair des objectifs et des responsabilités associés à chaque outil. Cette démarche collaborative permet de renforcer la cohérence et la synergie entre les différents supports numériques. Mais également d'en assurer sa maintenance.

Nous avons réalisé une démarche approfondie de recherche utilisateur·trice pour guider notre conception. Cela a inclus la réalisation d'un sondage et des interviews auprès des publics de l'école pour recueillir des retours précieux sur leurs besoins et attentes. Nous avons effectué du card sorting pour tester les termes et l'organisation de la navigation sur le site. Cette méthode a été cruciale pour garantir une structure intuitive et adaptée à tous les publics.

Le design system que nous avons élaboré s'inspire des codes visuels actuels de l'école tout en restant flexible pour accueillir les évolutions futures de son identité visuelle. En parallèle, une attention particulière a été portée au développement frontend, avec un accent sur l'accessibilité web, garantissant ainsi que toutes les personnes, quelles que soient leurs aptitudes, puissent interagir avec les plateformes de l'école sans obstacles.

Enfin, la documentation des différents composants a été réalisée en utilisant l'outil Storybook. Cette approche permet non seulement de standardiser les éléments visuels, mais aussi de faciliter le travail des développeurs en fournissant une référence claire et interactive pour l'implémentation des composants du design system.