Social Media Témoignages Vie de l'agence

Mise en ligne d’un site collaboratif pour Saint Jean de Monts

Nous vous en parlions il y a quelques mois Intuiti vient de mettre en ligne www.meshistoiresdevacances.com, un site de storytelling pour l’office du tourisme de Saint Jean de Monts. Collaboratif et éphémère, ce site est le dispositif central d’un projet culturel ambitieux.

histoires_de_vacances

Le contexte

En 2013, la ville de Saint Jean de Monts (2e station balnéaire de France !) organisera une exposition visant à valoriser l’histoire de la station balnéaire et fédérer vacanciers et habitants autour de leurs souvenirs de vacances. Cette exposition pluri-media intégrera pêle-mêle des photos, cartes postales et vidéos d’archives, des reportages, mini-films et autres installations artistiques.

Afin de préparer ce projet, la ville a fait appel à la société MonNuage au mois d’octobre 2010 pour les accompagner sur la phase de récolte de souvenirs. MonNuage s’est elle-même rapprochée d’Intuiti pour toute la partie digitale.

Description

Aujourd’hui, le site se compose de deux rubriques :

  • Une mosaïque de souvenirs permettant de recueillir les petites et grandes histoires d’hier et d’aujourd’hui, classées par familles thématiques (par périodes, lieux, thèmes). Chaque personne peut donc raconter son souvenir en quelques lignes et ajouter des photos pour l’illustrer. Chaque billet est ouvert aux commentaires, au partage et aux votes des autres internautes. Les équipes éditoriales de St Jean de Monts se chargeant du classement et de la modération.
  • Une rubrique d’actualités orientée « patrimoine » qui inclura, au fil de l’été, des séries vidéo sur St Jean de Monts, une série de reportages sur la déconstruction/reconstruction de l’estacade et autres surprises.

Dans le courant du mois de Mai, le site intégrera deux nouvelles rubriques :

  • Un concours de photo ouvert à tous ayant pour thème : « Jetées, pontons et estacades à Saint Jean de Monts et dans le monde »
  • Une rubrique collaborative, dans le prolongement de la récolte de souvenirs, visant à recueillir cette fois les suggestions des internautes pour améliorer leurs vacances à Saint Jean de Monts.

Voilà pour le contexte ! Je vous propose maintenant de revenir pas à pas sur les jalons importants du projet et les défis rencontrés.

Etape 1 : Conception

Partant des premières orientations (objectifs et proposition de valeur, types d’utilisateurs, contexte et logiques d’utilisation, formats, etc.), la principale difficulté pour un site tel que celui-ci fut de concevoir une coque vide, c’est à dire penser une architecture et une navigation sans avoir de modèle de contenu préalable, avec toutes les questions qui en résultaient :

  • quel type de contenu allaient publier les internautes ?
  • quel serait le succès du site et le volume de souvenirs récoltés ? la variété ?
  • quels types d’information pouvait-on leur demander ? quels champs intégrer pour structurer la base de données ?
  • le fait que les vacanciers n’avaient pas de connexion sur place (hormis leurs Smartphones) allait-il être bloquant ?
  • une application iPhone ou un site mobile se justifiaient-ils ? au risque de se couper d’un type de population ?
  • quels risques pouvaient exister à laisser le grand public s’exprimer ? où placer le curseur au niveau de la modération ? Etc.

Le principal défi fut donc de penser au maximum de situations possibles et de concevoir une structuration évolutive qui puisse rester simple et intuitive.

Etape 2 : Maquettage fonctionnel

Le premier « rough » de la page d’accueil :

storyboard-saint-jean-de-monts

Après avoir écarté l’idée d’une carte interactive (le prisme temporel s’étendait sur près d’un siècle ; et par conséquent de nombreux lieux, bars, restaurants, hôtels, campings avaient disparus), nous optons pour une « mosaïque » de souvenirs, laquelle permet en outre de valoriser en premier lieu les histoires, le véritable cœur du site.

