Affiche de Datavisualisation
- Exprimer, Comprendre
- Création numérique
- 2ème année BUT MMI
Médiation numérique, site web mobile-first, hors ligne, parcours visiteur, UI/UX, HTML, CSS, JavaScript, PHP, enjeux environnementaux, prise de vue photographique, base visuelle, points de frictions, note d’intention, optimisation des données, design
Dans le cadre du BUT MMI à l’IUT de Toulon, j’ai co-conçu en groupe de 4, un outil de médiation numérique commandité par le Département du Var, destiné à accompagner les visiteurs de l’Espace Naturel Sensible de Sillans-la-Cascade avant, pendant et après leur visite. Face à une problématique concrète de surfréquentation entraînant des dégradations environnementales et des comportements inadaptés sur site, nous avons conçu un site web mobile first accessible hors ligne, structuré autour d’un parcours visiteur complet et complété par des QR codes placés à des endroits stratégiques. Ce projet m’a mobilisée sur deux axes complémentaires : la conception UI/UX sur Figma et le développement web en HTML, CSS, JavaScript et PHP. Il s’inscrit pleinement dans une démarche de conception centrée utilisateur, de sensibilisation environnementale et de communication numérique responsable.
– Immersion sur site et analyse de la demande
Le projet a débuté par une journée d’immersion sur le site de Sillans-la-Cascade en compagnie des écogardes et du commanditaire. Cette expérience de terrain nous a permis de comprendre les enjeux environnementaux du lieu, érosion des sols, perturbation des écosystèmes, comportements inadaptés des visiteurs, et d’identifier les quatre axes de contenu incontournables : la biodiversité, la géologie, l’histoire et le paysage, et la gestion des risques. Nous avons également réalisé une prise de vue photographique des éléments significatifs du site, constituant une base visuelle essentielle pour alimenter nos contenus.
– Note d’intention et choix du dispositif
Avant toute conception, nous avons rédigé une note d’intention rigoureuse. Nous avons analysé comparativement plusieurs dispositifs possibles : application mobile dédiée, borne interactive, site web mobile first, parcours ludique. Chaque option a été évaluée au regard des contraintes du site, absence de réseau, public hétérogène, impact environnemental. Notre choix s’est porté sur le site web mobile first avec contenus téléchargeables, solution la plus accessible, la plus adaptée au fonctionnement hors ligne et la moins intrusive dans l’environnement naturel.
– Conception UI/UX sur Figma
La maquette a été réalisée sur Figma, avec une direction artistique directement inspirée de l’environnement naturel du site : palette terracotta, turquoise, beige et jaune, typographies organiques, mascotte martin-pêcheur pour engager les familles et les enfants. L’application est structurée en cinq grandes sections, Home, Préparer ma visite, Découvrir, Carte interactive, Mon parcours et Partager l’expérience, chacune répondant à une étape précise du parcours visiteur : préparer, informer, guider, sensibiliser et fidéliser. Chaque écran a été pensé pour anticiper les points de friction(absence de réseau, accès PMR, règles à respecter) et valoriser les points de satisfaction (quiz, progression, badge Gardien de la cascade).
– Développement web en HTML, CSS, JavaScript et PHP
La phase de développement a traduit cette maquette en pages web responsives, codées en HTML et CSS pour la structure et le style, JavaScript pour les interactions riches (navigation, quiz interactif, barre de progression, carte dynamique) et PHP pour la gestion des contenus dynamiques côté serveur. Une attention particulière a été portée à l’optimisation des données, poids des fichiers, consommation de batterie, essentielle dans un contexte d’usage hors ligne en milieu naturel.
– Posture réflexive
Ce projet m’a confrontée à la complexité d’un projet réel avec commanditaire institutionnel, qui impose des contraintes bien différentes d’un exercice académique classique. J’ai appris à articuler conception UX et développement techniquede manière itérative : les contraintes du développement influençaient parfois les choix de design, et inversement. La gestion du fonctionnement hors ligne a notamment constitué un défi technique important, qui m’a conduit à réfléchir en profondeur à la stratégie de téléchargement des données en amont de la visite.
J’ai également pris conscience de la dimension éthique et environnementale de la conception numérique : concevoir un outil pour un espace naturel fragile, c’est accepter que la technologie doit se faire discrète, sobre et au service du lieu, et non l’inverse. Cette posture de conception responsable a guidé l’ensemble de nos décisions, du choix des couleurs à l’optimisation du poids des contenus. Le travail collaboratif en groupe de quatre a par ailleurs exigé une organisation rigoureuse et une coordination constante entre les phases de conception et de développement.
Ce projet confirme ma capacité à conduire un projet numérique de bout en bout, en mobilisant des compétences en UX/UI design, en développement web et en gestion de projet, dans un contexte de commande institutionnelle réelle. Les compétences mobilisées, Figma, HTML/CSS, JavaScript, PHP, conception centrée utilisateur, sont directement transférables dans des missions de conception et développement d’interfaces numériques responsables.
