Refonte du site institutionnel
de l’agglomération Pays Basque
Client : Communauté d’agglomération Pays Basque
2024
Missions :
- Refonte du site institutionnel dans le respect des critères d’accessibilité (RGAA) et d’éco-conception
- Création d’un design system
- Création d’une usine à site pour déployer, à partir d’un thème conçu en marque blanche, une dizaine de sites pour le territoire
Mon rôle :
UX et UI Designer
Certaines phases d’UX Design ont été produites en collaboration avec Raphaël Yarrassarry
La communauté d’agglomération du Pays Basque est située dans le département des Pyrénées-Atlantiques (64). Cette intercommunalité est composée de 158 communes.
Challenges :
- Organiser les contenus pour un accès facile par l’utilisateur, et une gestion adéquate par les différents services de la communauté d’agglomération
- Créer des parcours utilisateurs intuitifs
- Rationaliser les composants du site, pour alléger le développement
- Eco-concevoir le site
- Intégrer les bonnes pratiques d’accessibilité, en vue d’une conformité RGAA
Les différentes étapes de design
1. État des lieux et organisation de l'information
- Analyse de la fréquentation du site actuel
- Liste des contenus existants
- Tri de carte en ligne au près des utilisateurs
- Catégorisation des contenus
- Création de l’arborescence
2. Atelier de co-conception avec les utilisateurs
Atelier de co-construction de la page d’accueil, auprès d’un panel composé d’utilisateurs variés et de personnes internes à l’agglomération Pays Basque.
- Présentation du travail préparatoire, et des personas
- Exercice sur les objectifs de la page d’accueil, recherche de solutions et éléments d’interface pour y répondre
- Esquisse de la page d’accueil en petit groupe
3. Design de la page d'accueil
Conception de la page d’accueil à partir du travail préparatoire, de l’atelier avec les utilisateurs, et de la charte graphique établie.
Cette phase de design va définir les grands principes de l’identité graphique du futur site. Elle se découpe en plusieurs temps de recherche, design, proposition et itération.
4. Tests de la page d'accueil auprès des utilisateurs
Le test des 5 secondes
Ce test consiste à montrer la page 5 secondes à un panel d’utilisateurs, et mesurer leur ressenti, compréhension et mémoire des éléments.
5. Définition des parcours utilisateurs
- Analyser les informations les plus recherchées sur le site, et le croiser avec les objectifs de l’agglomération Pays Basque
- Proposer des parcours utilisateurs adaptés pour répondre aux besoins des utilisateurs, et aux enjeux de l’institution
- Réaliser les wireframes des pages, qui constitueront les parcours permettant d’accéder à ces informations
6. Définition les templates de pages nécessaires
- Rationaliser les parcours et composants, pour proposer une liste de templates de pages
- S’assurer que chaque type de contenu, a un template adéquate attribué
7. Design des templates et composants
- Design de l’ensemble des templates nécessaires à la construction du site, des éléments de navigation et différents composants
- Création d’un système de design
- Prévoir simultanément un affichage fonctionnel sur tous types de devices
8. Tests des interfaces auprès des utilisateurs
Test de 3 parcours utilisateurs different auprès d’un panel.
L’utilisateur a pour mission de trouver une information précise, en partant de la page d’accueil. Nous observons son parcours et sa compréhension des interfaces.
Édition des templates en fonction des retours utilisateurs.
Photos de l’atelier de co-conception de la page d’accueil avec les utilisateurs
Un atelier de co-conception a été organisé sur une demi-journée avec un panel d’utilisateurs représentants des personnas (chef d’entreprise, citoyen, représentant local…). Cet atelier s’est concentré sur la conception de la page d’accueil, afin de définir collectivement l’impacte attendu de celle-ci, et les fonctionnalités à prioriser.
Extrait de composants du design system
Le design system est composé d’une grille, une série de blocs, des éléments d’interaction et de navigation, des styles de titres et de couleurs avec un rôle associé à chacun. L’ensemble de ces composants respectent les critères d’accessibilité du RGAA, et sont utilisés ensuite pour composer des pages.
Extrait de mon environnement de travail
L’ensemble des templates ont été réalisés à partir des composants produits au sein du design system.
