Exemple de projet web : création d’une carte interactive

Besoin d’un exemple de projet web réalisé par Digital Cover ? Nous vous invitons à découvrir la carte interactive que nous avons créée pour le Commissariat à l’Energie Atomique de Grenoble. Une carte numérique 100% user friendly, aussi facile à utiliser par les utilisateurs qu’à exploiter par l’équipe des administrateurs. Suivez le guide !

Un brief précis pour un projet digital performant

Le Commissariat à l’Energie Atomique de Grenoble a consulté Digital Cover pour un projet web de carte interactive. Cette carte digitale devait servir dans le cadre des journées de la mobilité durable (JMD) 2021. Le CEA se montre particulièrement investi dans la célébration de ses journées. La carte interactive s’inscrit ainsi dans un programme événementiel plus global déployé sur la presqu’île du site de Minatec, et organisé autour de divers stands d’animation.

La carte digitale en elle-même se destinait spécifiquement aux salariés du CEA. Elle devait traduire de façon numérique une démarche déjà mise en place les années précédentes. Les employés du CEA sont effectivement invités chaque année à identifier les pistes cyclables dangereuses ou mal construites sur le site de Minatec.

Cette identification s’effectue traditionnellement au sein d’un stand dédié. Une carte papier leur était proposée, pour qu’ils signalent, via des gommettes, les endroits où ils avaient remarqué des problèmes de voirie ou de signalisation. Cette activité s’inscrivait dans le souci plus global de promouvoir l’utilisation des vélos et des transports en commun, et d’associer les collaborateurs à l’amélioration des aménagements du site Minatec.

Le CEA a donc souhaité digitaliser cette carte en 2021. Le site de Minatec rassemble effectivement 3000 chercheurs, 1200 étudiants et 600 industriels sur 20 hectares. Autant dire que la voirie concernée est très conséquente, et difficile à identifier rapidement sur une carte papier.

La carte interactive demandée par le CEA servait donc à faciliter le travail d’identification des risques par les employés. Elle devait aussi être facilement maniable et agréable à utiliser, pour leur assurer une expérience utilisateur parfaite. C’est tout l’objet de cet exemple de projet web : passer du “plan gommettes » à la conception de la carte des “zones à risques 2.0”.

Une réponse digitale, ciblée user experience (UX)

Nous avons choisi de vous présenter cet exemple de projet web car il concerne un outil digital à la fois accessible et ergonomique. La carte numérique que nous avons livrée fonctionne donc comme suit.

Exemple de projet web côté utilisateur : le souci de l’UX

La carte digitale que nous avons imaginée pour le CEA se voulait ancrée dans les habitudes web des salariés pour une expérience utilisateur optimale. Le processus tient en 3 étapes :

1 / Les salariés se connectent de façon sécurisée à la version de la carte interactive destinée aux employés.

2 / Chaque employé accède à une version vierge de la carte : il ne voit pas les gommettes déposées par ses collaborateurs pour signaler une zone à risque ou un problème de voirie. Il ou elle peut naviguer librement sur la carte digitale. Il est bien sûr possible de déplacer le curseur de haut en bas et de gauche à droite, mais aussi de zoomer et de dézoomer. Un bouton cliquable permet également d’accéder à un module d’aide, si besoin.

3 / Les employés n’ont qu’à cliquer sur les lieux où ils ont repéré un problème de voirie pour créer une gommette digitale. S’affiche alors un formulaire, qui permet de préciser la problématique. Une première fenêtre propose de choisir entre une “zone dangereuse ou un presque accident” et “un problème de voirie”.

Si l’utilisateur ou l’utilisatrice coche “zone dangereuse / presque accident”, il accède alors à une deuxième fenêtre qui concerne les conditions dans lesquelles s’est déployé le danger. Là encore, il ou elle n’a qu’à cocher : forte luminosité, brouillard, neige, verglas, etc. Le même processus se répète concernant le moyen de déplacement utilisé – vélo, voiture, piéton – et la cause du risque identifié. S’agit-il de conditions météorologiques dangereuses ? D’un risque impliquant un ou plusieurs autres usagers ?

