Migration et refonte du site du site de Tracktor sur Webflow

Tracktor est une startup spécialisée dans la location de matériels entre professionnels et compte des milliers de clients actifs partout en France. Découvrez pourquoi ils ont fait appel à Gemeos.
Illustration croce
Image du projet
Sommaire
Réalisations
Intégration Webflow
Copywriting
SEO
UX/UI Design
outils utilisés
Guillements illustration

"Sacha & Sandro ont travaillé sur la refonte et la migration de notre site avec pour objectifs : avoir une identité visuelle unique et différenciante, clarifier le message et la proposition de valeur, fluidifier le parcours client et in fine générer plus d'opportunités business. Très content du résultat et les chiffres parlent d'eux-mêmes. Sacha & Sandro sont compétents, impliqués, consciencieux, passionnés et vont au bout des choses. Je les recommande fortement !"

Idir AIT SI AMER
CEO @Tracktor SAS

Contexte

Tracktor a été fondé par un ingénieur BTP, le service a été pensé dès le départ pour répondre aux besoins des métiers de la construction et du bâtiment. Ils avaient une image très BTP, une image même très TP à cause des couleurs jaune et noir.

Leur service s'est bien développé depuis leur première levée de fonds : leur couverture géographique s'est largement étendue à toute la France, ils attirent désormais des clients de tous horizons et ont une vision de leur business totalement différente.

Ils ont donc décidé de refondre le design de leur site (design + proposition de valeur) et en ont profiter pour migrer sur Webflow pour plusieurs raisons :

  1. Gagner en agilité.
    L'équipe market/growth est maintenant autonome et peut effectuer des changements en toute autonomie.
  2. Améliorer leurs performances.
    Toutes les pages étaient implémentées dans un CMS interne, non optimisé et très rigide.
  3. Libérer de la bande passante pour l'équipe Produit/Tech.
    Pour les sujets sur lesquels ils ont beaucoup de valeur ajoutée (fonctionnalités spécifiques, application mobile, etc).
  4. Transformer leur identité visuelle.
    Permet de la rendre plus cohérente avec leur position de leader.
  5. Adapter le site à leur discours commercial et à leur vision

Problématiques

  • Une masse importante de pages à migrer (± 1000)
  • Un catalogue de produits large et évolutif
  • Une architecture CMS complexe (SEO Local, FAQ & avis clients par article, gestion des accessoires, système de filtre)
  • Avoir un site scalable et facilement modifiable par toute l’équipe marketing
  • Un tracking sur mesure (setup dataLayer)
  • Un plan de redirection dense

Design

Refonte du design pour être en adéquation avec le nouveau branding, un gros travail de copywriting a été réalisé pour optimiser la conversion et retranscrire la proposition de valeur de la meilleure manière possible. Vision Saas vs Marketplace avec une mise en avant du produit.

Avant - Après refonte Tracktor

Avant refonte

Après refonte

Réalisation d'un design system

Ce rebranding était l'occasion rêvée de mettre en place ARMATURE, le Design System de Tracktor, afin de gagner en cohérence et en productivité.

ARMATURE est composé de :

  • Actifs de marque (mission, valeurs, ton de voix, etc.)
  • Composants graphiques partagés entre Designers
  • Documentation des composants (règles d'utilisation des composants)
  • Bibliothèque de composants développés (partagée entre Développeurs)

ARMATURE - Design System de Tracktor

Intégration dans Webflow

Mise en place d'un style guide

Permettant de garantir la cohérence et la stabilité du site de Tracktor, il reprend l’ensemble de directives visuelles et fonctionnelles du design system ARMATURE ci-dessus et permet d’établir un standard pour les éléments du site, tels que les couleurs, les typographies, les boutons, les formulaires, les icônes, etc. Il permet également une collaboration efficace entre les membres de leur équipe, et d’assurer une cohérence dans tous ses éléments.

Style guide Tracktor
Style Guide - Webflow

Migration des pages à caractère SEO

Une fois le style guide posé dans Webflow, nous nous sommes concentré sur les pages à caractère SEO :

  • Blog
  • Guides
  • Pages locales - location {matériel} + {ville}

Un gros travail de redirection a été mis en place pour contrer les dettes causées par la rigidité technique de leur CMS maison historique.

Pages à caractère SEO Tracktor
Pages à caractère SEO

Migration des pages statiques

La suite logique fût l'intégration des pages statiques :

  • Comment ça marche ?
  • Clients
  • Avantages
  • Qui sommes nous ?
  • Offres
  • Secteurs
  • Etc

Des pages avec un gros enjeux de copywriting mais une intégration relativement simple

pages statiques Tracktor

Migration du catalogue

Schema macro de l'architecture CMS :

La migration du catalogue à nécessité un peu de réflexion, notamment pour la construction de l'architecture CMS :

  • Définition des collections
  • Relation entre les collections
  • Optimisations SEO

Mise en place d'un tracking personnalisé

Avec des gros enjeux de génération de lead et de génération de devis, Tracktor avait besoin d'un tracking personnalisé pour suivre toutes les données pertinentes comme la provenance de leurs lead, l'analyse de leur tunnel de conversion ou encore la remonté des valeurs de conversion dans GA. Pour ce faire nous avons mis en place un dataLayer remontant toutes ces données dans GTM leur permettant de faire toutes leurs analyses.

Exemple dataLayer - Page Article

Une intégration responsive évidemment

Un site web responsive est devenu une nécessité pour toute entreprise cherchant à offrir une expérience utilisateur de qualité et à rester compétitive dans le monde numérique d'aujourd'hui.

Résultats

La migration, qui incluait un nombre conséquent de pages, des contraintes SEO et un tracking personnalisé, s'est déroulée avec succès.

  • Une nette amélioration des performances techniques du site
  • Aucune déperdition de trafic. Parce que oui, lors d'une migration, le plus important et déjà de ne pas perdre de position SEO et de maintenir son trafic. 
  • Gros gain en agilité pour l’équipe market/growth qui va pouvoir s'amuser
  • Bande passante libérée à l’équipe product/tech pour se focus sur le produit
Score Lighthouse après migration - Tracktor

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

+50 sites webflow réalisés

Découvrez nos autres réalisations

Tous nos sites sont designés et developpés avec
Coeur rouge
Stickers projet
Image du projetIllustration hover
Découvrir
Image du projetIllustration hover
Découvrir
Image du projetIllustration hover
Découvrir
Image du projetIllustration hover
Découvrir
Voir toutes nos réalisations !
Illustration
Découvrir le site web
Nous utilisons les meilleurs outils

développés avec les meilleurs outils et les meilleurs pratiques

Gemeos ne vous propose pas simplement un site web, mais une expertise sur les meilleurs outils pour vous garantir un retour sur investissement optimal. 

Figma

Pour le design de votre site web

Webflow

Pour l’intégration de votre site web

Client-first

Pour organiser vos projets

Wized

Pour ajouter des fonctionnalité à vos projets

Make

Pour l’automatisation de vos flux de travail