bon à savoir

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Ajouter

Lorem ipsum

Lorem ipsum

AssessFirst x Gemeos

Découvrez comment Gemeos a conçu et développé le nouveau site Webflow d'AssessFirst : direction artistique, UI design, product design, dev multi-locale et SEO.

A
A
A

La plateforme de recrutement prédictif par les skills, designée par Gemeos

AssessFirst aide les entreprises à recruter grâce à l'IA prédictive et à la science comportementale.

Gemeos a repensé l'ensemble de leur présence web : de la direction artistique au développement Webflow multi-locale, en passant par le design produit et la stratégie SEO.

Industrie

Services

A
A
A

DA (Direction Artistique)

Une identité visuelle qui mélange science et audace

La direction artistique du site AssessFirst repose sur un équilibre entre crédibilité scientifique et énergie visuelle. La palette combine un bleu profond (#0B1B3F) avec des accents magenta/rose vif utilisés sur les CTA et les éléments d'accroche, créant un contraste net qui guide le regard vers l'action.

La typographie joue un rôle central : les titres en caractères gras et arrondis posent un ton accessible, tandis que le corps de texte reste sobre et lisible. Les chiffres clés ("+30% de performance", "5M+ profils analysés") sont mis en valeur par des dégradés multicolores appliqués directement sur le texte — un choix qui renforce leur impact sans surcharger la mise en page.

Les photos de l'équipe dirigeante sont traitées avec un effet distinctif : un encadré aux couleurs arc-en-ciel (rainbow gradient border) qui rappelle la diversité des profils comportementaux analysés par la plateforme. La mascotte Emma, présente sur les pages produit, humanise un sujet technique (l'IA prédictive) en incarnant le candidat-type dans un style illustratif chaleureux.

Concept 1 - Premium et IA

Palette de couleurs : Le design s'inspire des motifs de radiographies et échographies, symbolisant la capacité d'AssessFirst à « lire » à travers les candidats.
Via cette approche, on arrive justement à créer une corrélation entre les couleurs du logo et celles de cet axe graphique.
Utilisation de gradients et teintes bleutées pour renforcer cette idée d’analyse approfondie et précise. Typographie : La police Roobert est utilisée pour apporter une touche moderne et professionnelle tout en ayant des caractère faisant penser au monde de la tech.
Une police monospace accompagne pour ajouter une dimension technique tout en restant chaleureuse. Style de design : Les icônes et cards présentent des formes rondes, un clin d'œil à la rondeur du logo. Des décrochés dans certains blocs rappellent les dossiers, soulignant le lien avec le domaine du recrutement. Les boutons et éléments graphiques dans les titres intègrent les codes du logo (des formes tout en rondeur), créant une cohérence visuelle globale.

Concept 2 - Humain et excellence

Palette de couleurs : Une palette dominée par un fond neutre clair (teintes de beige) rehaussé de dégradés subtils orange-rose-bleu sur les mots-clés des titres. Ces touches colorées attirent l'œil stratégiquement tout en apportant chaleur et dynamisme. Le rose est particulièrement présent dans l'interface utilisateur de la plateforme, créant une identité visuelle cohérente et moderne. Typographie : Un système typographique dual avec une police à empattement élégante pour les titres, apportant humanité et caractère premium. Cette approche est contrebalancée par une typographie sans-serif fonctionnelle pour les textes courants, optimisant la lisibilité tout en préservant la personnalité de la marque. Les variations de graisse et de taille établissent une hiérarchie visuelle claire. Style de design : Une approche qui humanise la technologie en combinant rigueur structurelle et chaleur humaine. Les photographies avec texture grain apportent authenticité et émotion, tandis que la grille rigoureuse évoque l’IA. Les éléments arrondis (icônes "Squircle") adoucissent l'ensemble. Cette dualité crée un équilibre parfait entre la dimension humaine du recrutement et la puissance analytique de l'IA, reflétant parfaitement le positionnement du produit.

Concept 3 - “Brave” et innovation

Palette de couleurs : Une palette plus subtile où les dégradés colorés sont atténués par des tons gris, créant un équilibre entre technologie et dimension humaine. Cette approche moins frontale des couleurs évoque l'IA tout en restant accessible. Les touches de rose et les accents colorés sur les éléments d'interface apportent dynamisme et fraîcheur, tandis que le fond clair et épuré maintient une lisibilité optimale. Typographie : Alliance No.2, une police qui évoque clairement la technologie et l'univers SaaS avec ses lignes nettes et contemporaines. Ce choix typographique affirme le positionnement innovant de la solution tout en restant parfaitement lisible. Style de design : Un design "brave" qui brise les codes du recrutement traditionnel par l'utilisation audacieuse de formes circulaires créant un pattern visuel distinctif. Ces cercles symbolisent les différentes étapes du recrutement ou les multiples facettes des candidats. L'équilibre entre éléments géométriques (représentant la technologie) et contenus humains (notamment la vidéo dans le hero) traduit parfaitement la dualité de l'offre.

Look&Feel

Sommaire

