Refonte site web : BVTC

Refonte du site web de BVTC : La bible du VTC, organisme de formation spécialisé dans la formation et l’accompagnement de futurs chauffeurs de taxi et VTC en région parisienne.

Objectif du projet

L’entreprise utilisait un site WordPress qui commençait à vieillir. Il avait été créé il y a plus de 4 ans et elle voulait lui donner un coup de neuf pour améliorer le parcours utilisateur, la gestion du contenu et l’harmonie entre les pages. À chaque fois qu’il fallait modifier une page, c’était un vrai parcours du combattant.

Au même moment, elle venait de fusionner deux expertises : la formation et la comptabilité / création d’entreprise. Un nouvel ensemble de services qu’il fallait organiser et répartir sur plus de 30 pages vitrines et près de 300 articles de blog et ressources, à importer, restructurer, adapter et simplifier.

La direction artistique

Logo transformé en route

L’identité visuelle de BTVC reposait uniquement sur des couleurs et un logo. Pour obtenir une identité de marque incarnée, j’ai décidé d’exploiter le logo en détournant sa forme.

– Des formes inspirées du tracé routier pour rappeler l’univers du transport
Elles renforcent l’idée de parcours et de direction pour l’utilisateur

Tableau de bord

Chacune des images sur le site ont 2 bords arrondis, et deux bords pointus. Et il y a une très bonne raison à cela. Pour renforcer à nouveau l’identité visuelle de manière plus subtile, les images font référence à la forme d’un tableau de bord de voiture. Ces formes permettent de donner du charisme au site web.

Le parfait exemple : Les CTA

Ils mélangent à a fois le logo travaillé en tracer routier, et la forme aux bords arrondis qui incarne le tableau de bord d’une voiture.

Les composants du projet

L'arborescence

Cette première étape était primordiale, car il y avait environ 400 pages à réimporter, modifier et adapter. Comme il s’agissait d’une refonte totale, nous avons choisi d’utiliser Elementor, ce qui nécessitait de segmenter les pages par type afin de créer les bons gabarits et de ne rien oublier sur le nouveau site.

Cette phase s’est faite en collaboration avec une agence SEO, qui travaillait en parallèle sur le nouveau maillage interne à mettre en place.

Le wireframe

Une fois la structure validée, nous avons attaqué les wireframes. Il fallait reprendre les pages existantes, améliorer la mise en forme du contenu — car beaucoup de pages étaient simplement remplies de texte sans mise en valeur —, créer les gabarits de pages types et repenser toute la structure ainsi que le parcours utilisateur.

Les proposition graphique

Ici, nous n’avons pas créé de charte graphique à part entière. Nous avons simplement réutilisé les couleurs que le client souhaitait conserver, tout en lui proposant de nouvelles typographies et pistes de styles visuels.

Avant d’attaquer la maquette, il fallait définir une ambiance générale pour le site. C’est à ce stade qu’interviennent les propositions de design et les orientations artistiques. Nous avons alors prototypé la page d’accueil afin de valider une direction claire.

La maquette sur mesure

Une fois la piste graphique validée, nous avons attaqué le maquettage des pages avec la direction artistique choisie. Nous avons réalisé une maquette 100% sur mesure, à la fois pour desktop et pour mobile. Ici, il était crucial de penser à la version mobile, car le client avait plus de 70% de ses visiteurs qui consultaient le site depuis leur téléphone.

Ensuite, nous sommes passés à l’intégration des pages sur WordPress.

Les outils utilisés

Elementor

Notre outil de prédilection pour la gestion des pages WordPress, alliant flexibilité et design soigné.

WordPress

Le CMS que nous utilisons pour développer des sites performants et évolutifs.

Figma

Utilisé pour la création et validation des designs, des maquettes aux interfaces interactives.

D'autres réalisations de sites web

Nous contacter​

Discutons de votre projet ensemble !

Vous avez un projet en tête (site web, landing page, identité visuelle) ? Prenez rendez-vous avec Keziah pour qu’on voit ensemble comment on peut vous accompagner.