Design System unil.ch

Après un état des lieux réalisé en 2020 sur les évolutions possibles des sites internet de l’Université de Lausanne (UNIL), une refonte en profondeur est lancée. Il s’agit de trouver le langage visuel et l’architecture de l’information adaptée à l’évolution de l’institution. Pour refléter la modernité, l’apport à la société et valoriser la recherche et l’enseignement de l’UNIL, le nouveau site doit répondre aux besoins des publics-cibles et leur permettre de trouver rapidement l’information recherchée.

Lors de la défense de notre offre, nous avons insisté sur l’impact environnemental du numérique. Nous croyons fermement que tous les projets doivent être accessibles, inclusifs mais aussi que nous avons une responsabilité quant à la consommation et la durabilité du projet. L’UNIL est très réceptive concernant cette composante et c’est ensemble que nous avons cherché des pistes. La direction a soutenu et encouragé cet engagement.

La démarche se nomme l’éco-conception et nous nous basons entre autres sur le très bon guide des designers éthiques pour proposer des leviers d’action concrets.

Il n’y a pas une seule marche à suivre mais il s’agit plutôt d’amélioration continue : tester, mesurer puis améliorer si les résultats ne semblent pas concluants.

Le premier point essentiel de cette démarche consiste à fixer des objectifs : à quoi va servir le site ? quels sont les objectifs de nos publics cibles ? Suite à cela, il est nécessaire d’optimiser le flux de navigation pour atteindre les pages clés : plus le chemin est rapide, moins il est nécessaire de charger de pages. C’est donc le parcours dans son ensemble qui doit être optimisé. Cela prend en compte le travail de référencement (SEO) des pages : s’il est bien fait, il est possible d’arriver directement depuis un moteur de recherche sur la page qui répond à notre besoin.

Afin de ne pas participer à l'obsolescence, nous nous assurons que le site fonctionne sur des appareils anciens et des réseaux moins performants.

Certaines interactions sont évitées : scroll infini, complétion automatique, cartes interactives (privilégier les images ou ne les charger qu’au clic), etc.

Le contenu est ce qu’il y a de plus important : plus une page en contient, plus elle peut être lourde. Il est donc essentiel de rédiger pour le web, et d’enlever ce qui est superflu. 

Les images, les vidéos et les documents à télécharger font également partie du contenu. À quels endroits sont-ils vraiment pertinents (éviter à tout prix les images prétextes) ? Il est aussi important de décrire les éléments pour éviter un téléchargement inutile. Le design visuel a aussi un rôle à jouer : les images sont traitées et allégées d’information (moins de couleur = moins de poids), ce qui permet non seulement de garantir une page plus légère mais participe également à l’effort de communication de l’UNIL et affirme sa position. 

Presque 2000h de travail de conception, de design, d’atelier, d’intégration, de test, de développement frontend et aussi de coordination. Le nombre de parties prenantes dans un tel projet est conséquent. Nos interlocuteur·rices sont le Centre informatique et le Service de communication et d'événementiel (Unicom), mais également d’autres entreprises prestataires de l’UNIL pour l’intégration de notre travail dans le CMS. Il s’agit de garder le cap du planning et du budget sur un projet dont les attentes sont élevées.

Une phase de recherche importante pour une nouvelle proposition d’architecture de l’information, d’autant plus dans le cadre d’un travail d’éco-conception aussi avancé.

Le site principal s’adresse en premier lieu à des publics externes, à des personnes souhaitant venir étudier, travailler ou mener des recherches. Il doit être clair, refléter l’identité et faire rayonner l’UNIL.

Les visiteurs et visiteuses doivent pouvoir comprendre l’UNIL, son fonctionnement et pouvoir rapidement se repérer. 

Pour mieux comprendre l'écosystème de cette organisation d’envergure, nous avons réalisé, avec les parties prenantes internes, un atelier pour nous permettre d’identifier et de cartographier la présence web de l’UNIL à travers les différents points de contact. Ceci dans le but de comprendre les chemins que les personnes vont emprunter pour accéder à l’information et aux services de l’organisation.

