La Bulle Verte

La Bulle Verte sur ordinateur
La Bulle Verte sur tablette
La Bulle Verte sur mobile

La mission

La Bulle Verte, réseau d'éco-stations de services conçues autour des mobilités douces (vélos électriques par exemple) proposant des itinéraires - découverte avec points d'intérêts, nous a fait confiance pour la réalisation de leur site. Celui-ci sert à la fois à présenter l'activité de l'entreprise, à trouver les différentes stations (appelées "Bulles Vertes") et à accompagner les utilisateurs des Bulles Vertes dans leurs activités. Ce n'est donc pas qu'un simple site vitrine, c'est également une Progressive Web App (PWA).

Derrière le site vitrine…

Avec un design reflétant à la fois la nature, le tourisme et la technologie, le site permet à ses visiteurs de découvrir le concept de La Bulle Verte, de suivre son actualité, de s'inscrire à la newsletter (en liaison API directe avec MailChimp) et de consulter une carte interactive répertoriant les lieux où différentes expériences sont proposées. Chaque lieu dispose d'une fiche de présentation, listant les différentes expériences (balade à vélo électrique, randonnée, dégustation de vin…) pouvant y être trouvées.

Le back-office de gestion permet bien évidemment aux administrateurs de gérer l'ensemble des contenus, notamment de créer de nouvelles Bulles Verte et expériences. À chaque Bulle Verte son descriptif, sa galerie photo, ses services et ses expériences proposées.

…se cache une Progressive Web App !

Les fonctionnalités vont néanmoins au-delà du simple site vitrine. Les utilisateurs des Bulles Vertes peuvent en effet avoir accès à des parcours interactifs via des QR code générés depuis le back-office, accessibles directement sur le lieu de l'expérience. Ces parcours et leurs étapes sont créés depuis le back-office et affichés sur une carte via l'API Google Maps, servant de guidage. Le parcours réagit en fonction de la position de l'utilisateur, affichant automatiquement la prochaine étape ou les médias appropriés (photos, vidéo et audio) à proximité d'une étape.

Le site étant une PWA, il peut être installé sur le téléphone de l'utilisateur. Le principal intérêt réside néanmoins dans les fonctionnalités de mise en cache, permettant de prendre temporairement le relai en cas de faible réseau et de rendre l'expérience de guidage la plus fluide possible.

Les technologies

  • HTML5
  • CSS3
  • JS
  • PHP
  • MySQL
  • Symfony

Méthodo mise en place

  • Gestion de projet
  • Analyse et conception UX
  • Design d'interface
  • Image
  • Développement front-end
  • Développement back-end
  • Hébergement
Capture d'écran de La Bulle Verte
Capture d'écran de La Bulle Verte
Capture d'écran de La Bulle Verte
Capture d'écran de La Bulle Verte