Vient ensuite une dernière fenêtre, dans laquelle l’utilisateur est invité à préciser librement son propos, et à décrire le risque rencontré.

Un outil numérique vraiment exploitable par le client

L’interface cartographique que nous avons créée comprend également une version administrateur. Sur cette version, les informations sont agrégées pour rendre compte visuellement de l’ensemble des gommettes déposées par les collaborateurs.

Les gommettes adoptent différentes couleurs, selon le type de risque renseigné. Les lieux qui ont récolté le plus de signalements ressortent visuellement, car le diamètre des gomettes grandit proportionnellement au nombre de risques signalés. Les lieux les plus risqués affichent ainsi des gommettes plus grosses, au-dessus desquelles apparaît le nombre de signalements. Il est possible de zoomer sur ces “clusters” pour obtenir le détail de ce que chaque salarié a renseigné.

La version administrateur donne en outre la possibilité d’exporter les données au format Excel ou CSV. Ces fichiers permettent de réaliser des statistiques qui croisent les informations récoltées. Nous avons également proposé un mode “grille” à la version administrateur de la carte. Ce mode permet de quadriller différentes zones pour préciser la localisation des risques détaillés dans le tableau Excel ou CSV.

Envie d’en savoir plus sur le design UX ? Découvrez nos 11 pistes pour un site web plus ergonomique.

Un exemple de projet web marqué par le succès : témoignage client

La carte interactive que nous avons inventée pour le CEA a permis de récolter 35 gommettes entre le 20 septembre et le 1er octobre. Les employés continuent à l’utiliser régulièrement pour signaler les risques liés à la circulation sur le site Minatec. Notre cliente, Fanny Marzocca, Chargée de projet au sein de la cellule RSE du CEA Grenoble, s’est dite très satisfaite de ce projet web :

« Dans le cadre d’un projet interne, nous avons sollicité Digital Cover pour « digitaliser » un plan avec des remontées d’utilisateurs afin que celui-ci devienne un outil pérenne pour nos salariés. Digital Cover a bien cerné notre besoin et a su répondre à notre cahier des charges pour nous créer un outil ergonomique et adapté. »

Vous avez besoin d’autres exemples de nos projets web ? Vous imaginez un outil numérique précis ? Vous avez une idée d’interface web, sans bien savoir comment la réaliser ? Vous cherchez une agence web capable de penser une vraie stratégie digitale ? Parlez-nous de votre projet ! Et pour découvrir la longue liste de sites internet que nous avons créés, c’est du côté de notre portfolio de références qu’il faut jeter un œil.

Quelles sont les étapes clés d’un projet digital ?

Voici quelques étapes clés qui peuvent être incluses dans un projet digital :

1. Étape de planification : il s’agit de définir les objectifs du projet, de faire un inventaire des ressources nécessaires et de déterminer un budget et un calendrier.
2. Étape de conception : il s’agit de développer les éléments de l’interface utilisateur et de la stratégie de contenu, en tenant compte de l’expérience utilisateur et des objectifs du projet.
3. Étape de développement : il s’agit de mettre en œuvre la conception en créant le code et en intégrant les différents éléments du projet.
4. Étape de test et de validation : il s’agit de vérifier que le projet fonctionne correctement et répond aux exigences définies lors de la planification.
5. Étape de lancement : il s’agit de publier le projet et de le rendre disponible aux utilisateurs.
6. Étape de maintenance : il s’agit de surveiller et de maintenir le projet pour s’assurer qu’il fonctionne correctement et qu’il répond aux besoins des utilisateurs

Il est important de noter que ces étapes peuvent varier en fonction du type de projet et de l’environnement de développement. Certains projets peuvent nécessiter des étapes supplémentaires ou différentes, tandis que d’autres peuvent être plus courts ou plus simples. Il est donc important de bien évaluer les besoins et les objectifs du projet avant de commencer et de s’assurer de disposer des ressources et du personnel nécessaires pour réussir.