Le 4 février dernier, nous avons officiellement terminé la transition vers notre nouvelle plateforme technique. Un immense travail technique qui a demandé de grands efforts.

Voici le récit de cette migration de plus de 2 ans, en immersion aux côtés de celles et ceux qui l’ont menée.

ACTE I. Nom de code : “The Fork” (décembre 2019 - avril 2020)

L’origine de PlayPlay : une techno qui marche… mais non scalable

Thibaut (co-fondateur et CEO) : A la base, l’idée de PlayPlay vient d’une solution qu’Aurélien avait développée quand on travaillait ensemble chez Eurosport. Avec ses compétences de motion designer, il avait développé un petit outil qui permettait aux journalistes de créer eux même des vidéos. C’est en voyant cela que je me suis lancé à fond sur ce projet.

Aurélien (co-fondateur et Creative Director) : Je viens de la post-production vidéo et je ne trouvais pas de techno qui permettait de faire facilement des créations ambitieuses d’un point de vue design. J’ai donc construit quelque chose avec l’outil que je maîtrisais le mieux, After Effects, logiciel d’Adobe qui est la référence mondiale en la matière.

Alexandre (Head of Architecture et premier CTO) : Aurélien est clairement un super bidouilleur. Avec quelques lignes de code, il avait réussi à créer un prototype de PlayPlay dans After Effects ! N’importe qui pouvait créer une superbe vidéo en quelques minutes. Notre travail a été d’embarquer ça dans une application web avec des interfaces abouties et une vraie ferme de rendu vidéo. On a pu sortir la v1 de PlayPlay en quelques mois… mais derrière c’était toujours After Effects qui tournait !

“Ca marchait, c’était stable… mais cet écosystème fermé n’avait aucun avenir. On ne peut pas construire une boîte tech sur un hack et avec du code obsolète, aucun développeur ne voulait travailler dessus !”
Alexandre

Thibaut : “Est-ce qu’on ne peut pas se passer d’After Effects ?” C’était la question que je posais une fois par trimestre. Cela ne m'empêchait pas de dormir, je savais qu’on changerait un jour. Mais c’était toujours ce petit nuage gris au-dessus de nos têtes. Et plus on attendait, plus la migration allait être compliquée à faire…

Aurélien : Le problème avec After Effects ? Déjà, les temps de rendu des vidéos étaient longs, entre 2 et 3 secondes pour un simple changement de texte. C’était fonctionnel mais pas dans l’ère du temps où tout doit être instantané. Et le fait d’avoir une dépendance à un logiciel externe au cœur de notre réacteur technologique n’était pas ce qu’il y avait de plus rassurant.

Thibaut : Lors de notre première levée de fonds, en 2018, les investisseurs nous demandent comment on fait notre produit. On leur explique et ils nous confirment que ce n'est pas le truc le plus scalable du monde. Je me souviens d’une réunion avec le fonds allemand Point Nine. On avait un peu peur de leur réaction. Mais au final, ils ont donné leur go ! Ce sont des fonds early, ils assument cette part de risque.

Une rencontre déterminante

Aurélien : Et puis un jour, on est contacté par deux startupers bordelais, Maxence et Guillaume. Ils travaillent depuis un an sur Storiz, un concurrent de PlayPlay. Mais ils viennent nous dire qu’ils arrêtent car ils n’ont pas trouvé leur product market fit. On décide donc de les rencontrer.

Alexandre : Ils ont trouvé une autre façon de faire du rendu vidéo, avec la technologie GSAP. Une librairie qui permet de faire de l’animation en qualité After Effects mais directement dans le navigateur. On s’enferme alors 48h dans une pièce avec eux pour discuter de leur techno.

Thibaut : C’est une réunion secrète. j’ai demandé à un ami de nous prêter une salle dans sa boîte. On ne veut pas alerter les équipes, sachant qu’on a des employés qui ne font que de l’After Effects à temps plein ! On prend bien le temps de tester cette techno car on ne veut pas faire de compromis sur la qualité des vidéos créées par nos utilisateurs. On a déjà une centaine de clients, il faut qu’on puisse avoir les mêmes fonctionnalités à 100 %.

Alexandre : On se rend compte que c’est le cas. Donc on se lance dans ce projet et on demande à Maxence et Guillaume un coup de main en freelance les premiers mois.

Le projet “PlayPlay Podcast” comme sujet d’expérimentation