On a confié à Gemeos la refonte complète de notre site + la migration et tout s'est déroulé de manière ultra fluide. Ce qui nous a le plus marqué, c'est la qualité de la direction artistique : une DA vraiment premium, cohérente, avec une identité visuelle claire et des choix ultra maîtrisés (typos, couleurs, iconographie, rythme, hiérarchie…). On sent un vrai goût, et surtout un souci du détail à chaque écran. En plus de ça, l'équipe est hyper réactive et très expérimentée : ils maîtrisent autant le design que la partie technique. Je les recommande les yeux fermés

David BERNARD

CEO & Founder @AssessFirst

A
A
A

Web Design

Des parcours pensés pour convertir, pas juste pour impressionner

L'interface du site AssessFirst est construite pour transformer des visiteurs en utilisateurs. Le mega-menu au hover, structuré en deux à trois colonnes, organise une offre dense (six produits, plusieurs use cases, ressources) sans créer de friction. Chaque entrée est hiérarchisée visuellement avec des icônes et des descriptions courtes.

Les CTA en rose/magenta sont omniprésents et cohérents sur l'ensemble du site : "Réservez une démo", "Essai gratuit". Leur placement suit une logique de récurrence, hero section, fin de bloc argumentaire, footer, pour multiplier les points d'entrée dans le tunnel de conversion.

Le widget iClosed, persistant en bas de page, affiche la photo de David Bernard (CEO) avec un accès direct à la prise de rendez-vous. Ce choix de social proof implicite, un CEO disponible pour une démo raccourcit la distance perçue entre le visiteur et la décision.

Les blocs de témoignages clients (logos + citations) sont intégrés en contexte, au sein des pages use cases plutôt que sur une page dédiée, renforçant la preuve sociale là où elle a le plus d'impact. Les sections de statistiques utilisent des labels avec préfixe bullet et des chiffres en dégradé de couleurs pour créer une hiérarchie visuelle lisible et mémorable.

Sommaire

On a confié à Gemeos la refonte complète de notre site + la migration et tout s'est déroulé de manière ultra fluide. Ce qui nous a le plus marqué, c'est la qualité de la direction artistique : une DA vraiment premium, cohérente, avec une identité visuelle claire et des choix ultra maîtrisés (typos, couleurs, iconographie, rythme, hiérarchie…). On sent un vrai goût, et surtout un souci du détail à chaque écran. En plus de ça, l'équipe est hyper réactive et très expérimentée : ils maîtrisent autant le design que la partie technique. Je les recommande les yeux fermés

David BERNARD

CEO & Founder @AssessFirst

A
A
A

Product Design

Traduire un produit IA complexe en expérience lisible

AssessFirst propose une suite de six produits (SWIPE, DRIVE, BRAIN, VOICE, COPILOT, SCAN) qui couvrent l'ensemble du cycle de gestion des talents. Le défi product design : rendre chacun compréhensible individuellement tout en montrant leur complémentarité.

Chaque page produit suit une structure récurrente : une section hero avec le nom du module et sa promesse, des blocs fonctionnalités illustrés par des captures d'interface réelles, et un ancrage systématique vers les use cases associés. La mascotte Emma est utilisée comme fil conducteur — on la retrouve dans les démonstrations de matching, de scoring et d'évaluation, ce qui crée une continuité narrative entre les modules.

Le système de scoring par compatibilité (lettres A à E avec code couleur) est présenté de manière visuelle et intuitive : les visiteurs comprennent en un coup d'œil le fonctionnement du matching prédictif. Les radars de personnalité, représentant les soft skills sur plusieurs axes, traduisent des données comportementales complexes en graphiques accessibles.

Les pages use cases (recrutement, mobilité interne, engagement, scale) intègrent des métriques concrètes issues des données clients : +30% de performance, -50% de turnover, ×3 de diversité, 80 jours gagnés par recruteur et par an. Ces chiffres sont positionnés comme des preuves tangibles plutôt que des promesses marketing. La fonctionnalité de talent rediscovery (retrouver des profils déjà évalués pour de nouveaux postes) est mise en avant comme un différenciateur produit, avec un parcours dédié.

No items found.

Sommaire

On a confié à Gemeos la refonte complète de notre site + la migration et tout s'est déroulé de manière ultra fluide. Ce qui nous a le plus marqué, c'est la qualité de la direction artistique : une DA vraiment premium, cohérente, avec une identité visuelle claire et des choix ultra maîtrisés (typos, couleurs, iconographie, rythme, hiérarchie…). On sent un vrai goût, et surtout un souci du détail à chaque écran. En plus de ça, l'équipe est hyper réactive et très expérimentée : ils maîtrisent autant le design que la partie technique. Je les recommande les yeux fermés

David BERNARD

CEO & Founder @AssessFirst

A
A
A

Dev Webflow

Un site multi-locale construit pour performer à grande échelle

Le développement du site AssessFirst sur Webflow représente un chantier technique de premier ordre.