Qui de mieux placés que les futurs étudiants et futures étudiantes pour nous faire part de ce qu’ils et elles se posent comme questions et viennent chercher sur le site de l’UNIL ? Nous avons participé aux journées portes ouvertes pour venir à leur rencontre et leur poser ces questions. Cela nous a entre autres permis d’avoir une meilleure vision des éléments à mettre sur la page “Futurs étudiants et futurs étudiantes”.

Nous avons réalisé plusieurs sessions de tests d’utilisation : sur l’ancienne version du site, comme point de départ, puis sur divers éléments, dont la navigation, fonction essentielle du bon fonctionnement du site. 

Faire tester nos réalisations, peu importe l’étape du projet, est essentiel et permet de gagner un temps précieux.

Nous réalisons l’architecture de l’information des différents types de pages, les maquettes clés puis nous nous assurons de créer tous les composants nécessaires à la création de tous les nouveaux sites. Pour que cela fonctionne, nous avons documenté les différents composants et leurs variables dans le design system (styleguide). 

Effectivement, un styleguide est un document de référence qui énonce les normes, les directives et les meilleures pratiques à suivre pour maintenir une cohérence et une qualité élevée dans la création de contenu en ligne.

À l’intersection entre le design et la technique, le styleguide ou design system représente l’endroit de référence de tous les composants du nouveau design web de l’UNIL. L’idée étant de pouvoir ré-utiliser tous ces composants les différents supports web de l’UNIL.

Dans la même idéologie que le Design System de la Confédération, il s’agit d’un site internet qui explique comment utiliser le nouveau design. Nous avons choisi l’outil Storybook pour la documentation. Plusieurs prestataires de l’UNIL contribuent déjà au styleguide en utilisant l’existant ou en y contribuant selon les besoins. 

Fort d’une décennie d’expérience dans la mise en place de design system pour les grandes organisations, nous avons conseillé l’UNIL sur les choix techniques et design afin de garantir la durabilité, la maintenabilité, l’accessibilité et l’expérience utilisateur·trice de tous les composants du design system. 

Comment réalise-t-on une arborescence pertinente ? On prend en compte les besoins des utilisateurs et utilisatrices (même mieux : on leur demande leur avis) et on y ajoute notre expertise. 

“On réduit ainsi de 3’600 pages à un concentré commun de 1’200” précise Novella Bellonia, responsable du programme Refonte et de l’équipe communication digitale à Unicom. - source : Le site de l’UNIL, une aventure collective, Uniscope.

Afin d’organiser le contenu de la manière la plus pertinente possible, un tri de cartes a été mis en place.

Un tri de cartes est une des méthodes utilisées pour construire une architecture de l’information en impliquant les utilisateurs et utilisatrices. On leur demande d’eux-mêmes lister et classer les éléments dont ils ont besoin sur le site. Cet exercice a été une réussite puisque plus de 700 personnes ont participé.

Une fois l’arborescence définie, nous devions construire la structure des pages, en étroite collaboration avec l’UNIL. Pour cela, nous avons eu l’opportunité de réaliser plusieurs exercices où nous listions puis hiérarchisions les contenus des pages-clés, avec les services concernés de l’UNIL. 

En plus du mandat de design system, nous avons accompagné l’UNIL sur la mise en place d’un tableau de bord des indicateurs de performances (KPI) du nouveau site internet. À l’aide de l’outil Looker Studio, nous mettons à disposition des rapports interactifs afin de mesurer l’impact du nouveau site. Cela permet à l’UNIL d’adapter le contenu, la communication et sa stratégie de diffusion en fonction des indicateurs.

Comme nous l’avons expliqué (Comment savoir si votre site sert à quelque chose?), un projet c’est avant tout un problème à résoudre. Il est donc essentiel de définir les objectifs du site et surtout les indicateurs !

Avec l’UNIL, nous avons défini les objectifs principaux, liés entre autres aux besoins des publics cibles et la manière la plus pertinente de les mesurer. Ensuite, à l’aide de Google Tag Manager, nous avons mis en place le tracking de ces indicateurs et allons les suivre attentivement. Hé oui, quand un site est publié, le projet n’est pas fini pour autant !