Parler de mon projet

Étude de cas

Le premier cabinet d’avocats français certifié Great Place To Work

Jaberson, cabinet d’avocats et de conseil présent dans 6 villes, nous a confié sa migration de WordPress à Webflow. Nous l’avons conçu et développé sur Webflow pour guider chaque client parmi ses 27 expertises.

Client
Jaberson
Secteur
Cabinet d’avocats et de conseil
Projet
Site vitrine, 2025
Développement
Webflow, par Le Studio
Page d’accueil du site Jaberson sur un MacBook posé dans un fauteuil en velours, sur fond noir.

Le contexte

Jaberson réunit des avocats et des consultants, de Marseille à Lille. Le cabinet changeait de dimension, avec une offre de conseil, de nouveaux bureaux. Son site devait suivre.

Notre rôle
  • Zoning
  • Wireframes
  • Design d’interface
  • Cadre éditorial
  • Développement Webflow
  • CMS
Outils
  • Figma
  • Webflow
  • HubSpot

Enjeux

Les enjeux, nos réponses

  1. L’enjeu2 métiers, le droit et le conseil, à présenter sans les confondre.

    Notre réponseUne marque, un site, et 2 familles d’expertises clairement séparées dans la navigation.

  2. L’enjeu27 expertises, que le visiteur ne sait pas toujours nommer.

    Notre réponseUne entrée par profil de client, du dirigeant de PME au DRH, qui mène aux bonnes expertises.

  3. L’enjeuUne équipe nombreuse, répartie entre 6 bureaux, et qui bouge souvent.

    Notre réponseDes fiches gérées dans le CMS, où chaque membre est relié à ses expertises.

Ce que nous avons fait

01Stratégie et UX

Cadrage et zoning

Le projet part d’une conviction du cabinet. Un dirigeant arrive rarement avec le nom d’une spécialité en tête. Il arrive avec un problème, une levée de fonds, une cession, un conflit.

Le zoning, validé avec l’agence SEO du cabinet, range donc les expertises par besoins et par profils de clients. La première version se concentre sur l’essentiel, avec l’idée assumée d’améliorer ensuite (viser la perfection du premier coup aurait coûté des mois).

Le menu s’ouvre sur « Nos clients », avant les expertises. PME, ETI, start-up, directeur juridique, DRH, DAF, 9 profils en tout, et chacun retrouve les sujets qui le concernent. Viennent ensuite les 2 familles d’expertises, avocats et conseil, puis les bureaux, les valeurs et l’équipe.

Un seul appel à l’action traverse tout le site. Prendre rendez-vous.

Accueil46 pages

  1. Nos clients9

    • Profil de client× 9
  2. Expertises avocats22

    • Toutes les expertises
    • Expertise× 21
  3. Expertises conseils1

    • Six expertises, une page
  4. Nos bureaux7

    • Bureau× 7
  5. Le cabinet4

    • Valeurs
    • Équipes
    • Recrutement
    • Contact
  • Entrée du menu
  • Page
  • Gabarit, page template CMS
Le plan du site : les profils de clients d’abord, puis les 2 familles d’expertises, les bureaux et le cabinet.
  1. Entrée 1

    Par profil

    • Neuf profils de clients
    • Du dirigeant de PME au DRH
    • Les expertises utiles à chacun
  2. Entrée 2

    Par expertise

    • 21 expertises d’avocats
    • 6 expertises de conseil
    • Les membres de l’équipe concernés
Les 2 façons d’entrer dans le site.
Fil de fer de la page d’accueil de Jaberson : titres et textes en place, photos et logos remplacés par des blocs gris.
Le zoning de la page d’accueil.

02Branding et direction artistique

Identité de marque

Le site part de la marque Jaberson, un nom en capitales à empattements, d’un seul tenant, et sa version empilée en 3 lignes, JA, BER, SON, en pied de page et sur la carte de visite. Le J, seul, sert d’icône au site. 2 couleurs portent l’ensemble, le bleu marine et un beige clair.

Le logo Jaberson en contour, sur sa grille : la hauteur des capitales, la ligne de base, et le J qui se glisse sous le A.

Le logo en contour et ses repères : la hauteur des capitales, la ligne de base, et le J qui se glisse sous le A.
Le logo sur les fonds du site.
Le J, seul, sur les fonds du site, plein ou en contour, et le logo empilé.
  • Marine#0F1736Principale
  • Marine 80#0F1736CC
  • Brun#261C17
  • Bleu clair#BDD7EE
  • Beige#EEEBE6Fond
  • Beige 80#EEEBE6CC
  • Blanc#FFFFFF
Les couleurs du site, relevées dans ses variables : le marine, le brun, un bleu clair, le beige et le blanc.

03Design d’interface

Design et gabarits

Le parti pris est sobre, des gris, du blanc, des blocs bien structurés. Les portraits de l’équipe existaient déjà, tous différents. Plutôt qu’un nouveau shooting, nous les avons détourés et posés sur un même fond. L’équipe a enfin l’air d’une équipe.

Les gabarits couvrent les expertises, les profils de clients, les bureaux et les fiches des membres.

Titres

  • LT Afficher Neue Regular
  • LT Afficher Neue Medium
  • LT Afficher Neue Bold

Un cabinet d’avocats et consultants à l’écoute des décideurs.

Textes

  • Neue Montreal Light
  • Neue Montreal Regular
  • Neue Montreal Medium
  • Neue Montreal Bold

Nous aidons nos clients à structurer, sécuriser et accélérer leurs projets.

LT Afficher Neue pour les titres, Neue Montreal pour le texte.

Typographie

LT Afficher Neue et Neue Montreal

Graisses

  • LT Afficher Neue Bold700
  • LT Afficher Neue Medium500
  • Neue Montreal Regular400
  • Neue Montreal Medium500

