Lors de notre quatrième semestre à la HEIG-VD, mes camarades et moi avons mené un projet d’articulation destiné à mettre en pratique les compétences acquises durant nos deux premières années de Bachelor en Ingénierie des médias. Le projet consistait à développer une Progressive Web App (PWA) pour le canton de Vaud, permettant de découvrir et de créer des sentiers culturels.
Présentation et stratégie
Objectif du projet
Le projet visait à :
- Faciliter l’accès aux sentiers culturels grâce à une plateforme numérique interactive.
- Valoriser le patrimoine naturel et culturel vaudois, en promouvant le tourisme local.
- Encourager une exploration autonome avec des parcours personnalisés et accessibles.
Public cible
- Habitants du canton de Vaud, curieux de découvrir leur région sous un nouvel angle.
- Touristes, en quête d’expériences culturelles authentiques.
Conception et outils de design
Approche UX/UI
Pour garantir une expérience utilisateur optimale, nous avons suivi une méthodologie centrée sur l’utilisateur :
- Personas et carte d’empathie : Identification des besoins et attentes des utilisateurs cibles.
- Carte interactive : Élément clé pour visualiser les sentiers et explorer les points d’intérêt.
- Création de parcours : Une fonctionnalité intuitive permettant de personnaliser ses itinéraires.
Outils utilisés pour le design
- Figma :
- Conception des wireframes et maquettes haute fidélité.
- Collaboration en temps réel pour des itérations rapides.
- Moodboard : Établissement de l’identité visuelle avec des couleurs naturelles et une typographie moderne.
- Interviews et sondages : Recueil de feedback pour adapter les fonctionnalités aux besoins réels des utilisateurs.
Technologies et développement
Stack technique
- Frontend : Développement avec Vue.js, offrant une interface réactive et fluide.
- Backend :
- Serveur construit avec Node.js pour gérer les requêtes.
- Base de données MySQL, utilisée pour stocker les informations des sentiers et des utilisateurs.
- Carte interactive :
- Intégration de Leaflet avec OpenStreetMap pour afficher des cartes dynamiques.
- Ajout de marqueurs personnalisés pour les points d’intérêt.
- PWA :
- Mode hors ligne pour consulter les sentiers préenregistrés.
- Optimisation pour une utilisation fluide sur mobile et desktop.
Outils de gestion et collaboration
- Microsoft Project : Planification et suivi des étapes clés du projet.
- GitHub : Gestion de version et collaboration sur le code source.
Difficultés rencontrées et solutions
- Gestion des données de la carte :
- Problème : Chargement initial lent.
- Solution : Optimisation des données cartographiques avec Leaflet et compression des ressources.
- Organisation et délais serrés :
- Problème : Coordination des différentes étapes (design, développement, tests).
- Solution : Utilisation de Microsoft Project pour définir des deadlines précises et suivre les progrès.
Lien vers le site
Conclusion
Ce projet a représenté une occasion enrichissante de combiner design, développement et gestion de projet pour répondre à des problématiques concrètes. Grâce à des outils comme Figma, Leaflet et Microsoft Project, nous avons créé une PWA innovante, accessible et fonctionnelle, mettant en valeur le patrimoine vaudois.
Vous avez un projet similaire en tête ou souhaitez discuter de solutions numériques ?