Pauline (VP Product) : En décembre 2019, on décide de tester GSAP sur un nouveau produit, PlayPlay Podcast. Un moyen de créer facilement des vidéos pour promouvoir son podcast sur les réseaux sociaux. L’objectif de cette stratégie : faire un pilote pour tester sur un plus petit produit sans client historique dessus, avant de devoir gérer une migration risquée sur notre produit coeur.

Thibaut : C’est ainsi que naît ce qu’on appelle en interne le projet “The Fork”. Un peu comme pour la ligne 13 du métro à Paris, avec l’embranchement de deux voies.

“C’est notre projet phare de 2020… mais on ne se doute pas que ce sera aussi celui de 2021 !”
Pauline

ACTE II. Une promesse…source d’apprentissages (avril 2020 - Janvier 2021)

La mise en oeuvre de GSAP

Alexandre : En avril 2020, on lance le projet en mode commando avec une première squad. Pour renforcer l’équipe, on recrute aussi des personnes avec un gros background dans l’univers du creative development.

Thibaut : C’est aussi le moment où l’on fait notre série A. Et, une nouvelle fois, il faut ouvrir le capot aux investisseurs… J’ai en tête ce dernier meeting où Aurélien et Alexandre ont été super briefés : “Aujourd’hui, notre produit s’appuie sur After Effects. Mais on a développé un POC qui est un succès…”.

Alexandre : Ce projet est hyper ambitieux. On s’apprête à réécrire tout notre moteur de rendu vidéo from scratch, sur une techno que l’on ne maîtrise pas. Il faut comprendre qu’on est dans un domaine hyper innovant, très peu de personnes ont les mêmes problèmes que nous et donc il n’y a aucune littérature technique disponible. On doit tout inventer !

Sophie (Head of Customer Success) : Je me souviens très bien, en août, je rentre de vacances et Thibaut me dit : “C’est quoi ton plan de migration pour que tous les clients soient le 1er janvier 2021 sur la nouvelle version ?”. Euh… la probabilité que tout soit prêt dans ces délais me semble faible.

La douche froide

Aurélien : On lance la Bêta de PlayPlay Podcast fin septembre et, assez vite, je me rends compte qu’au niveau du rendu créatif, cela ne permet pas d’aller où on veut. Dès qu’on souhaite faire des animations plus complexes, on est freiné par la technologie qui fait planter le navigateur des clients.

“GSAP n’était clairement pas la meilleure solution en fait.”
Aurélien

Alexandre : Finalement, avec GSAP, on continuait à bidouiller… Cela nous a permis de nous lancer car c’était une technologie à notre portée mais on réalise qu’on ne va pas dans la bonne direction. C’était frustrant mais avec PlayPlay Podcast on avait quand même revu complètement notre moteur de rendu vidéo et on sentait que l’on n’était pas si loin.

Aurélien : C’est à ce moment-là qu’on a recruté Maxime, un creative dev qui avait l'habitude de travailler avec la technologie WebGL. Je commence à creuser et à échanger avec toute cette communauté du creative dev’ qui travaille soit en freelance, soit dans des boîtes d’événementiel, soit dans des agences de créations artistiques. Et je commence à percevoir tout son potentiel.

Alexandre : Sur ce genre de projet, je sais que c’est rare d’avoir bon dès le premier coup et je suis rassuré par WebGL car c’est open source et les nouvelles personnes de l’équipe ont déjà travaillé dessus. En fait, la décision de basculer de GSAP vers WebGL se fait presque naturellement ! Avec le recul, on s’est aperçu que même si on a jeté plusieurs mois de travail à la poubelle, la somme de ce que l’on avait appris valait largement ces efforts. À ce moment-là, on sait que cette nouvelle architecture pourra être le socle technologique de PlayPlay pour les prochaines années.

“Il faut énormément de courage pour se remettre en question après tant d'efforts déjà déployés. Beaucoup de boîtes auraient persisté dans cette mauvaise direction…”
Florent, CTO

Aurélien : Thibaut nous fait confiance. Je lui montre quelques démos en WebGL et, en une heure, il comprend la pérennité et la qualité de la techno. Et surtout, que cela ne sera pas déceptif pour nos clients.

Thibaut : J’en tire personnellement deux enseignements. 1) Dès qu’il faut prendre des décisions stratégiques sur la techno, il faut creuser plus en amont en faisant appel à plus d’experts. Mais 2) qu’on a “fail fast” et appris de nos erreurs, ce qui nous a permis de rebondir avec pragmatisme assez rapidement.

ACTE III. A la recherche du temps perdu (janvier 2021 - février 2022)