Échelle

  • Un cabinet d’avocats et consultants à l’écoute des décideursTitre / 48 px / LT Afficher Neue Bold
  • Expertises avocats et conseilSous-titre / 38 px / LT Afficher Neue Bold
  • Corporate, M&A, Stratégie RHLibellé / 20 px / Neue Montreal Regular
  • Prendre rendez-vousBouton / 16 px / Neue Montreal Medium
  • Marine#0F1736Titres, boutons, sections sombres
  • Beige#EEEBE6Fond des pages, bouton clair
  • Blanc#FFFFFFFonds alternés, en-tête
  • Brun#261C17Bloc d’appel avant le pied de page
  • Bleu clair#BDD7EEBouton des ressources
  • Marine 80#0F1736CCTexte courant

Boutons

Prendre rendez-vousConsulter toutes nos expertisesVoir nos expertises
Nous contacter

Profils et questions

Président, Gérant, DGDRHDAFDirecteur juridique
  1. À quoi sert un avocat en droit des sociétés pour mon entreprise ou mon groupe ?
  2. Pourquoi faire rédiger un pacte d’associés par mon avocat ?
  3. Comment sécuriser les opérations intragroupe dans un groupe d’entreprises ?
Le design system du site, de la typographie aux composants.

04Design d’interface

Rédaction

Le cabinet a écrit ses contenus, nous avons fourni le cadre. Un gabarit éditorial fixe pour chaque page ce qu’il faut dire et en combien de mots (60 pour une introduction, 30 à 50 pour une expertise). Les titres et les appels à l’action sont travaillés pour un lecteur pressé, celui qui décide.

Court.
Clair.
Direct.

Les trois règles du gabarit éditorial.
Premier écran de l’accueil Jaberson : le titre en capitales sur une photo de mer, 2 boutons, puis les médias qui parlent du cabinet.
L’accueil, premier écran.
Section Nos clients de l’accueil : 8 profils en cartes photo, de l’ETI aux entités publiques.
Nos clients : un profil, une entrée.
Section de l’accueil sur la certification Great Place To Work, avec les portraits de l’équipe sur fond clair.
Page Corporate : les compétences des avocats, en 6 cartes photo.
Le premier cabinet français certifié Great Place To Work, puis les compétences d’une expertise.
Page Notre équipe du site Jaberson sur un MacBook tenu sur les genoux, devant un mur gris.
La page équipe, sur un MacBook.
Questions fréquentes de la page Corporate, en 2 colonnes : la question à gauche, la réponse à droite.
Les questions fréquentes d’une page expertise.
Page du bureau de Marseille du site Jaberson sur un MacBook posé sur un buffet en bois, dans la lumière du soir.
La page du bureau de Marseille.

05Design d’interface

Version mobile

Les mêmes gabarits passent sur mobile. Le menu se range derrière un bouton, les profils et les expertises défilent en carrousel, et les boutons du premier écran restent à portée du pouce.

3 iPhone 17 de face sur le beige de Jaberson : l’accueil, la page PME et la page équipe.
L’accueil, la page PME et la page équipe, sur mobile.
Page du bureau de Marseille de Jaberson sur un iPhone tenu d’une main, sur fond beige.
Page Corporate de Jaberson sur un iPhone tenu à 2 mains.
Le bureau de Marseille en main, la page Corporate à deux mains.
2 iPhone sur le beige de Jaberson : les expertises de conseil et la présentation du cabinet.
Les mêmes gabarits sur mobile : le conseil et la présentation du cabinet.

06Développement Webflow

Développement Webflow

Le site quitte WordPress pour Webflow, où il est développé par Le Studio. Tout ce qui change souvent vit dans le CMS, les expertises, les membres, les témoignages, les bureaux. Chaque membre est relié à ses expertises, si bien qu’une arrivée au cabinet se règle en une fiche, sans toucher aux pages. Le formulaire de contact alimente directement HubSpot.

Le zoning a été validé avec l’agence SEO du cabinet avant le premier écran, et les optimisations techniques (balises, temps de chargement, accessibilité) ont été traitées à l’intégration. Le site a aussi changé d’adresse, pour jaberson.fr.

Page Nos expertises : le hero, puis les expertises des avocats en cartes photo.
Gabarit d’une page expertise : la page Corporate, avec son hero et ses compétences.
Le bureau de Marseille en main, la page Corporate à 2 mains.
Page du bureau de Marseille.
Page du bureau de Paris.
Page du bureau de Lille.
Marseille, Paris, Lille : trois bureaux, un seul gabarit.
Page Notre équipe : onglets Avocats, Consultants et Succès, filtres par expertise et par ville, puis les fiches des membres.
La page équipe et ses filtres : chaque fiche vient du CMS, avec ses expertises et son bureau.
Page PME : les sujets des avocats et consultants pour les dirigeants de PME, en douze cartes.
Page Qui sommes-nous du site Jaberson.
Page Recrutement du site Jaberson.
Page Contact du site Jaberson.
Compétences des consultants de Jaberson Conseil, en six cartes.
Section Nos valeurs : respect, professionnalisme, générosité, engagement.
Page Corporate : les profils de clients, puis les distinctions du cabinet.

Résultats

Mis en ligne, puis le cabinet nous a confié la suite

27
expertises, reliées aux membres de l’équipe.
9
profils de clients, chacun avec son entrée.

Jaberson avait choisi d’avancer par versions. Le site a été mis en ligne en 2025, puis le cabinet nous a confié la suite, un blog, des pages membres et des landing pages. Entre-temps, chaque arrivée au cabinet se règle en une fiche, sans passer par nous.

Nos autres projets

Nos expertises : stratégie, UX, CRO, branding, UI, développement web, SEO.