Bordeaux.fr : Un site repensé pour une ville en mouvement
Objectifs et contexte
Une organisation sur-mesure
Pour répondre aux contraintes temporelles du projet et maintenir un rythme de production soutenu sans compromettre la qualité finale, nous mettons en place une organisation de travail sur mesure avec l’équipe projet. Le point d’ancrage de notre collaboration est une journée hebdomadaire en présentiel dans nos locaux. Ces sessions jouent un rôle crucial dans la réussite du projet, permettant des échanges directs, des itérations rapides et des ateliers de conception improvisés selon les besoins.
Le processus de conception s’adapte également pour permettre l’avancement simultané de différentes phases : la direction artistique et la création de wireframes progressent en parallèle, accélérant la production d’interfaces tout en préservant la cohérence. Cette méthode permet de transférer progressivement les écrans validés vers la phase de design UI sans attendre la finalisation complète des maquettes basse fidélité.
Concilier communication institutionnelle et services aux usagers
Le projet poursuit deux objectifs parallèles : offrir aux citoyens une plateforme facilitant l’accès aux services et informations pratiques, et créer un média d’actualité locale. Pour relever ce défi, l’équipe projet crée « Le Mag », un espace éditorial distinct qui adopte les codes des médias modernes. Cette section met en valeur le dynamisme de la ville à travers différents formats (reportages, portraits, podcasts, actualités) avec un design inspiré des réseaux sociaux, tout en maintenant une cohérence avec l’identité globale du site.
S’adresser à l’ensemble des citoyens
Le contexte politique constitue un paramètre important à prendre en compte. Le futur portail doit véhiculer l’image d’une ville à taille humaine, inclusive et tournée vers l’avenir. Il doit parler au plus grand nombre tout en prenant en considération les différentes directions métiers de la ville, sans en privilégier aucune.
La dynamique du projet rendant l’opportunité d’une concertation citoyenne formelle trop compliquée à mettre en place, nous capitalisons sur notre connaissance approfondie des usages construite lors de notre expérience au long cours avec Bordeaux Métropole, et sur la sollicitation ponctuelle lors de tests portant sur des questionnements stratégiques. Cette expertise, acquise lors de précédents projets, se révèle précieuse pour orienter les choix de conception.
Le projet confronte un défi classique des institutions : une arborescence initialement organisée selon les services internes plutôt que les besoins des utilisateurs. Le travail délicat à mener est donc d’initier une transition vers un résultat qui soit consensuel auprès de l’institution tout en étant parfaitement compréhensible par les citoyens. Pour assurer l’efficacité de cette transition, le projet rassemble toutes les parties prenantes (associations, élus, équipes métiers) afin de construire collectivement cette nouvelle arborescence, conciliant ainsi les visions des différentes directions tout en simplifiant l’accès à l’information pour l’usager.
L’interface innove en adoptant un menu vertical en version desktop, s’écartant des traditionnels menus horizontaux. Ce choix représente un compromis entre la vision moderne de l’équipe projet, qui préférait initialement un burger menu omniprésent, et les enseignements des tests utilisateurs. Ces derniers démontrent l’efficacité d’une navigation verticale à condition de maintenir des labels clairement visibles. Les entrées de premier niveau restent ainsi immédiatement identifiables, tandis que l’accès aux démarches administratives bénéficie d’une entrée directe dans le menu principal.
Une conception modulaire au service de l’évolutivité
La complexité du projet nous amène à développer une approche modulaire poussée. Nous créons un système de composants réutilisables qui répondent aux différents besoins identifiés : mise en avant de citations, navigation par ancres, maillage interne entre contenus, ou encore la mise en valeur de blocs permettant de proposer des services aux usagers.
Cette approche permet non seulement d’harmoniser l’expérience utilisateur, mais aussi de faciliter le travail des équipes de développement et de contribution.
Le back-office, quant à lui, joue un rôle clé dans la gestion du site. Bien que le projet de refonte ne concerne pas directement son interface, nous avons optimisé son fonctionnement en accompagnant l’équipe projet sur des choix techniques essentiels en concevant un outil qui allie efficacité technique et flexibilité d’usage.
Un site moderne qui sort du lot
Après 10 ans, le site de Bordeaux se modernise avec un défi de taille : proposer un site « moderne, qui sort du lot, éco-conçu et accessible, tout en respectant la charte graphique de la ville ». Comment transformer ces objectifs en solutions graphiques ?
En déterminant un socle d’éléments et règles graphiques qui permet de construire tout un univers visuel.
Typographie et iconographie
Afin de respecter les objectifs d’éco-conception, la police système Arial est retenue. Le principal défi est d’intégrer cette police assez basique dans une interface qui se veut moderne et engageante. Le choix des icônes s’est porté sur un style simple et moderne aux lignes arrondies donnant un esprit accueillant.
Couleurs et pistes créatives
Toute couleur fonctionne dans une charte graphique pour peu que l’on ajuste les proportions.
Tournée vers l’avenir, la ville souhaite une identité visuelle qui parle à tous les citoyens. Après plusieurs essais avec des couleurs vives et dynamiques (et de nombreuses discussions !), nous choisissons un bleu électrique. Cette teinte moderne crée un pont avec la tradition tout en incarnant le renouveau souhaité par la ville. Une couleur dynamique qui s’adapte parfaitement aux interfaces numériques.
Cette couleur principale attire l’attention et met en valeur les éléments clés de l’interface. Son excellent contraste améliore la lisibilité et permet l’utilisation de texte blanc, restant accessible même aux personnes ayant besoin d’un fort contraste visuel.
L’identité visuelle du site évolue durant toute la conception pour aboutir à une liste de gabarits aux couleurs du nouveau portail en proposant à la fois des solutions graphiques efficaces et originales.
L’éco-conception au cœur du projet
Nous développons plusieurs stratégies pour optimiser le poids du site :
Comment conjuguer les ambitions éditoriales du projet avec les exigences de l’éco-conception numérique ? Une question qui nous a accompagnés tout au long de cette refonte.
Images
Les images sont utilisées uniquement si elles apportent une vraie valeur au contenu. Pour garder un design attractif tout en allégeant les pages, des alternatives comme les aplats de couleur remplacent certains visuels, ce qui aide aussi les équipes éditoriales en l’absence d’images adaptées.
Cartes et vidéos
Les contenus lourds comme les cartes interactives ou les vidéos sont externalisés. Ce contenu ne se charge qu’à la demande de l’utilisateur, optimisant ainsi les performances du site.
Typographie
L’Arial, police système préinstallée sur tous les systèmes d’exploitation, a été choisie pour éviter le chargement de polices externes. Une décision alignée avec les recommandations du RGESN en limitant l’empreinte carbone liée au poids des polices web, qui peut atteindre en moyenne 138 Ko, tout en garantissant lisibilité et accessibilité.
Impact et perspectives
L’ensemble de ce travail collaboratif donne naissance à un site moderne, accessible et conçu pour répondre efficacement aux attentes des citoyens, des touristes et des élus.
L’équilibre est trouvé entre l’aspect média et la dimension servicielle, offrant aux usagers un outil pratique et agréable à utiliser au quotidien. Le respect des normes d’accessibilité et d’écoconception sur le plan de l’ergonomie et du design est assuré, tout en maintenant une identité visuelle forte et contemporaine.
À noter que l’organisation méthodique mise en place et l’investissement des équipes projet ont permis de maintenir un rythme de développement soutenu malgré les contraintes liées au contexte institutionnel.
Un portail tourné vers l’avenir
Finalement, cette refonte marque une étape clé pour la ville de Bordeaux, dans la digitalisation des services municipaux, dans les services apportés aux citoyens et dans la mise en avant d’un espace média numérique dédié. Une belle opportunité d’offrir un site évolutif qui continuera à s’adapter aux besoins actuels et futurs.
