Une même marque pour l'accélération, l'investissement et la communauté

Fondé en 2016 par la Caisse d'Épargne Rhône-Alpes, HUB612 accompagne les startups technologiques B2B par son programme d'accélération, ses investissements et son réseau d'entrepreneurs. Le site devait rendre lisibles ces trois dimensions pour des fondateurs aux besoins différents. Le projet devait moderniser l'expression de la marque tout en préservant un logotype déjà reconnu par l'écosystème régional.

Gemeos a travaillé une identité visuelle autour du logo existant et conçu des parcours distincts pour découvrir le programme Start to Scale, l'investissement et les ressources du réseau. Les maquettes UX/UI ont servi de base au développement Webflow et à la structuration du CMS. L'accompagnement SEO a porté sur la migration, le balisage, les données structurées et la visibilité des contenus destinés aux startups.

Industrie: Service
Services: Branding; DA; UX/UI Design; Intégration; SEO

share

Une identité qui grandit sans perdre ses racines

Le HUB612 avait un actif précieux : un logo reconnu, chargé d'histoire, qu'il n'était pas question de toucher. Le défi était ailleurs, construire autour de lui un système de marque cohérent, capable de porter à la fois la dimension accélérateur, la dimension fonds d'investissement, et la chaleur d'une communauté humaine.

Gemeos a travaillé à partir du brand briefing pour extraire ce qui fait vraiment le HUB612 : l'audace, l'exigence, le collectif. Trois pistes créatives ont été proposées, explorant différentes directions typographiques et chromatiques tout en restant dans la continuité du rouge historique. La piste retenue installe un équilibre entre sérieux institutionnel et accessibilité, exactement le ton demandé. Le livrable final inclut un brandbook complet (couleurs, typographies, usages du logo, templates réseaux sociaux et slides) livré en PDF et Figma au client.

share

Direction artistique

Trois pistes, une direction, zéro compromis

Avant de designer la moindre page, Gemeos a posé une direction artistique claire. Trois univers visuels distincts ont été proposés à la cliente, chacun avec sa palette, sa typographie, son ambiance. L'objectif : lui permettre de choisir en connaissance de cause, pas de valider à l'aveugle.

La piste choisie mise sur une esthétique tech et épurée, avec une hiérarchie typographique forte et une utilisation maîtrisée du rouge signature. Le look & feel a ensuite été affiné sur plusieurs cycles d'itérations (appels + commentaires Figma) avant d'entrer en phase de design des pages. Cette étape de validation DA amont est ce qui garantit que le design final ne surprend pas, et ne génère pas de retours en arrière coûteux.

L’élégance structurée
Le design repose sur un contraste typographique entre une serif classique modernisée pour les titres et une sans-serif épurée pour le corps de texte, créant rythme et hiérarchie. La palette s'ancre dans la charte HUB612 enrichie de bordeaux profond, bleus poudrés et lavandes désaturés, jouant sur le ton sur ton pour créer de la profondeur sans ostentation. L'architecture visuelle reprend directement la grille du logo HUB612, carrés et rectangles géométriques structurent la mise en page comme un langage visuel cohérent. De larges espaces blancs et une photographie cadrée avec parcimonie complètent l'ensemble. L'ambiance dégagée : une crédibilité institutionnelle modernisée, sérieuse et contemporaine, pensée pour inspirer confiance aux investisseurs et partenaires stratégiques.
L’anthenticité humaine
La typographie adopte une sans-serif moderne avec des twists graphiques subtils (jambages) qui créent des hiérarchies dynamiques à connotation tech. La palette reprend les couleurs HUB612 tout en les adoucissant avec des verts et bleus plus vivants, le rouge signature reste comme point d'énergie, mais dans un écosystème chromatique plus doux et humain. La grille du logo structure l'ensemble, complétée par des patterns graphiques en frises qui font office de liaisons visuelles entre les blocs de contenu. Sur les boutons d'action, de petits additifs reprenant le graphisme du logo créent une signature identitaire subtile à chaque point d'interaction. La photographie occupe 60 à 70 % de l'espace : des images authentiques de personnes, d'équipes, d'espaces lumineux, avec un traitement naturel et chaleureux qui place l'humain au centre. L'ambiance générale privilégie l'émotion et la proximité, elle s'adresse aux fondateurs qui cherchent une communauté authentique, et respire la transparence, l'énergie positive et la culture collaborative.
L’impact Bold
Cette direction assume une rupture franche avec les codes graphiques existants jugés froids et rigides, pour insuffler chaleur et humanité à chaque niveau du design. La rondeur devient le fil conducteur : coins généreux, découpes organiques, courbes douces, une logique que l'on retrouve aussi dans la typographie, avec des polices aux terminaisons arrondies évoquant la convivialité plutôt que le corporate. La palette bascule vers l'orange et les tons chauds, rouge-orangé, kaki, brun, pour générer une énergie positive et optimiste, loin des bleus institutionnels. Les éléments graphiques sont délibérément rapprochés, presque imbriqués, métaphore directe du modèle HUB612 : rien n'est isolé, tout se touche et s'entremêle pour évoquer la collaboration et la cohésion. La typographie en graisses variables renforce l'impact tout en restant accessible. L'ambiance générale est celle d'un partenaire, pas d'une institution, un design qui dit "nous sommes avec vous" et incarne visuellement les valeurs d'accompagnement et de proximité du HUB612.

