Jefaisvotresite.com Aller à la navigation
Photo du projet T'écoutes-quoi ?

T’écoutes-quoi ?
Voir le site internet

T’écoutes quoi ? est une startup toulousaine qui cherche à faire du site de rencontre un endroit agréable et convivial basé autour de l’échange musical.

Au commencement

En octobre 2011, alors que je travaillais encore pour les chemins de fer belges, un collègue m’a donné les coordonnées de contact d’une personne à Toulouse qui cherchait une "rockstar javascript".

Ni une ni deux j’ai contacté Maxime Guedj et son idée T’écoutes quoi ? m’a de suite convaincu et passionné. Il n’en aurait pas fallu moins pour parvenir à bout de ce projet ambitieux qui devenait mon premier projet "startup".
Tout ou presque s’est passé via vidéoconférence hormis une visite à Toulouse pour rencontrer l’équipe en entier.

L’équipe

  • Maxime, le chef d’orchestre et fondateur, sans mauvais jeu de mot. C’est un entrepreneur web chevronné qui a de la suite dans les idées mais surtout un passionné de musique. Un peu touche à tout il parlait le langage de chacun et grâce à lui l’équipe restait sur la même longueur d’onde. Sans cesse à la recherche de la meilleure méthodologie (Scrum, agile, ...), j’ai appris énormément dans ce domaine grâce à lui ;
  • Camille, la graphiste qui nous proposait des visuels hyper réalistes et avec qui je discutais souvent : au fur et à mesure de l’évolution du projet, j’intégrais les idées de Camille et me rendais compte des détails qui clochaient ou des incohérences avec le reste de l’interface. Ce n’était pas facile car le travail de design se faisait en amont un ou deux mois en amont de l’intégration et il était facile d’oublier les conventions établies auparavant ;
  • Sylvain, le co-fondateur et le pro du back-end, du développement et de la gestion des données. C’est lui qui a créé les algorithmes compliqués de "matching" entre deux personnes, c’est lui qui se connecte aux API des différents services (Echonest, Youtube, Facebook, etc.) et c’est de lui dont je dépends pour l’accès au données. C’est un habitué des projets "startup" et une ressource inépuisable de connaissance techniques.

Je venais compléter cette équipe en tant qu’intégrateur HTML/CSS/JavaScript et j’apportais ma pierre à l’édifice au niveau de l’ergonomie et de l’expérience utilisateur.

Avec cette équipe nous séparions les couches (présentation, métier et données) : un produit et une manière de travailler ultra flexibles. Mais surtout, nous mélangions notre expertise dans chacun de nos domaines respectifs pour obtenir un projet de qualité optimale.

Philosophie : qualité de la rencontre

Nous partions du constat que les sites de rencontre, afin de faire du chiffre d’affaire, visaient la quantité sans avoir peur de créer des mauvaises rencontres. Nous prenions le contrepied de leur démarche pour proposer des rencontres basées sur leur qualité. Nous utilisions pour ça les goûts musicaux de nos visiteurs, leur proximité et leur âge.

La rencontre commence par un échange musical. C’est à dire que Kévin doit proposer à Sophie l’écoute d’une chanson dont il pense qu’elle plairait à Sophie. Si Sophie aime, nous les mettons en relation et n’intervenons plus : objectif atteint.
Si vite ? Oui, si vite : avez-vous déjà éprouvé de la répulsion pour une personne ayant les mêmes goûts musicaux que vous ?

Si la chanson ne plaît pas à Sophie, Kévin a encore deux essais. Au bout de ces trois propositions sonores et pour ne pas surcharger nos visiteurs (surtout nos visiteuses) de demandes à répétition, la relation est "bloquée" faute d’atomes crochus.

La genèse du projet

Très tôt, Maxime m’a montré les wireframes et les projets d’interactions qu’il avait dessiné. Nous en avons discuté pendant pas mal de temps afin de les améliorer tout en prenant en considération l’avis de notre graphiste chevronnée.

Certains points de l’expérience utilisateur ne me semblaient pas très clairs ou se révélaient trop complexes à intégrer avant la date de sortie prévue.
C’est pourquoi, avant de rendre une estimation finale, j’ai travaillé sur ce que l’on appelle un "Proof Of Concept", une version basique visant à vérifier la faisabilité du projet.

Cette étape nous a permis de détecter et de corriger déjà beaucoup d’incohérences graphiques. De plus j’ai proposé l’idée de travailler sur une grille de composition pour les alignements des différents éléments. Ça facilitait la lecture et aérait le contenu.
C’était important de faire ces gros réglages avant de lancer le développement du produit car dès cet instant la machine était lancée.

Ce n’est qu’à ce moment-là que nous avons décidé de lancer un Repository GIT pour les sources et de travailler avec Dropbox pour les fichiers de design. Le premier nous a permis de faire des allers-retours dans nos développements et le second m’assurait d’avoir toujours la dernière version du design sans avoir à parcourir une structure de dossiers d’archives trop complexe.