En mode “junkie du delivery”

Pauline : On se retrouve en janvier 2021. On a recodé PlayPlay Podcast avec WebGL, tous les voyants sont au vert… C’est le moment d’attaquer la migration de notre produit coeur vers cette nouvelle techno ! C’est un énorme chantier et on commence un rétro planning sur 9 mois. On a levé des fonds 6 mois plus tôt, il ne faut pas se tromper une 2e fois.

Aurélien : L’objectif est bête et méchant : on a 70 templates codés sur After Effects, 50 000 lignes de code, il faut tout refaire à l’identique en WebGL ! Là, on prend 7 ou 8 freelances en plus dans l’équipe et on se met dans un rythme de delivery assez incroyable.

Sophie : Il ne faut plus perdre de temps en effet. Forcément, toute l’équipe tech bosse sur la nouvelle version donc le produit existant reste figé. Il n’y a plus aucune nouveauté dessus, ce qui est très pénalisant dans un secteur comme la vidéo en ligne où tout va très vite. Notre rôle au Customer Success c’est de faire patienter les clients.

Pauline : D’autant qu’il y a un vrai enjeu client dans cette migration : les deux versions ne sont pas compatibles entre elles ! C’est-à-dire que les clients, une fois migrés sur la nouvelle version, ne pourront plus éditer leurs anciennes vidéos.

Sophie : Oui, c’est vrai. Dans un monde magique, tu te dis qu’une migration technique, c’est un peu comme changer les tuyaux sous le plancher. Les clients ne voient pas la différence. Ici ce n’est pas possible, donc on doit réfléchir à toute la stratégie pour ne pas frustrer nos clients.

Pauline : La techno, en soi, permet d’avoir un rendu en temps réel dans ton navigateur. C’est cool mais ce n’est pas ce qui t’envoie des paillettes non plus. Pour apporter de la valeur à nos clients avec cette nouvelle version, on décide donc d’ajouter des fonctionnalités que l’on peut désormais faire grâce à WebGL. Ainsi, en parallèle des équipes qui sont sur la partie migration technique, on a 2 équipes qui travaillent sur les nouvelles fonctionnalités qui seront disponibles uniquement sur cette nouvelle version.

Une bonne idée

Florent : On estime qu’on en a jusqu’à la fin de l’été pour transposer tous les templates. Mais clairement, on ne peut pas attendre aussi longtemps sans faire de check de réalité. On décide donc de faire une release intermédiaire. Et d’ouvrir en mai la nouvelle version juste pour les “free trialers” qui utilisent la version d’essai de 7 jours.

Pauline : Comme ça, on peut tester l’usage et une montée en charge progressive. Le tout, sans avoir à se préoccuper de l’historique des clients existants.

Sophie : En mai, on a une quarantaine de templates disponibles. Autant la tech veut lancer le plus vite possible, autant moi je freine le déploiement sur la base de clients existants jusqu’à ce qu’on ait suffisamment de fonctionnalités pour que les gens apprécient le produit.

Florent : Et le 11 mai 2021, les premiers comptes sont ouverts sur la nouvelle version ! Le plus incroyable, c’est que, fin février, on a fait un planning sur Excel du plan de livraison jusqu’en septembre… et, pour la première fois de ma vie, ce plan et les délais sont respectés scrupuleusement !

Aurélien : Là, gros coup de sueur. En juin, on découvre un problème technique : il y a un décalage entre l’audio et la vidéo !

Florent : Nos meilleurs devs se mettent en mode bulldozer et passent tout le mois de juillet et d’août à essayer de le régler. Pendant mes vacances, à la fin août, Aurélien m’envoie un texto : “C’est bon, ça se passe bien, on ne devrait plus avoir de mauvaises surprises !”

Une migration par vagues

Thibaut : On revient de vacances en septembre, la nouvelle version tourne bien avec nos récents clients et on a migré les 70 templates. Maintenant, l’enjeu, c’est côté clients historiques. La nouvelle version, en soi, c’est avant tout une évolution technique mais, grâce aux nouvelles fonctionnalités, on espère que nos clients seront contents…

Sophie : Sachant que, depuis janvier 2021, on passe notre temps à faire des claquettes en expliquant aux clients qu’une nouvelle version arrive bientôt…

Sophie : En septembre, on commence la migration. On procède alors par batch car, quand tu as plus de 1 000 clients, tu ne peux pas le faire en un coup. C’est beaucoup trop risqué, autant pour le service client qu’au niveau tech. On effectue donc un premier test d’une centaine de clients avec la plus grande diversité de profils possible : des petites boîtes et des grands comptes, des experts ou des novices… Afin d’anticiper les problèmes potentiels.

