Comment les marketeurs d’AssoConnect sont devenus développeurs… 🚀
Article écrit par une Marketeuse
Voilà un an, nous mettions en ligne un beau bébé : le nouveau site vitrine d’AssoConnect. L’accouchement a pris le temps, mais ne fut pas vain : il y a eu un avant et un après.
Au-delà des performances accrues, ce nouveau site est surtout une révolution interne : notre équipe Marketing est devenue développeuse, et par là même, autonome dans la communication sur le site vitrine.
On vous explique.
On partait de loin
S’il avait le mérite d’exister et nous a rendu de nombreux services, le bilan de l’ancien site internet d’AssoConnect n’était pas reluisant.
Premièrement, seuls les développeurs avaient la main sur le site. La moindre modification d’une information imposait de les solliciter. Inutile de préciser que nos développeurs n’ont pas que cela à faire — ils ont un logiciel à développer — et que changer une virgule ou un chiffre n’est pas exactement la requête la plus palpitante à faire.
Conséquence directe : il fallait parfois attendre des semaines (et supplier les copains) pour que cette modification ait lieu. Difficile alors de faire preuve d’agilité côté Marketing. Faites ce que je dis, pas ce que je fais…
Les arguments qui nous ont convaincus de mettre le sujet “site internet” sur la table ne manquaient donc pas :
- Rendre autonome le marketing sur le site internet, lui permettre de l’enrichir avec du contenu sur les requêtes stratégiques comme “logiciel gestion association”,
- Soulager l’équipe technique, arrêter de la solliciter pour des besoins aussi peu “techniques”,
- Accélérer la mise en ligne de nouvelles pages,
- Refondre la charte graphique et éditoriale,
- Améliorer nos performances SEO,
- Améliorer notre taux de conversion essai gratuit/visite.
Chaque raison à elle seule était valable pour effectuer une refonte du site. Dès lors, la question ne se posait plus : le projet devenait stratégique.
Les forces en présence pour mener le projet
La refonte s’imposant, il s’agissait donc de ne pas reproduire les erreurs de passé. Le contexte de l’entreprise avait largement évolué depuis la mise en ligne de l’ancien site et les cordes à notre arc s’étaient multipliées.
Nous avions désormais :
- Marine, notre Directrice artistique, qui a développé une nouvelle charte graphique
- Une équipe marketing, composée de David, Responsable digital et moi-même, Responsable du contenu,
- Une équipe technique étoffée avec notamment Violaine, développeuse front, et Rémi, lead-dev front.
Les enjeux avaient eux aussi changé.
Côté business, nous connaissions une traction grandissante. Il était donc indispensable de :
- Disposer d’un site robuste et complet
- Ne rien perdre de notre référencement
- Améliorer notre score de performance sur mobile, une part grandissante de notre trafic.
Côté technique, la simplicité devait être le maître-mot : le challenge consistait à ne pas créer d’usine à gaz et gagner en vélocité de production.
Notre joyeuse équipe rassemblée, les besoins et enjeux identifiés, l’étape suivante consiste à déterminer la solution technique la plus à même de répondre à nos besoins.
Le choix de la solution technique pour notre nouveau site
Nous avons envisagé différentes possibilités :
- un CMS spécialisé comme Wordpress ou Contentful,
- un CMS intégré, comme Hubspot qui est également notre CRM,
- un générateur de site statique basé sur React comme Gatsby,
- du développement interne avant de passer la main à l’équipe Marketing.
Le choix de la solution s’est finalement porté sur un combo Gatsby et Netlify.
Gatsby.js est un générateur de site statique en React.js. C’est une solution moderne avec une communauté active et beaucoup de ressources disponibles.
En parallèle du site vitrine, l’application AssoConnect est en cours de refonte sous React.js. Utiliser Gatsby.js (et donc React.js) pour site vitrine permettait d’harmoniser les langages utilisés en interne.
Gatsby apporte 2 avantages importants sur la génération des pages statiques :
- de meilleures performances du site,
- une amélioration du SEO.
Enfin, le développement sous React.js est plus simple : pas besoin de routage, la création d’un fichier dans le dossier pages permet la création du routage.
Le choix de l’hébergement s’est porté sur Netlify, support de Gatsby.js en natif, et qui permet le déploiement de site clé en main, le versioning des mises en production et la séparation serveur applicatif et site vitrine si jamais l’un des deux est down.
La mise en route du projet
Comme souvent dans les projets digitaux, on a l’impression d’être face à une montagne. Escalader l’Everest est impossible à faire d’une traite. Il s’agit donc d’y aller par étape.
Nous avons identifié les différentes pages qui constituaient l’ancien site, et toutes les nouvelles pages que nous souhaitions créer en plus pour notre nouveau bébé.
- Priorité 1 : Home page, Types d’associations, Fonctionnalités, Tarifs
- Priorité 2 : CGUV, FAQ, Essai gratuit, Livres blancs, Qui sommes-nous ?, Equipe
- Priorité 3 : Toutes les fonctionnalités, Jobs, Ressources pour associations, Partenaires, Partenariats, Presse
Le travail en termes de contenu et de design a débuté pour les pages en priorité 1, avec Marine à la manœuvre sur le design, David et Corinne sur le contenu et l’organisation des messages.
Après un travail de benchmark et de reprise des contenus de l’ancien site, les maquettes de la Home, des pages Types d’association et des pages Fonctionnalité sortent rapidement.
Elles sont le point de départ du travail suivant : la définition des composants.
Pour les néophytes, un composant permet de “découper l’interface utilisateur en éléments indépendants et réutilisables, vous permettant ainsi de considérer chaque élément de manière isolée” — merci à la documentation React. 😉
Globalement, il s’agit de déterminer les différents “blocs” présents sur les différentes pages et que nous réutiliserons pour en créer de nouvelles en les adaptant. Il est donc indispensable de n’en oublier aucun et d’identifier pour chacun de qui pourra être changé (ou pas), c’est-à-dire les propriétés et les paramètres.
Finalement, la définition d’un composant donne à peu près ceci :
Nous nous sommes attelés à la tâche en équipe projet d’abord pour être certains d’avoir tous compris la méthode, puis nous nous sommes répartis les différents composants à définir pour aller plus vite.
De cette manière, le développement des composants définis pouvait commencer en parallèle.
Petit à petit, le répertoire des composants s’étoffe et les premières pages peuvent être construites. Mieux : nous varions les assemblages des composants pour créer des pages différentes sans pour recourir à des développements additionnels.
Finalement, nous sommes en train de construire notre propre CMS.
Avant de prendre la main sur la création des pages, Marine, David et Corinne sont formés sur les outils.
Au programme :
- Visual Studio Code pour construire les pages,
- Microsoft Azure Storage Explorer pour stocker les images,
- SmartGit pour mettre en ligne les pages — la consécration.
Deux heures de formations et quelques exercices plus tard, l’équipe “non tech” est capable d’agencer les éléments et construire des pages de A à Z. Elle a à sa disposition une “bible” des composants dans laquelle elle peut piocher des éléments.
La situation actuelle
Le nouveau site vitrine d’AssoConnect a été mis en ligne en mars 2019.
Près d’un an plus tard, le constat est sans appel : le changement a fait beaucoup de bien !
Crédibilité, visibilité, efficacité, gain de temps, vélocité : le bilan est positif. D’une trentaine de pages sur l’ancien site, nous en avons aujourd’hui plus de 130 et de nouvelles continuent d’arriver régulièrement.
Nous sommes donc passés de ceci :
A cela :
Nous avons globalement gagné sur tous les fronts :
Il reste bien sûr des chantiers à travailler, comme les temps de chargement sur mobile.
Mais le travail de collaboration entre le Marketing et la Technique a permis aux 2 équipes d’être plus proches et conscientes de leurs enjeux respectifs.
Et évidemment, cela a nourri la curiosité et l’envie, côté Marketers, de mettre les mains dans le code !
Le nouveau motto de l’équipe Marketing : être geek, c’est chic !
PS : si vous aussi, vous avez envie de rejoindre une aventure formatrice et enthousiasmante, sachez qu’AssoConnect recrute (beaucoup), toutes nos offres sont sur notre page Welcome to the Jungle.