Sans la grille

Avec la grille 16 colonnes

Qualité de l’expérience

Dès lors que nous avons commencé à travailler, notre objectif a été de proposer à nos visiteurs une interface la plus agréable à utiliser possible tout en restant dans le monde de la découverte musicale et celui de la rencontre. La valeur qui m’était chère en plus de celles-ci, était celle de la performance. En effet, je ne peux concevoir une expérience de navigation agréable si les pages prennent plus de 4 secondes à se charger .

J’ai utilisé jQuery, la plus légère librairie javascript qui remplissait nos besoins et ne venait pas plomber nos performances. Pour éviter d’avoir une interface trop lente à charger ou un navigateur qui pédale dans la semoule, j’ai pris en considération chaque ajout de plugin, chaque écouteur d’évènement, chaque animation et j’ai tâché d’optimiser chacun de ces points.

  • En écrivant moi-même les fonctionnalités qui pouvaient l’être ou qui étaient plus légères sans passer par un plugin ;
  • En utilisant la délégation d’évènement plutôt que de les attacher à chaque nœud du DOM que je désirais observer ;
  • En minifiant mes sources afin d’avoir la plus petite empreinte possible ;
  • En utilsant au possible les transitions CSS3 plutôt que le .animate() de jQuery.

Le CSS a été aussi optimisé de son côté en organisant le code sous forme de module réutilisable, en évitant l’imbrication trop profonde des sélecteurs, en minifiant la source.

Les .css sont regroupées, les .js aussi (plus au moment où j’écris cette page) et le tout est "compressé" par le serveur avant d’être retourné au client.
Pour éviter trop d’appels http (qui ralentissent la navigation) j’ai utilisé une immense sprite qui regroupe chaque tous les éléments graphiques en un seul fichier. Ainsi, plutôt que de charger 20 petites images, on en charge une seule grosse que l’on positionne pour que la partie affichée soit la bonne.
J’avoue que c’est la plus grande sprite qu’il m’ait été donné de faire, si je devais recommencer aujourd’hui, j’utiliserais certainement une webfont.

J’intervenais également pour les soucis d’ergonomie, je proposais des améliorations qui facilitaient l’apprentissage cognitif de l’outil en réduisant la quantité des styles pour les interactions par exemple. J’améliorais l’affordance des outils à disposition des visiteurs, toujours en argumentant mes propositions lors des discussions hebdomadaires avec l’équipe.

Compatibilité

C’était décidé dès le départ du projet : pas de version mobile prévue et compatibilité avec IE7 minimum. J’ai essayé de faire valoir les qualités de l’amélioration progressive mais clairement nous étions dans une version bêta du produit, version qui devait se focaliser sur le lancement et la récupération des impressions des utilisateurs.
Ces points, bien qu’importants à mes yeux, sont mis de côté pour rapprocher la date de sortie du projet.

Lancement

Fin 2012, Maxime, annonce enfin le lancement du site et en peu de temps nous avons presque 1000 inscrits. Les médias parlent de nous et le service semble prendre son envol.

Le service plafonne aujourd’hui à presque 4000 inscrits et Maxime projette de lui donner un second souffle avec une levée de fonds. Mon travail sur le projet s’est arrêté depuis et je suis sa progression de loin, un peu triste que les fondateurs n’aient pu jusqu’alors trouver un fond d’investissement prêt à les suivre.

A retenir de cette aventure

C’était ma première expérience "startup" et j’ai littéralement ressenti la passion du projet qui vous poursuit jour et nuit dans l’espoir de proposer le meilleur produit et de débarquer avec une "killer app" qui sera adoptée en moins de temps qu’il ne le faut pour le dire.

Or, c’est un fait, malgré le soin apporté à l’interface, malgré nos tests utilisateurs, malgré le battage médiatique, T’écoutes quoi ? n’a pas décollé comme on s’y attendait. Peut-être avons-nous été trop loin dans le produit, si loin qu’il nous était impossible de prendre en compte rapidement et facilement le feedback de nos utilisateurs et de tendre petit à petit vers le produit que les utilisateurs voulaient. Oui au final, ce sont toujours eux qui décident.

Après cette expérience difficile, car oui c’est difficile de voir le résultat de plus d’un an de travail "mal accueilli", je me suis renseigné sur les méthodologies existantes pour ce genre de projet. Sans hésitation et après avoir lu un certain nombre de livres, je pense que la Lean Startup d’Eric Ries est une des meilleures façons de lancer un projet tout en minimisant les risques de "gros échec". Je l’utiliserai pour un de mes prochains projets mais c’est une autre histoire.

Partager sur Twitter Voir un autre projet Partager sur Facebook