Coté méthodologie, une fois l’arborescence définie, nous passons donc au storyboard (ou maquettage fonctionnel). Pour rappel, il s’agit ici de poser la structure des pages (zoning) et de détailler les spécifications fonctionnelles (interactions front-office, fonctionnement de l’espace membre, du backoffice, périmètre précis des fonctionnalités, etc.).

Ici on ne parle pas de couleur ou de forme de bouton, l’objectif est de s’assurer que la navigation et les interactions soient compréhensibles et fluides pour un utilisateur cible.

La première version du storyboard (accueil) :

storyboard2-saint-jean-de-mont

Côté outils, pour ce type de site, nous préférons réaliser le storyboard sur Axure, logiciel qui permet de simuler des interactions web, ce qui nous permet (ainsi qu’au client) de faire fonctionner le storyboard comme un proto-site et de vérifier la pertinence des interactions.

Nous nous sommes par exemple rendus compte que l’ingénieux système de filtres multicritères auquel nous avions pensé avec notre client étant tout simplement imbitable pour un utilisateur lambda :-). La simplicité et la logique ne sont pas des évidences…

A ce stade il est facile et rapide de tester des choses, encore faut-il s’extraire de l’aspect rudimentaire de la page !

La dernière version du storyboard (accueil) :

storyboard3-saint-jean-de-mont

Etape 3 : Maquettage graphique

Après quelques allers-retours sur le storyboard, nous arrivons à la partie charnière : le maquettage graphique. Fini les abstractions, on commence à se projeter dans la réalité du site !

1ère version (ci-dessous) : trop froide, trop « luxe », pas suffisamment en accord avec la dimension populaire de la station, nous revoyons notre copie…

maquette1-saint-jean-de-mont

2ème version (ci-dessous) : mieux, mais pas pas encore ça…

maquette2-saint-jean-de-mont


3 ème version (ci-dessous) : du mieux, clair et lisible, mais il ressort que la partie haute du site (la partie inférieure étant sous la ligne de flottaison), notamment la mosaïque, manquait de vie et de couleur.

maquette3-saint-jean-de-mont

4ème version (ci-dessous) : nous trouvons le compromis entre couleur et lisibilité mais devons adapter cet univers graphique avec l’affiche choisie pour promouvoir le site (voir plus bas).

maquette4-saint-jean-de-mont

L’affiche réalisée par l’agence de communication:
affiche-collecte-saint-jean-de-mont

5ème version (ci-dessous) : le résultat final, qui convient au client, et aux personnes interrogées.

maquette5-saint-jean-de-mont

Etape 4 : Intégration/Développement

Rien de très palpitant ici à raconter… du code, du recettage, des bugs (… pardon, des « caractéristiques » :-)), des points projets, et comme dans tout projet web qui se respecte, quelques frustrations qui naissent, coté client comme coté agence, car certaines idées arrivent trop tard ou sont trop coûteuses, ou nécessitent trop de délai… et qu’il faut sortir le site en temps et en heures.

Une semaine avant la mise en ligne, une centaine de souvenirs sont récoltés sur place par les reporteurs de Mon Nuage et les premières vidéos sont réalisées afin d’alimenter le site pour sa sortie.

Etape 5 : Promotion

Le site désormais en ligne, tout ne fait que commencer ! En fonction des premiers résultats et premières métriques récoltées, certaines corrections pourront être apportées afin d’améliorer l’expérience utilisateur et de nombreux dispositifs pourront être déployés, à la fois offline (animations, affichages et évènements à St Jean de Monts et à Nantes) et online (facebook, display, mailings, opérations bloggueurs, achat de mots-clés…) pour promouvoir le site et booster le trafic.

Nous lui souhaitons donc une très belle continuation et un beau succès.

Si vous avez des souvenirs et anecdotes à faire partager sur saint Jean de Monts, c’est ici : www.meshistoiresdevacances.com

Voir également le projet sous la perspective de MonNuage :

Lire c'est bien, partager c'est bien aussi 😉

Vous souhaitez optimiser votre chaîne d'acquisition client ?
Recevez nos guides pratiques, livres blancs, dossiers thématiques
I agree to have my personal information transfered to MailChimp ( more information )
3 Commentaires

Réagissez à l'article

Votre commentaire*

Your Name*
Your Webpage