Un site web culturel, l'Astrolabe
Portail culturel ✦ UX UI Design ✦ 2024
Contexte
En 2024, la société Tech’Advantage m’a contactée pour accompagner son client, la Communauté de Communes du Grand-Figeac, dans la refonte de son site internet L’Astrolabe.
L'Astrolabe représente le centre culturel de la communauté de communes. Il orchestre tous les services culturels : spectacles, cinéma et événements.
Le défi ?
Fusionner le site de L’Astrolabe et celui du Réseau des médiathèques – en un seul portail centralisé. Il intégrera divers services tels que la billetterie et la programmation cinéma et culturelle.
L’ancien site présentait plusieurs difficultés :
L'absence de section dédiée à la médiathèque
Une version mobile peu ergonomique
Un parcours de réservation peu intuitif pour les places de cinéma
Un agenda aux contenus dispersés
Un non-respect des normes d’accessibilité numérique
Point de départ
Pour débuter, nous avons conçu l’arborescence du site lors d’ateliers de co-conception.
L’équipe de la médiathèque a exprimé ses besoins, et je les ai accompagné pour structurer une navigation claire et intuitive à travers les différentes rubriques.
Navigation : un site à la fois riche en contenu mais simple à naviguer
J’ai conçu un menu organisé en six catégories principales avec des pictogrammes et leurs intitulés.
Chaque entité (cinéma, médiathèque, spectacle…) possède ainsi son propre espace bien identifié.
Nous avons gardé le menu burger, présent sur l’ancien site et apprécié par les utilisateurs, pour regrouper les liens secondaires.
Médiathèques : comment améliorer la mise en avant des contenus
Toutes les informations des médiathèques ont été centralisées dans une section.
Les couvertures des documents et les vignettes thématiques apportent de la couleur et rendent l’expérience plus immersive.
La recherche est optimisée avec une "Recherche guidée" pour accompagner les usagers.
J'ai gardé un équilibre visuel entre les textes, les images et les espaces blancs pour éviter la surcharge cognitive.
Cinémas
La section Cinéma de l’ancien site avait été jugée peu ergonomique par les usagers. De plus, le nouveau site devait intégrer une billetterie en ligne.
J'ai donc repensé l'affichage des séances pour permettre aux usagers de réserver facilement leurs places de cinéma.
Événements :
Avec une programmation variée issue de différentes sources (cinéma, salle de spectacle, festivals…), le défi principal était d’offrir une navigation permettant aux utilisateurs de trouver rapidement les événements qui les intéressent.
Solutions mise en place :
Un agenda unique rassemblant l’ensemble des événements pour une vue d’ensemble immédiate.
Uniformisation du format d’affichage, garantissant une meilleure lisibilité et cohérence visuelle.
Ajout d'un filtre spécifique pour le jeune public.
Mise en avant des événements clés en tête de page.
Système de tags colorés facilitant l’identification rapide des catégories d’événements.
Directions visuelles : traduire l'univers culturel du lieu
Le site comportant une grande richesse d’informations et de visuels, j’ai opté pour un design minimaliste et épuré afin de garantir une lecture agréable.
J'ai exploité la charte graphique existante pour renforcer l’identité visuelle contrairement à l’ancien site jugé trop neutre.
Principes graphiques appliqués :
Une palette monochrome élégante (noir et blanc), rehaussée par des touches de jaune vif pour attirer l’attention sur les éléments clés (bandeaux d’alerte, badges, tags…).
Une hiérarchisation claire des textes, avec un contraste marqué entre les tailles de police : des titres en gras et imposants pour structurer l’information, et des descriptions plus légères pour une lecture facile.
Des espaces blancs maîtrisés, permettant d’aérer les pages et d’éviter toute surcharge visuelle.
Une identité culturelle affirmée, grâce à l’intégration de motifs et d’icônes géométriques inspirés du domaine artistique.
Des pictogrammes minimalistes et abstraits réalisés par la graphiste qui a créé la charte graphique, ont été conçus pour être à la fois esthétiques et fonctionnels, ils apportent une touche de créativité.
Audit d'accessibilité : ça dit quoi ?
Les maquettes graphiques ont été auditées par l'équipe de la société Koena, spécialisée en accessibilité numérique.
Ayant pris en compte l’accessibilité tout au long de la conception, seules deux non-conformités ont été relevées sur les maquettes.
Ils ont aussi pu ajouter leurs recommandations à destination des développeurs, directement sur les maquettes .
Résultats
Un accès centralisé
Les usagers peuvent désormais accéder aux services culturels via une plateforme unique.
Une identité visuelle plus forte
Un style graphique sur-mesure à la fois fonctionnel et esthétique.
Une expérience utilisateur améliorée
Un site fluide, efficace et pensé pour offrir une expérience optimale.
Les étapes du projet
Brief Initial
Rencontre avec l'équipe médiathèque pour définir les objectifs et les attentes spécifiques.
Elaboration du planning et de l'échéancier.
Mise en place des ateliers de co-conception.
Conception de l'Arborescence
Structuration du site.
Wireframes
Esquisses des différentes pages pour valider l'expérience utilisateur (UX).
Maquettes Graphiques
Création d'un design en accord avec l'identité visuelle existante.
Présentation
Présentation des maquettes aux élus et services concernés.
Ajustements du design en fonction des retours.
Audit d'accessibilité
Audit des maquettes graphiques.
Transfert des maquettes pour le développement
Session de clarification du projet.
Partage des maquettes Figma.
Création d'un design system.
Exportation des différents éléments graphiques.