Le site couvre cinq locales (FR, EN, DE, AR, RU) dans la limite du plan Webflow standard, avec une architecture URL propre par langue et des redirections mises en place pour les locales non nativement supportées (arabe, russe) afin de préserver l'expérience utilisateur et le SEO.

L'intégration technique implique plusieurs couches externes. Cloudflare, utilisé comme proxy/CDN, a nécessité un travail de configuration spécifique pour résoudre des erreurs 500 apparues en phase de développement. Un cas classique de conflit entre cache proxy et environnement de staging Webflow.

La gestion du consentement cookies passe par Axeptio, intégré nativement au site pour respecter le RGPD sur chaque locale.

Côté composants, le mega-menu en hover à deux ou trois colonnes constitue un des éléments techniques les plus travaillés : il structure une navigation dense (solutions, produits, ressources) tout en restant fluide. Le widget iClosed, persistant sur l'ensemble des pages, permet de déclencher une prise de rendez-vous avec David Bernard (CEO) sans quitter le contexte de navigation.

Le blog intègre un système de résumé automatique d'articles via une API LLM (Gemini, après des tests initiaux sur Mistral). L'import des articles multi-langues a été structuré pour mapper automatiquement les contenus EN et DE entre eux, garantissant la cohérence éditoriale à travers les locales.

L'ensemble du workflow de développement s'est appuyé sur Flowmapp pour la cartographie du sitemap, et Markup.io pour les cycles de QA entre l'équipe dev et design, permettant des retours contextuels directement sur les pages en cours de développement.

Sommaire

On a confié à Gemeos la refonte complète de notre site + la migration et tout s'est déroulé de manière ultra fluide. Ce qui nous a le plus marqué, c'est la qualité de la direction artistique : une DA vraiment premium, cohérente, avec une identité visuelle claire et des choix ultra maîtrisés (typos, couleurs, iconographie, rythme, hiérarchie…). On sent un vrai goût, et surtout un souci du détail à chaque écran. En plus de ça, l'équipe est hyper réactive et très expérimentée : ils maîtrisent autant le design que la partie technique. Je les recommande les yeux fermés

David BERNARD

CEO & Founder @AssessFirst

A
A
A

SEO/GEO

Une stratégie SEO technique posée dès la première ligne de code

Le SEO du site AssessFirst ne se limite pas à du contenu optimisé, il est intégré à l'architecture même du site.

Chaque page clé embarque des données structurées au format JSON-LD (schema.org) : AboutPage pour la page équipe avec le balisage des membres de la direction (CEO, Chief Scientist, COO), Organization pour le positionnement corporate, et des schemas adaptés aux pages produits et use cases.

Le maillage interne a été pensé pour fluidifier le crawl et distribuer l'autorité entre les pages stratégiques : les pages produits (SWIPE, DRIVE, BRAIN, VOICE, COPILOT, SCAN) sont interconnectées avec les use cases correspondants (recrutement, mobilité interne, engagement), créant un réseau sémantique cohérent. L'audit de crawl via Screaming Frog a permis de valider la structure et d'identifier les points d'amélioration.

L'architecture URL est propre et localisée : chaque locale dispose de son préfixe (/fr/, /en/, /de/) avec des slugs traduits et cohérents. Les redirections 301 couvrent les anciennes URL et les locales non disponibles nativement dans Webflow (arabe, russe), évitant toute perte de trafic lors de la migration.

Le blog, véritable pilier de la stratégie de contenu, bénéficie du mapping multi-langue EN↔DE pour les balises hreflang, garantissant que Google indexe la bonne version linguistique pour chaque marché.

Le résumé automatique des articles par IA (Gemini) améliore la densité de contenu utile dès les premières lignes, ce qui favorise les featured snippets et le taux de clic organique.

Élément SEOImplémentation
Données structuréesJSON-LD / schema.org (AboutPage, Organization, Person)
Architecture URLLocalisée avec préfixes langue + slugs traduits
Redirections301 sur anciennes URL + locales non supportées
Maillage interneRéseau produits ↔ use cases ↔ blog
HreflangMapping multi-langue EN↔DE automatisé
Audit crawlScreaming Frog — validation structure + erreurs
Contenu IARésumé automatique via API Gemini

Sommaire

On a confié à Gemeos la refonte complète de notre site + la migration et tout s'est déroulé de manière ultra fluide. Ce qui nous a le plus marqué, c'est la qualité de la direction artistique : une DA vraiment premium, cohérente, avec une identité visuelle claire et des choix ultra maîtrisés (typos, couleurs, iconographie, rythme, hiérarchie…). On sent un vrai goût, et surtout un souci du détail à chaque écran. En plus de ça, l'équipe est hyper réactive et très expérimentée : ils maîtrisent autant le design que la partie technique. Je les recommande les yeux fermés

David BERNARD

CEO & Founder @AssessFirst

NOS dernières réalisations

+240 entreprises
accompagnées

Des sites designés et développés avec 

Let’s f*****G GO !!

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

Alexandre

Max

Enora

Bryan

Cannelle

Tiphaine

Vous allez :heart: notre collaboration...