UI et branding : refonte du site web pour Hublead
Hublead, une solution B2B de prospection automatisée basée à Saint-Prex, nous a sollicités pour résoudre un point de friction majeur : la complexité perçue de son offre. Les visiteurs comprenaient mal les services proposés, ce qui réduisait considérablement le taux de conversion. Notre objectif était clair : repenser l’ensemble de leur présence digitale pour accroître la lisibilité des fonctionnalités, optimiser l’ergonomie de navigation, et renforcer l’impact visuel dans une logique de génération de leads qualifiés.
Upgrade du branding pour une stratégie visuelle poussée
Une des premières décisions fut de reprendre l'identité graphique de la marque pour la rendre plus stratégique, tout en respectant son ADN tech. Cette refonte s’est articulée autour de quatre piliers : la clarté, la différenciation, la cohérence et l’émotion.
Refonte du système graphique
Nous avons reconstruit le système visuel de Hublead sur la base d’un grid plus structuré, de formes plus dynamiques, et d’une meilleure hiérarchie typographique. L’objectif était de faire respirer les contenus tout en orientant naturellement le regard de l’utilisateur vers les éléments à fort impact (call-to-actions, démonstrations, bénéfices).
Illustrations distinctives
Plutôt que d’utiliser des pictos ou assets génériques, nous avons conçu une série d’illustrations propriétaires au style technique mais expressif, jouant avec la mécanique, la lumière et les flux de données. Ces visuels traduisent l’intelligence du système Hublead, tout en humanisant la technologie par des formes reconnaissables.
UI centrée sur l’utilisateur
L’interface utilisateur a été revue avec une approche mobile-first, pour garantir une expérience optimale sur tous les supports. Des micro-interactions ont été ajoutées pour renforcer l’engagement et donner du feedback visuel au scroll et aux clics. L’architecture de l’information a été repensée autour d’une question centrale : « Que cherche à comprendre l’utilisateur à ce moment précis du parcours ? »
Narration fluide et animation
Une narration visuelle a été intégrée tout au long de la page, soutenue par des animations discrètes et des effets de transition légers. Cela permet d’attirer l’attention, de rythmer la lecture et d’évoquer le mouvement élément clé de la promesse produit : la prospection qui avance toute seule.
Une machine 3D comme métaphore
Pour représenter le système de génération de leads, nous avons conçu une machine 3D stylisée. Cette visualisation permet de rendre tangible un processus abstrait. Elle agit comme un repère visuel fort et devient un objet de narration à part entière. Le spectateur comprend intuitivement que la plateforme traite des données, les transforme, puis en extrait des leads exploitables. L’effet “wow” déclenche l’intérêt, tout en ancrant l’outil dans l’univers de l’automatisation.
Design stratégique et impact visuel
Le branding, chez Ferr Studio, n’est jamais un simple habillage graphique. C’est un outil stratégique destiné à servir la performance. Pour Hublead, nous avons mené une réflexion en profondeur sur l’adéquation entre les messages clés, le ton employé, les visuels utilisés, et les objectifs business à court et long terme.
Branding & charte graphique
Nous avons repris l’identité existante pour en extraire une version plus lisible, plus dense et plus impactante. Le choix d’une palette en bleu et blanc reflète les codes de la fiabilité B2B, tandis que l’ajout de couleurs secondaires vives permet d’introduire des touches de dynamisme au bon moment. La typographie, sélectionnée pour sa lisibilité et sa géométrie moderne, est déclinée sur tous les supports.
La charte graphique intègre également un système d’icônes sur-mesure, permettant de guider l’utilisateur sans surcharge visuelle, et de renforcer la cohérence entre les écrans du site, les présentations commerciales et les documents marketing.
Illustrations & visuels 3D
Au cœur du dispositif visuel se trouve une série de rendus 3D qui illustrent l’intelligence du système Hublead. Cette dimension immersive a été pensée pour traduire la complexité du produit de manière accessible. Elle crée aussi une barrière à l’entrée graphique face à la concurrence, et valorise le côté « produit fini » de l’outil.
Chaque illustration a été scénarisée : on y voit des modules interagir, des flux circuler, des segments s’assembler. Cela renforce l’idée d’un écosystème technologique cohérent.
Refonte UX / UI
L’arborescence du site a été simplifiée. Au lieu de segmenter par fonctionnalités techniques, nous avons organisé les contenus autour de trois promesses clés : automatisation, gain de temps, conversion.
Chaque section commence par une problématique que le visiteur peut rencontrer (manque de leads, trop de temps passé à prospecter, faible ROI), puis enchaîne avec une réponse claire de la plateforme. Les appels à l’action sont récurrents, sans être intrusifs.
Nous avons également intégré des micro-animations au survol et à l’apparition, pour fluidifier le parcours et ancrer visuellement le lien entre contenu et interaction.
Plus de clarté, plus de leads
L'impact de cette refonte s’est fait sentir dès les premières semaines suivant la mise en ligne.
Rétention améliorée
Les visiteurs passent plus de temps sur la page d’accueil et les pages de démo. Le storytelling visuel allonge la durée moyenne de session et incite à l’exploration. Le taux de scroll moyen dépasse 75 %, avec une rétention particulièrement forte autour de la section présentant la machine 3D.
Taux de rebond en baisse
Avant la refonte, le taux de rebond avoisinait les 62 %. Il est désormais stabilisé autour de 39 %, ce qui montre une meilleure adéquation entre la promesse d’arrivée (Google Ads, liens LinkedIn…) et le contenu perçu dès le premier écran.
Augmentation des prises de contact
Le tunnel de conversion a été optimisé, avec un formulaire accessible dès la moitié de page et un sticky CTA sur mobile. Ces leads sont mieux qualifiés car les visiteurs comprennent mieux la proposition de valeur.
Le branding comme catalyseur de performance
Ce projet illustre parfaitement notre conviction chez Ferr Studio : un branding n’est pas un luxe, c’est un levier.
Dans un monde saturé de signaux visuels, la clarté est un avantage concurrentiel. Une startup qui investit dans son design est une startup qui croit en sa vision. Et surtout, qui donne envie d’y croire.
Hublead disposait d’une technologie solide. Mais c’est par le design, la narration et l’expérience utilisateur que nous avons pu la rendre désirable, crédible et compréhensible. Aujourd’hui, la plateforme attire plus de leads, suscite l’intérêt des investisseurs et peut se présenter sans effort comme une solution mature.
Projets recommandés
Découvrez nos réalisations pour des images de marque, des visuels publicitaires, des mascottes, des animations, les supports de communication et les réseaux sociaux, des designs UI, et du design d'UX.