Aller au contenu

Comment concilier le code des marchés publics et l'agilité : l'exemple de la ville de Bernay

Située entre Évreux et Lisieux, Bernay, sous-préfecture de l’Eure, possède un riche patrimoine culturel. Pour la mairie, disposer d’un site, c’est disposer de moyens de communication avec les bernayens. Il s’agit d’une vitrine pour la ville permettant de mettre en avant le tourisme et la culture.

Cependant les outils numériques apportent d’autres réponses aux besoins actuels. Grâce à cette plateforme, la communication peut être à double sens avec la mise à disposition de services en ligne : demandes d’actes, prise de rendez-vous ou tout simplement de la remontée d’informations par formulaire.

C’est à la fois un gain de temps pour les acteurs concernés, mais aussi un gage de satisfaction auprès des administrés.

Dans un contexte de refonte totale, la mairie de Bernay a décidé dès 2019 de mettre en place une application web offrant les services attendus tant sur le plan culturel qu’administratif.

Cependant les besoins d’aujourd’hui ne sont pas ceux de demain. Autrement dit, si le site Internet se doit d’être aujourd’hui accessible sur les téléphones mobiles comme sur les PC de bureau, on comprend aussi que ce pôle numérique d’informations soit une entité vivante qui doive évoluer dans le temps et s’adapter aux futurs besoins identifiés.

Bernay responsive
Un site responsive, qui s'adapte à la mobilité
bernay imagile approved

Un tel cahier des charges évolutifs et surtout faisant la part belle à l’adaptabilité n’est pas aisé à mettre en oeuvre lorsqu’il s’agit de respecter la réglementation du code des marchés publics.

Classiquement, ce cahier des charges prend la forme, dès le début de notre rencontre avec les responsables communication de la mairie, de l’expression exhaustive des fonctionnalités et de leurs spécifications.

Nous commençons toujours par rappeler qu’avant de nous connaître, beaucoup de nos clients ont vécu des projets informatiques avec des livraisons tardives, plus ou moins proches des attentes, attentes difficilement exprimées par ailleurs initialement. Ce terrain potentiellement conflictuel entre exécutants et décideurs est certainement l’arbre qui cache la forêt. Nous expliquons ensuite que chez Imagile les développeurs discutent en direct avec les clients dans l’objectif de rectifier constamment et ainsi détecter puis satisfaire les attentes.

La problématique vient en effet de l’approche naturelle à rechercher l’exhaustivité des attentes quelle que soit leur granularité. Dans cette approche ô combien classique, ce qui se définit aujourd’hui doit être ce qui doit être validé en fin de projet. C’est ce que l’on pourrait appeler l’effet tunnel.

La réalité est qu’entre la définition des besoins et la livraison, plusieurs mois peuvent s’écouler lors desquels les curseurs et périmètres peuvent être, à juste titre, re-priorisés voire remis en question. Il faut donc rester souple, rester agile et se concentrer sur l’utilité des livraisons.

Notre approche consiste à ne pas descendre trop bas dans la définition des périmètres à réaliser au cours du projet. Bien sûr, nous avons des paramètres incontournables comme la durée du marché, classiquement 3 ans, ou encore une enveloppe budgétaire à respecter.

N’oublions pas que le mieux n’est pas l’idéal. Nous partons du principe qu’est idéal ce qui est simple et fonctionne correctement. Nous fonctionnons donc par étapes, par versions livrées, testées et mises en production régulièrement.

La première version est toujours un socle solide qui remplit les services critiques à rendre. Les autres besoins sont précisément définis le moment venu, dans le délai réglementaire et l’enveloppe budgétaire ayant défini la procédure d’appel d’offres, et nourris par les retours des utilisateurs des versions précédentes.

Bernay ancien site
Site avant le projet de refonte

La première étape a consisté à répondre aux attentes que le site précédent ne pouvait rendre, à savoir :

  • adapter aux technologies en mobilité : tablettes, téléphones mobiles,
  • l’accès à l’information était compliquée en passant par la navigation. Les informations ne pouvaient qu’être retrouvées grâce aux moteurs de recherche, interne ou externe. Il fallait donc rendre accessible toutes les informations en rationalisant les parcours utilisateurs,
  • rendre simple un back-office difficile à administrer. La gestion des pages en était d’autant compliquée,
  • mettre en place un environnement adapté aux futures évolutions,
  • reprendre le principe d’actualités,
  • structurer l’architecture du site basée sur les besoins des visiteurs et ainsi avoir une navigation plus intuitive.

Le choix technologique s’est porté sur la mise en place d’un socle WordPress pour répondre à ces attentes et ainsi économiser du temps de développement. Le temps gagné a permis à l’équipe projet de se concentrer sur les règles métier.

La souplesse du moteur WordPress et l’approche CMS ont facilement permis de personnaliser les espaces dédiés.