Thibaut : LĂ , on met en place un plan pour que tout le monde soit en ordre de bataille.

Sophie : En effet. On organise 2 webinars par semaine d’explication. En plus de RDV spécifiques avec les grands comptes. Ce qui nous permet de tester l’argumentaire… et de nous rendre compte que cela passe comme une lettre à la poste ! On ajoute aussi des personnes au support et on ne met aucun autre projet que la migration jusqu’à la fin de l’année afin que la réponse aux clients soit le focus de tout le monde.

Florent : Puis on enchaîne progressivement par batch de 300 clients. Franchement, c’est impressionnant : j’en ai fait des migrations dans ma vie où tu reçois des tomates pourries. Mais là, tout se fait de manière smooth ! On est en maîtrise totale de notre stack technique.

Pauline : En interne, cette migration de clients, c’est vraiment l’objectif n°1 de la boîte. On communique de manière hebdomadaire et on célèbre chaque batch.

Sophie : Et fait notable : on ne perd aucun client ! Une vraie prouesse d'exécution.

Pauline : Et le 4 février 2022, on débranche complètement l’ancienne version !

Epilogue : Une épreuve collective de résilience et de solidarité

Florent: C’est une aventure incroyable ! Après quasiment un an où nos clients existants n’ont eu que PlayPlay Podcast comme nouveauté majeure, les équipes ont à nouveau la capacité d’avoir de l’impact fort sur l’expérience de nos clients. Depuis octobre, on recommence à apporter 4 à 8 nouveautés par mois aux utilisateurs.

Le fait de passer sur WebGL rend PlayPlay super attractif pour recruter des dev’. Ces derniers se rendent compte qu’on utilise les meilleurs langages et qu’ils vont pouvoir innover chez nous.
Thibaut

Aurélien : C’est vrai que les creative developers font généralement des projets en one shot et à la durée de vie très courte. Là, ils sont comme dans un fauteuil chez nous avec des briefs clairs, des specs bien écrites, la possibilité de bâtir des choses complexes et scalables… tout en bossant dans une team. Ce qu’ils ne retrouvent pas forcément en freelance ou dans des agences.

Alexandre : Notre équipe Motion est toujours modeste mais ils ont construit un véritable framework d’animation vidéo. Cela n’existe nulle part ailleurs ! Aujourd’hui, nos développeurs peuvent créer des animations magnifiques en quelques heures de travail, avec toutes les bonnes pratiques de développement et des tests automatisés. Nos clients sont de plus en plus exigeants sur le motion design mais, à chaque fois, on repousse les limites de ce que l’on pensait possible grâce à ce nouveau socle technique.

Thibaut : Ce que je retiens aussi, c’est que ce n’est jamais le bon moment pour faire ce genre de projet. Car ce n’est que des problèmes et ça fait peur ! Si tu rates un projet comme celui-là, tu peux potentiellement couler une boîte. Mais on a eu le courage d’y aller.

Sophie : Ce qui a été beau je trouve aussi, c’est le chemin parcouru avec de plus en plus de personnes qui se sont ajoutées au fur et à mesure. On a dû le fêter 1 000 fois collectivement ce projet : la sortie de PlayPlay Podcast, les nouveaux visiteurs sur la nouvelle version, le début de la migration, la fin de la migration, la fin de la V2…

Thibaut : C’est vrai que l'implication collective a été incroyable. Je suis admiratif de cette exécution mais aussi de notre résilience. Quand on s’est retrouvé dans des culs de sac technologiques à douter sérieusement, personne n’a rien lâché. On a su faire le dos rond et rester solidaire. Et illustrer concrètement l’ensemble nos valeurs :

  • Play it COMMITTED : Du dĂ©but Ă  la fin, les Ă©quipes n’ont jamais baissĂ© les bras.
  • Play it USER FIRST : Je pense notamment Ă  la solidaritĂ© entre les Ă©quipes dev’ et CSM pour que cette migration soit la plus bĂ©nĂ©fique pour nos clients.
  • Play it AMBITIOUS : On fait du rendu vidĂ©o dans le navigateur de nos utilisateurs !
  • Play it CREATIVE : Autant sur la techno que notre manière de la dĂ©velopper.
  • Play it UNITED : Un projet qui implique toutes les Ă©quipes de la boite avec une telle Ă©nergie collective, je n’en avais jamais vu avant !