Nos réalisations
Créées il y a plus de 30 ans, les Initiatives Océanes (initiative citoyenne phare de Surfrider) avaient besoin de moderniser son site web et sa plateforme communautaire. Outre un back-office compliqué à maintenir par les équipes internes, les Initiatives Océanes devaient changer de nom et de charte graphique pour devenir Retrace! 9 mois de projet main dans la main avec les équipes de Surfrider ont permis de voir aboutir une plateforme totalement refondue et en lien avec les codes d’UX/UI design et développements actuels.
Retrace! C’est l’initiative phare de Surfrider Foundation, l’ONG de protection de l’Océan et des littoraux. Lancée il y a près de 30 ans sous le nom des “Initiatives Océanes” (ou les “IO” pour les intimes), la plateforme invite citoyens, associations, structures éducatives et groupes locaux à organiser ou rejoindre des collectes de déchets sur les plages et le long des cours d’eau, en France et en Europe.
Mais Retrace! va bien au-delà du nettoyage et des collectes sur les plages. Chaque déchet collecté est répertorié et alimente une base de données qui permet d’identifier les sources de pollution et de les remonter au niveau français et européen. Ces données deviennent des arguments concrets dans les plaidoyers de Surfrider auprès des décideurs politiques et des industriels. Chaque participant est un contributeur de la science participative à l’échelle européenne.
Avec plus de 17 600 collectes organisées, 369 000 déchets quantifiés et 35 000 inscrits, Retrace! est un outil d’action collective et de changement législatif. Après des années sans évolution majeure sur une plateforme vieillissante, l’heure était venue de donner une “seconde peau” à ce beau projet.
La plateforme était devenue compliquée à gérer : un back-office trop dense, des bugs difficiles à corriger, autant vous dire que l’équipe de Surfrider commençait à ne plus vouloir mettre les mains dedans (et nous les comprenons).
Le but de la refonte Retrace! était de créer une plateforme permettant à chaque citoyen, association, groupes locaux et scolaires de trouver une collecte près de chez lui, s’y inscrire ou en organiser une, avec une forte dimension communautaire. Pour rendre le tout plus ludique, nous avons opté pour de la gamification : badges, défis, historique de participation, pages publiques d’association… Alice a travaillé toute la partie UX avec des wireframes du site complet mais également la partie espace personnel.
Sur l’aspect technique, le cahier des charges était un (petit) challenge pour nous :
Le tout intégré de manière hybride grâce à WordPress et Elementor et pas mal de dév spécifiques !
Nous avons eu la chance et le plaisir de pouvoir apporter notre touche Galopins à l’univers de Retrace! Avec la création de plus de 60 illustrations personnalisées. (Nous pouvons vous dire que Manon, l’une de nos DA, était heureuse).
Pour affirmer cette gamification et humaniser l’univers Retrace! Nous avons joué sur la présence humaine représentée par les mains. Vrai symbole des actions (ramasser, trier…), cela permet à tout le monde de s’identifier : pas de représentation “physique” à proprement parler pour permettre libre court à son imagination.
Ce travail permet d’apporter son propre univers graphique à Retrace! : plus rond, avec un jeu de volume par des dégradés pour un aspect plus digital (différent de l’aspect grain présent sur Surfrider).
L’un des challenges de Retrace! a été la création et la mise en place d’une carte interactive permettant d’afficher les collectes à venir et (surtout) les zones protégées où les rassemblements sont interdits. (Ici c’est notre cher Romain qui était content). Ces zones sont remontées en temps réel et mises à jour automatiquement. En tout, 4 API utilisées : 2 API pour les zones protégées, le connecteur à la plateforme logistique Ekan et l’API Mondial Relay pour la livraison des kits de collecte. Pas mal non ?
Pour gérer le poids important de toutes ces données géographiques sans impacter les performances, Romain a développé une solution sur-mesure basée sur l’algorithme de Douglas-Peucker, qui compresse la représentation des zones sans perte de précision. Un travail invisible côté utilisateur, mais essentiel (et vachement fort) pour que la carte reste fluide.
Particuliers, Associations, structures éducatives, groupes locaux et équipes internes Surfrider: chaque profil a ses propres besoins, son propre espace et son propre niveau de visibilité sur la plateforme. L’espace association affiche une page dédiée avec localisation, collectes à venir et statistiques. Les structures éducatives peuvent organiser des collectes privées.
Notre reine de l’UX Alice, a rendu tous ces parcours sur-mesure les plus simples et intuitifs possible pour que chaque profil s’y retrouve.
Ce n’était pas une mince affaire que de récupérer, trier, nettoyer et réimporter 35 000 comptes dans la nouvelle plateforme avec leurs données personnelles (nom, prénom, email, téléphone). Un travail minutieux que nous avons dû faire en plusieurs jours pour que les serveurs tiennent ces migrations. Notre VPS à plusieurs fois failli rendre l’âme à cette étape du projet.
L’un des challenges de Retrace! a été la création et la mise en place d’une carte interactive permettant d’afficher les collectes à venir et (surtout) les zones protégées où les rassemblements sont interdits. (Ici c’est notre cher Romain qui était content). Ces zones sont remontées en temps réel et mises à jour automatiquement. En tout, 4 API utilisées : 2 API pour les zones protégées, le connecteur à la plateforme logistique Ekan et l’API Mondial Relay pour la livraison des kits de collecte. Pas mal non ?
Pour gérer le poids important de toutes ces données géographiques sans impacter les performances, Romain a développé une solution sur-mesure basée sur l’algorithme de Douglas-Peucker, qui compresse la représentation des zones sans perte de précision. Un travail invisible côté utilisateur, mais essentiel (et vachement fort) pour que la carte reste fluide.
Particuliers, Associations, structures éducatives, groupes locaux et équipes internes Surfrider: chaque profil a ses propres besoins, son propre espace et son propre niveau de visibilité sur la plateforme. L’espace association affiche une page dédiée avec localisation, collectes à venir et statistiques. Les structures éducatives peuvent organiser des collectes privées.
Notre reine de l’UX Alice, a rendu tous ces parcours sur-mesure les plus simples et intuitifs possible pour que chaque profil s’y retrouve.
Ce n’était pas une mince affaire que de récupérer, trier, nettoyer et réimporter 35 000 comptes dans la nouvelle plateforme avec leurs données personnelles (nom, prénom, email, téléphone). Un travail minutieux que nous avons dû faire en plusieurs jours pour que les serveurs tiennent ces migrations. Notre VPS à plusieurs fois failli rendre l’âme à cette étape du projet.
Action v1 – Texte répéteur
Action v2 – Texte 1 répéteur
Action v2 – Texte 2 répéteur
Action v2 – Texte 3 répéteur
Nous avons pu travailler à partir de la nouvelle identité Retrace! : nouveau nom, nouveau logo, palette de couleurs vives et modernes, un plaisir !
Nous voulions apporter notre touche “gamification” à ce bel univers en y apportant de l’illustration : plus de 60 illustrations sur-mesure créées pour donner à la plateforme une dimension ludique, chaleureuse et vivante. Chaque déchet à sa représentation, chaque badge raconte une histoire ou une étape. Le tout pour fédérer davantage la communauté et amplifier l’aspect unique de Retrace!
Un projet qui nous a permis de voir WordPress sous un nouveau jour :
Carte interactive multi-API, espaces communautaires, gamification, chat interne, back-office de validation des données… Plus d’une dizaine de fonctionnalités spécifiques développées en interne. Le tout sans altérer les performances (vous nous connaissez).
Retrace! est l’un des projets les plus challengeants que nous avons eu au niveau des fonctionnalités spécifiques via WordPress. Et ce n’est pas pour nous déplaire. Nous sommes heureux d’avoir pu participer à la création d’une plateforme plus intuitive, engageante et d’utilité publique pour chaque personne souhaitant créer ou participer à une collecte de déchets.
Quelques repères pour mesurer l’ampleur du projet.