L’approche CMS (Content Management System), Système de Gestion de contenu en français, permet au client de se concentrer sur le contenu (textes, photo, liens). Imagile s’occupe de mettre en place le design choisi. Nous avons d’ailleurs développé et continuons à développer notre propre « starter » basé sur les custom post type : https://wp-starter.imagile.fr

Plusieurs univers graphiques peuvent ainsi se côtoyer sur un même site :

  • Le Piaf : théâtre et création contemporaine,
  • Le Moulin : médiathèque et ludothèque,
  • L’Abbaye : lieu pour de l’événementiel,
  • L’Annuaire des associations.
templates contextuel
Des environnements graphiques différents sur un même site

Des clients sont parfois vite tentés d’utiliser des plugins au prétexte que « ça fait ce que je veux, c’est gratuit et y a plus qu’à installer ». Effectivement c’est tentant et des fois cela suffit.

Pourtant, il faut toujours avoir en tête que ceci se rattache à ce que l’on appelle la dette technique. La dette technique est un concept métaphorique qui explique que ce type de gestion peut induire des coûts futurs. En effet, en introduisant du code tiers (en l’occurrence des plugins) nous perdons la maîtrise de notre propre code source. Les effets à mesurer sont donc le respect des bonnes pratiques de développement, la documentation existante, la qualité de sa communauté qui s’est créée autour, la fréquence des mises à jour (maintenance et évolutions).

 

Pour prendre une décision juste, la balance est donc à faire entre

triangle décisionnel
utilisation d'un plugin développement sur mesure
temps de mise en œuvre rapide, de quelques heures à quelques jours en fonctions des tests, paramétrages et développements nécessaires (ex.: WooCommerce) dépendant du cahier de besoins
maîtrise du système d'information (site web) cela dépend des développements et feuille de route d'un tiers oui, le client est propriétaire du code développé
règles métier - attentes particulières ceci implique de devoir se contenter des services rendus mise en place de règles métiers spécifiques

Pour cette version deux services importants sont attendus à la fois pour simplifier les démarches mais aussi pour gagner du temps en traitement des dossiers :

  • Mise en place de prise de rendez-vous État civil
  • Demande de réservation de salles

Les données entrantes pour décider sont les suivants :

  • un périmètre fonctionnel important et complexe (gestion du temps, processus de validation et de rappels)
  • les développements spécifiques se chiffreraient en semaines voire en mois (ce qui emmènerait le budget au-delà de l’enveloppe du marché)
  • l’existence de plugins payants correspondant à quelques heures de développement
  • un choix restreint de plugins

La solution retenue a donc été de mettre en place un plugin couvrant au moins 80% des attentes.

Wireframe page d'accueil
Proposition de wireframe pour la page d'accueil

Autre point important sur ce projet : la refonte graphique.

Inchangé depuis 2014, le site de la ville de Bernay devenait vieillissant, avec un parcours utilisateur rendu difficile par la quantité d’informations regroupées sur l’accueil. Par ailleurs, comme nous l’avons énoncé précédemment, il n’était pas adapté aux écrans de type mobile ou tablette.

Chez Imagile, nous sommes plus que conscients que le contenu conditionne le design. Par conséquent, en collaboration directe avec l’équipe en charge du projet à la mairie de Bernay, nous avons commencé par hiérarchiser l’information sur le site, par le biais de wireframes, de retravail du menu et de documents descriptifs des pages du site d’origine.

Une fois ces éléments validés, l’étape de conception graphique a pu commencer. N’ayant pas de charte graphique particulière, la première évolution graphique de la ville s’est voulue simple, en respect des couleurs du logo, avec un design épuré et efficace.

Bernay iMac iPad and iPhone
Une première évolution graphique responsive du site
maquettes refonte Bernay
Travail sur les maquettes graphiques

Suite à la création de la nouvelle identité graphique de la ville en fin d’année 2021, nous avons été missionnés pour son adaptation sur le site internet.

En travaillant directement avec le designer ayant conçu cette nouvelle charte, nous avons pu récupérer tous les éléments graphiques, la liste des couleurs ainsi que les typographies à utiliser. D’après ces éléments, nous avons ainsi réalisé le nouveau design du site par l’intermédiaire de maquettes.

La production de maquettes graphiques, construites grâce à des logiciels tels que Figma, nous permettent de nous concentrer dans un premier temps sur l’aspect purement visuel du site internet et de recevoir des retours du client uniquement sur ce point.

Une fois les maquettes totalement validées, nous pouvons passer à l’intégration en code et adapter ce nouveau design à l’intégralité du site.

Les environnements du site
Des environnements graphiques différents sur un même site

