Brief
Le travail s’est concentré sur la refonte de la page d’accueil et sur l’optimisation des composants du Design System.
Le Design System existait déjà, mais il n’était pas appliqué de la même manière sur tous les portails. Cette utilisation partielle entraînait un manque d’unité visuelle et fonctionnelle entre les sites, et de la confusion chez les usagers.
On cherchait donc à harmoniser l’expérience utilisateur sur l’ensemble des plateformes, à consolider l’identité numérique de la Région et à rendre ses portails modernes, accessibles et cohérents.
Identifier les axes de travail prioritaires
Comprendre les enjeux de la Région
Sur cette refonte, plusieurs contraintes propres à la Région sont apparues.
D’abord, pour un site institutionnel, la conformité au RGAA était indispensable, tout comme une navigation fluide sur chaque site et d’un site à l’autre.
Il fallait aussi penser une page d’accueil modulaire, capable de se décliner pour chacun des six sites, avec un univers visuel unifié et facile à adapter aux différents « visages » de la Région.
Enfin, la direction artistique devait être modernisée, pour ancrer l’identité numérique de la Région dans son temps et refléter les valeurs qu’elle défend : l’engagement écologique, l’action territoriale et la proximité avec les citoyens.
Un audit nécessaire
Le projet a commencé par un audit ergonomique des six portails existants.
Il en est ressorti trois axes d’amélioration principaux :
- L’accessibilité, pour renforcer l’inclusion de tous les publics et se conformer aux exigences du RGAA.
- L’homogénéité, pour une expérience cohérente d’un portail à l’autre.
- L’utilisabilité, pour une navigation plus fluide et plus intuitive.
Retravailler l’UX du Design System grâce à des quick wins
Cette première vue d’ensemble a servi de base à des quick wins sur la structure UX des composants déjà présents dans le Design System.
À ce stade, on n’a retravaillé que les composants unitaires, pour améliorer vite la cohérence et la qualité de l’expérience sur les trois axes prioritaires relevés pendant l’audit.
Documenter les choix dans le Design System
Pour que toutes les parties prenantes du projet le prennent en main facilement, on a commenté le Design System. Les annotations donnent des conseils et astuces sur ces axes prioritaires, et signalent ce qu’on a corrigé dans notre refonte des composants.
Approche collaborative et itérative
Une page d’accueil modulaire et adaptable
Le projet s’est construit avec les chefs de projet des différents portails, le responsable éditorial et nous, les designers d’expérience.
Un atelier de zoning a permis d’aboutir à un consensus sur la structure de la page d’accueil. Le rôle des équipes éditoriales s’est révélé central, parce que ce sont elles qui mettent à jour les contenus au quotidien. Il fallait donc un juste équilibre entre pages statiques et dynamiques.
Du zoning aux maquettes basse fidélité
Une fois le zoning validé, on est passés aux maquettes basse fidélité pour préciser le contenu et la disposition des blocs. Cette phase a donné lieu à de nombreux échanges avec les équipes éditoriales et les chefs de projet des portails, parfois tendus sur le poids de certains composants dans la structure. Les besoins variaient d’un portail à l’autre : certains comptent une part importante de contenu éditorial mis à jour régulièrement, d’autres très peu.
En avançant par itérations, on a progressé vers une structure commune aux six portails.
Nouvelle orientation graphique
Les pistes créatives
Pendant l’audit, on avait constaté que le rouge utilisé dans les projets web pouvait gêner la lecture et posait des problèmes d’accessibilité. Les acteurs de la Région voulaient une nouvelle direction artistique, en conservant un maximum d’éléments existants, du rouge oui mais par petites touches.
On a proposé plusieurs pistes graphiques, de petites photographies à des motifs plus simples, pour éviter des visuels trop lourds. L’idée était d’alléger les pages et de répondre à la volonté de la Région d’avoir un site éco-conçu.
La direction artistique
La direction artistique utilise des tons terre, qui évoquent le territoire et sa dimension géographique. Mais on a gardé des touches de rouge dans le logo et sur les boutons d’action principaux, pour rester dans la continuité de l’image de la Région. L’illustration vectorielle en tête de page peut changer au fil des saisons ou de la mise en avant de territoires. La région couvre une vaste diversité de paysages, on trouvait interessant de les mettre en avant suivant les circonstances.
Mise à jour du Design System
Les recommandations et améliorations issues de l’audit ont été intégrées pendant la conception graphique (UI design).
On a fourni aux développeurs les composants mis à jour avec les nouvelles couleurs, ainsi que des règles d’harmonie visuelle plus précises définies pendant la refonte.
On a aussi créé quelques composants, notamment les cartes, pour mieux distinguer leurs usages sur le site et correspondre à la nouvelle direction artistique.
