Fleet | Blog - La refonte du site web de Fleet en 7 étapes

La refonte du site web de Fleet en 7 étapes

L'auteur

Marta Ponzone

Product Manager

Chez Fleet , notre équipe a été impliquée dans un projet très stimulant ces derniers mois : la refonte de notre site Web. Ce projet nous a conduit à repenser l'ensemble de la plateforme de marque, l'image de marque et le positionnement.

La mission de Fleet est de simplifier l'accès, la gestion et le renouvellement des meilleures technologies afin que les entreprises et les talents puissent se concentrer sur l'essentiel.

Nous avons identifié plusieurs problèmes à résoudre avec le nouveau site Web :

  • Bien clarifier notre business model, étant l'une des premières marques de Device-as-a-Service en France.
  • Expliquer les différences entre la proposition de valeur de Fleet et les loueurs d'ordinateurs portables traditionnels.
  • Informer nos clients de l'empreinte carbone de leurs ordinateurs et des différences entre les ordinateurs portables neufs, certifiés et reconditionnés.
  • Faire passer l'image de marque de Fleet au niveau supérieur et y intégrer plus de sophistication, de maturité et de professionnalisme.

J'ai été la cheffe de projet de la refonte du site Web et j'ai eu pour mission de coordonner le travail de plus de 10 personnes basées dans différentes villes. Nous avons dû travailler avec une approche à distance, notamment en utilisant des réunions assynchrones. J'ai assuré la partie "Product Discovery" (identifier les pain points et définir le scope), ainsi que l'élaboration benchmark et de wireframes, la validation des idées et la coordonnation du travail de conception.

Pour réussir ce projet, nous avons suivi un processus en 7 étapes.

1. La nouvelle image de marque et le nouveau positionnement de Fleet

La première étape de la refonte du site Web a été de comprendre où se dirigeait la marque, la vision de l'équipe et le positionnement de la marque.

Sauce de marque Fleet

J'étais en charge de définir les guidelines du brand design, pour renforcer l'image de marque de Fleet.

L'équipe Marketing a mené des ateliers pour construire la plateforme de marque, avec pour objectif d'aligner tout le monde sur la vision, la stratégie et le message.

Notre site Web devait transmettre des informations claires, pour que l'on puisse facilement comprendre la proposition de valeur de Fleet.

2. Points faibles du site Web actuel et résumé du projet

Avant de nous plonger dans la refonte, nous avons rédigé un brief de projet pour que tout le monde soit sur la même longueur d'onde concernant les "pain points" actuels.

Nous avons posé plusieurs questions pour bien définir le projet :

  • Quelle est l'ambition du projet ?
  • Quels sont nos objectifs et nos KPIs ?
  • Qui fait partie de l'équipe du projet ?
  • Quelle est notre deadline et quel est notre échéancier ?

3. Benchmark et analyse concurrentielle

Nous avons regardé les sites web existants. J'ai commencé avec une liste d'entreprises dans notre univers concurrentiel, puis je suis passé à des d'autres entreprises qui s'adressent notre public cible. Enfin, j'ai observé d'autres leaders B2B en France, en Europe et aux États-Unis.

Nous avons cherché de l'inspiration pour la nouvelle orientation de la "brand sauce" et nous avons comparé les forces, les faiblesses et les opportunités parmi les entreprises B2B.

Benchmarking

4. Architecture des informations

L'architecture de l'information est la pratique consistant à organiser le contenu afin qu'il soit facile à comprendre. Dans la conception Web, les diagrammes structurels cartographient les relations entre tous les écrans d'un site, donnant une vue d'ensemble des composants du site.

Nous avons créé l'architecture de notre site internet après avoir réalisé une étude SEO qui nous a permi d'identifier 3 cocons sémantiques à prioriser.

Architecture du site Fleet

5. Wireframes et maquettes à distance

J'ai utilisé des wireframes tout au long de la refonte pour nous aider à réfléchir aux problèmes et valider les idées. Les plus complexes, comme nos catalogues, ont été réalisés sur papier, et d'autres ont été conçus directement sur Figma.

Wireframes sur papier

J'ai commencé à développer des maquettes très précises dès le début du processus de wireframing en utilisant Figma. Je les ai partagés avec l'équipe tout au long du projet jusqu'à ce que la majeure partie du site soit codée.

En tant que seule membre de l'équipe travaillant entièrement à distance, j'utilisais des réunions asynchrones pour permettre à toute l'équipe de gagner du temps. Cela m'a permi d'obtenir rapidement des validations et d'aller plus vite dans le processus. Chez Fleet, nous utilisons Claap, la dernière plateforme de réunions asynchrones.

Wireframes des pages du site Fleet sur Figma

6. Direction artistique, illustrations et icônes

Nous voulions ajouter une touche humaine à la direction artistique. Avec la réalisation de la "brand sauce", nous avons compris que le style du site Web devrait être plus moderne, professionnel, mature et premium.

Nous avons collaboré avec l'illustratrice Eloïse Gillard qui a fait un travail incroyable en créant des illustrations personnalisées pour Fleet.

Eloise nous a ainsi aidé à créer une nouvelle identité de marque en ajoutant de nouveaux éléments dans notre design (lignes manuscrites, flèches, symboles, étincelles et formes géométriques), de nouvelles icônes et des illustrations avec des personnages Fleet.

Nouvelle direction artistique de Fleet Illustration Eloise pour Fleet

7. Optimisation du référencement

La manière dont un site Web est conçu, sa navigation, son contenu et son accessibilité, jouent tous un rôle dans le classement du site. C'est pourquoi nous avons fait un énorme travail autour du référencement, en commençant par des URL bien définies, des images correctement optimisées, des balises de titre, des mots-clés, une intégration des médias sociaux et des temps de chargement de page plus rapides.

Ancienne et nouvelle hompage Fleet

Voici les leçons que notre équipe a retenues lors de la refonte de notre site Web :

Diviser le long processus en tâches plus digestes lors de la réunion de lancement.

Le lancement du projet et le brief visaient à donner à chacun une vue d'ensemble des étapes du site, des processus et une planification globale. Nous avons définit les tâches de l'équipe pour les mois suivants.

La planification et la communication sont essentielles.

Chaque vendredi après-midi, nous avons envoyé un email récapitulatif à toute l'équipe avec une rétrospective des réalisations de la semaine et un plan clair pour la semaine suivante avec les tâches de chacun par équipe (Design, Dev, Marketing, Stakeholders et Freelances).

Prioriser, en continu.

Nous avons eu des changements majeurs inattendus au cours du processus, comme des changements stratégiques dans notre catalogue d'ordinateurs. Nous devions établir des priorités pour respecter notre échéancier et lancer le site Web à temps.

Inclure dès le début toutes les parties prenantes et les retours des développeurs.

Nous avons programmé des revues de pages avec les parties prenantes au début du processus, à partir des wireframes, puis jusqu'aux conceptions finales, pour connaître les demandes de la direction et garder tout le monde sur la même longueur d'onde. Nous avons aussi rapidement prévu des revues avec l'équipe de développement pour parler des difficultés techniques et pour anticiper les Sprints et les efforts de leur part.

Venez découvrir le résultats du projet sur www.fleet.co

Revenir au Blog
Afin d’optimiser votre expérience, nous utilisons des cookies 🍪, que vous acceptez en poursuivant votre navigation. En savoir plus