Une spécificité s’est ajoutée lors de cette nouvelle version du site : la mise en place d’un thème sombre. La décision d’ajouter ce mode sombre s’est vue décidée par plusieurs facteurs :

  • la possibilité aujourd’hui de définir un thème sombre sur les différents terminaux de notre quotidien (pc, tablette, portables…)
  • une réduction de la fatigue visuelle à la lecture d’un article, notamment lors d’un éclairage faible autour de l’utilisateur
  • l’attrait de la nouveauté : la possibilité de passer en thème sombre apporte un effet « wahou » et dynamique

Le thème sombre sur le site de la ville de Bernay se devait donc d’être intimement lié au choix de l’utilisateur : un utilisateur ayant configuré son terminal en mode sombre se verra directement dirigé vers la version sombre du site. Il aura néanmoins toujours la possibilité de passer en thème clair par l’intermédiaire d’un bouton toujours visible. de même qu’un utilisateur utilisant un mode clair pourra lui aussi passer en thème sombre à sa convenance.

Grâce à l’utilisation du framework utility-first Tailwind CSS, cette partie s’est trouvée fortement simplifiée, la contrainte technique principale ayant été d’adapter les couleurs thématiques de l’identité visuelle sur fond noir. En effet, une règle primordiale est à respecter lors de la conception d’une charte graphique destinée au web : l’accessibilité. Les couleurs doivent respecter un certain ratio de contraste entre elles afin que les informations restent lisibles par tous les utilisateurs, qu’ils soient daltonien, malvoyant ou simplement dans un environnement où l’éclairage impacte la lecture d’un écran.

Thème sombre Bernay
Adaptation des environnements du site en thème sombre
  • Une étroite communication entre la maîtrise d’ouvrage et la maîtrise d’œuvre avec des outils simples : mail projet unique pour accéder simplement aux échanges au sein des équipes, des outils collaboratifs (Trello) et bien entendu le téléphone.
  • Du temps dégagé et une forte implication du chef de projet de la mairie. Ceci est un point majeur car trop souvent le donneur d’ordre ne mesure pas l’impact sur son quotidien. En effet, il faut concevoir, valider, tester, partager les réflexions et rester disponible pour des réunions qui se doivent courtes et efficaces.
  • De la disponibilité et réactivité bipartite. C’est à dire que le rythme imposé a été ambitieux mais soutenable. Il est trompeur de croire qu’imposer des délais permet de mieux les respecter.
  • Avoir des acteurs responsables qui vont bien au-delà de l’exécution en portant de vraies responsabilités. Par exemple, le chef de projet du donneur d’ordres sait quand aller chercher une validation auprès de son sponsor (en l’occurrence le maire). Le prestataire est, de son côté, force de conseils et fait valoir ses compétences et connaissances dans l’univers du web. Dans les deux cas, il faut accepter les remises en question pour garder les objectifs en vue.
  • Ne mettre en ligne que des versions opérationnelles. Ainsi présenté, il s’agit d’une lapalissade mais la réalité derrière ce propos est de dire qu’il vaut mieux revoir ses attentes à la baisse pour implémenter plus tard les développements concernant des idées pas assez mûres encore. La loi de Pareto nous dirait que si l’on couvre 80% des besoins, le but est potentiellement atteint. C’est ensuite l’utilisation qui pointera les lacunes.
J'ai consulté plusieurs agences avant de me lancer dans ce projet. Et après plusieurs mois de consultations, j'ai sélectionné la société Imagile pour m'accompagner dans la refonte du site internet de la Ville de Bernay car elle répondait à mes besoins : 1/ l'agilité 2/ nous parlions le même langage. Cela parait surprenant mais se comprendre n'est parfois pas une chose facile entre un administratif et un technicien. C'était donc l'une de mes priorités, que le technicien puisse traduire techniquement mes besoins, les comprenne et me propose des solutions techniques adaptées. L'agilité était également précieuse car travaillant seule sur ce projet et n'étant pas dédiée uniquement à cela, je devais prioriser, hiérarchiser, construire pas à pas sans nous mettre, l'agence et moi, en difficulté.

C'était un projet ambitieux. Le site n'avait pas évolué depuis près de 10 ans, l'interface d'administration était dépassée, vieillissante, ralentie et la navigation au sein du site était rendue complexe par un nombre de pages trop important, et je n'évoque pas le référencement. Un vrai challenge dans une collectivité en pleine évolution, mais grâce au professionnalisme, au sérieux, à la disponibilité et à la réactivité des techniciens de l'agence, je suis parvenue à lancer un site internet en quelques mois, à développer la présence numérique de notre collectivité (newsletter, référencement Google...) et à étudier via Google Analytics le parcours utilisateur et à adapter au besoin. Aujourd'hui, nous poursuivons notre travail, brique par brique, échange après échange, pour proposer de nouvelles fonctionnalités tout en respectant le cadre technique.
Logo de la ville de Bernay
Gladys Payot, Chargée de communication
Chef de projet

Notre approche vous séduit ?

Contactez-nous, ou venez nous rencontrer pour discuter de vos projets.