Page d’accueil HUB612 : titre serif « Nous accompagnons les startups tech B2B », grille de blocs colorés et chiffres clés

Concept 1

share

Webdesign

Un UI Kit pensé pour durer, des pages pensées pour convertir

Sur la base de la DA validée, Gemeos a conçu un UI Kit complet : système de couleurs, typographies, composants réutilisables (boutons, cards, formulaires, navigation, footer). Un socle solide qui permet à l'équipe HUB612 de faire évoluer leur site de manière autonome et cohérente dans le temps.

Le design couvre l'ensemble des pages du site : homepage, pages Accélération et Investissement, blog, pages ressources et études de cas, page auteurs. Chaque page a été pensée pour guider les entrepreneurs vers l'action, sans surcharger. Les maquettes ont été validées après plusieurs cycles d'ajustements sur Figma.

share

Intégration Webflow

De la maquette au site live en Webflow, avec formation à la clé

L'intégration a été menée directement dans Webflow, sur un environnement de staging avant mise en ligne. Chaque composant issu du UI Kit a été intégré en respectant les conventions du design system, avec une attention particulière à la cohérence responsive et aux interactions.

Le projet a mobilisé des solutions techniques sur-mesure, notamment sur la gestion des FAQ (déclenchement des interactions, résolution d'un bug de click sans feedback visuel), la pagination du blog, et la structure des pages dynamiques (études de cas, auteurs). À la mise en ligne, une session de formation Webflow a été organisée avec la cliente pour lui donner la main sur le CMS et les contenus éditoriaux.

share

SEO

Une migration propre, une base technique solide pour les moteurs, et les LLM

La refonte a été l'occasion de remettre à plat toute la couche SEO technique. Un crawl complet du site a été réalisé avec Screaming Frog pour identifier les points de friction avant mise en ligne. Les corrections ont couvert : la structure des balises Hn, l'ajout du fil d'Ariane, l'intégration de la meta robots index, et la mise en place d'une pagination correcte sur le blog.

L'effort le plus significatif a porté sur les données structurées Schema.org, implémentées page par page pour maximiser la lisibilité par les moteurs de recherche et les modèles de langage (GEO) :

Page	Schema implémenté	Objectif
/acceleration	Service	Qualifier l'offre d'accélération pour les moteurs
/investissement	FinancialService	Positionner HUB612 Participations sur les requêtes VC
/blog/*	Article	Éligibilité aux rich snippets articles
/portfolio	CollectionPage + ItemList	Structure sémantique du portfolio startups
/etude-de-cas/*	Article	Indexation des études de cas en contenu éditorial

Ces balisages Schema.org enrichissent directement les réponses des LLM (ChatGPT, Perplexity, Gemini) lorsqu'un utilisateur interroge ces outils sur l'écosystème startups Rhône-Alpes ou les fonds d'investissement early stage en France.

HUB612 : refonte digitale d'un accélérateur de startups

Une même marque pour l'accélération, l'investissement et la communauté

Une identité qui grandit sans perdre ses racines

Direction artistique

L’élégance structurée

L’anthenticité humaine

L’impact Bold

Webdesign

Intégration Webflow

SEO

+250 entreprises
accompagnées

Prêt à faire décoller
votre activité ?

Une même marque pour l'accélération, l'investissement et la communauté

Une identité qui grandit sans perdre ses racines

Direction artistique

L’élégance structurée

L’anthenticité humaine

L’impact Bold

Webdesign

Intégration Webflow

SEO

+250 entreprises accompagnées

Prêt à faire décoller votre activité ?

+250 entreprises
accompagnées

Prêt à faire décoller
votre activité ?