Du simulateur à l’inscription,
sans jamais quitter le site
Pour Edebex, place de marché européenne de la vente de factures, nous avons refondu le site et intégré son simulateur, de WordPress vers Webflow, en 6 langues différentes.
Edebex est une marketplace où les entreprises vendent leurs factures à des investisseurs, afin d’être payées sans attendre l’échéance. Leur solution s’adresse à différents publics et dans plusieurs langues.
Notre rôle
Audit UX
Benchmark
Arborescence
Wireframes
Direction artistique
Design system
Rédaction
Développement Webflow
Simulateur
Migration SEO
Formation
Outils
Figma
Webflow
Enjeux
Les enjeux, nos réponses
01
L’enjeuUne inscription qui envoie le visiteur sur un autre domaine, en plein parcours.
Notre réponseUn simulateur intégré au site et relié à la plateforme d’Edebex, de la première question à la création du compte.
02
L’enjeuDes vendeurs de factures, des investisseurs et des partenaires, sur les mêmes pages.
Notre réponseUne arborescence en Y, avec un parcours et un discours par public.
03
L’enjeuUn site WordPress en plusieurs langues, et 80 articles de blog à ne pas perdre.
Notre réponseUne migration vers Webflow préparée URL par URL, avec ses redirections.
Ce que nous avons fait
01Audit et arborescence
02Identité de marque
03Direction artistique et design system
04Rédaction
05Version mobile
06Développement Webflow
01Stratégie et UX
Audit et arborescence
Nous sommes partis des données. Analytics, Search Console, cartes de chaleur, pour savoir où les visiteurs décrochent avant d’avoir un avis sur le design. Le benchmark a ensuite passé en revue les fintechs du financement d’entreprise. 2 constats. Le site parlait à tout le monde en même temps, et le moment le plus important, l’inscription, se jouait ailleurs.
L’arborescence prend la forme d’un Y. Un tronc commun, puis 2 branches, celle des entreprises qui vendent leurs factures et celle des investisseurs qui les achètent (les partenaires ont leur propre entrée). Les wireframes fixent ensuite le simulateur. Il qualifie d’abord, avec le pays, le numéro d’entreprise et la facture, et ne demande les coordonnées qu’après. Le numéro d’entreprise suffit à retrouver la société. Le visiteur ne saisit pas ce que l’on peut trouver à sa place.
Accueil
Tronc communTronc
Blog
Article× 80
Guides
Guide
FAQ
Cas clients
Cas client
Notre histoire
Carrières
Avis Edebex
Contact
EntreprisesBranche
Vendre mes factures
Simulateur
Produit× 3
Secteur
InvestisseursBranche
Investir dans des factures
PartenairesEntrée à part
Devenir partenaire
Entrée du menu
Page
Gabarit, page template CMS
Le plan du site en Y : un tronc commun, une branche pour les entreprises, une pour les investisseurs, et une entrée à part pour les partenaires.
Avant
Le parcours coupé
Une simulation sur un autre domaine
Une inscription hors du site
Des coordonnées demandées d’entrée
Après
Le parcours continu
Un simulateur dans la page
La société retrouvée par son numéro
Un compte créé sans quitter le site
Le parcours du simulateur, avant et après.
Le fil de fer de l’accueil : la structure, avant le design.
02Branding et direction artistique
Identité de marque
Le site part de la marque Edebex, qui ne change pas. Le nom en minuscules, découpé en blanc dans un bloc cyan, et un x posé à cheval sur le cyan et le vert. Autour du logo, la refonte n’emploie que des aplats.
bloc cyanx
Le logo Edebex en contour, sur sa grille : la hauteur des minuscules, la ligne de base, et les 2 chevrons du x qui se croisent sur l’axe du logo.
Le logo en contour et ses repères : les deux chevrons du x se croisent sur l’axe du bloc.
Le logo sur les fonds du site.
Le logo en une couleur, plein ou en contour, et le logo en couleurs.
Bleu nuit#0B3143Fond sombre
Encre#14213A
Ardoise#5A6B80
Bleu lien#0A6E97
Bleu#29B3E1Action
Ciel#A4E9FF
Filet#D8E4EC
Pastel#E9F7FDFond teinté
Gris clair#F3F8FA
Flex#E6F6C4Flex
Vert#90C84E
Vert foncé#2F6E26
Fix#D2F3FFFix
Bleu#29B3E1
Bleu lien#0A6E97
Balance#F0DBFFBalance
Lilas#C58CF2
Violet#8A4FCB
Les couleurs du site, relevées dans ses variables : les bleus et les gris, puis une couleur par produit, Flex, Fix et Balance.
03Design d’interface
Direction artistique et design system
2 directions visuelles ont été explorées avant d’en retenir une. Edebex a posé une règle, répétée 2 fois pour être sûr. Aucun dégradé, nulle part.
La charte existante est donc travaillée en aplats, avec une couleur par produit pour s’y retrouver d’un coup d’œil. Le design system rassemble typographie, couleurs et composants, pensés pour 6 versions du site et pour des textes qui n’ont jamais la même longueur d’une langue à l’autre.
Titres
AaBbCc
Funnel Display Medium
Funnel Display SemiBold
Financez jusqu’à 100 % de vos factures, sans endettement.
Funnel Display pour les titres, Hanken Grotesk pour le texte.
Typographie
Aa
Funnel Display et Hanken Grotesk
Graisses
Funnel Display Medium500
Funnel Display SemiBold600
Hanken Grotesk Regular400
Hanken Grotesk SemiBold600
DM Mono Medium500
Échelle
Financez jusqu’à 100 % de vos facturesH1 / 58 px / Funnel SemiBold
Un financement adapté à chaque besoin.H2 / 52 px / Funnel SemiBold
CALCULATEURSurtitre / 13 px / DM Mono
Trois solutions pour transformer vos factures non échues en trésorerie.Chapeau / 18 px / Hanken Regular
Bleu nuit#0B3143Fonds sombres, titres
Bleu#29B3E1Boutons
Bleu lien#0A6E97Liens, surtitres
Pastel#E9F7FDFonds teintés
Gris clair#F3F8FAFond alterné
Vert#90C84ERéassurance
Boutons
Tester mon éligibilitéDécouvrir l’investissement
Se connecterTester mon éligibilité
Étiquettes et questions
CalculateurVendeurVendueSans retenue
Mon client est-il informé de la cession de facture ?
Quelles factures sont éligibles ?
Quel est le coût du financement ?
Le design system du site, de la typographie aux composants.
04Design d’interface
Rédaction
Un vendeur de factures cherche de la trésorerie, vite. Un investisseur cherche un rendement et des garanties. Ils ne lisent pas la même phrase de la même façon.
Nous avons écrit une proposition de valeur par public, des appels à l’action qui disent ce qui se passe après le clic, et les textes de réassurance du simulateur. Les traductions sont assurées par les équipes d’Edebex.
2 parcours : vendeurs, investisseurs.
3 profils, 3 parcours, sur grand écran.
Vendre. Investir. Recommander.
Un verbe par public.
Les deux parcours, vendeurs et investisseurs.
Trois profils, trois parcours, sur grand écran.
Le calculateur et ses textes de réassurance.
Les profils, puis les questions fréquentes.
05Design d’interface
Version mobile
Chaque page a sa version mobile. Les cartes produits s’empilent, le calculateur tient dans l’écran et le bouton « Tester mon éligibilité » reste dans l’en-tête, à portée du pouce.
Les mêmes gabarits sur mobile : produits, accueil et calculateur.
Un article du blog contre la pierre, les chiffres clés sur une grille de métal.
L’accueil et le blog, sur le bleu nuit du site.
06Développement Webflow
Développement Webflow
Le site est développé dans Webflow par Le Studio. Les 6 versions (France, Belgique francophone et néerlandophone, Luxembourg, Pays-Bas, Espagne) passent par la localisation native de Webflow. Le simulateur est relié à la plateforme d’Edebex par son API, ce qui permet de s’inscrire et de se connecter sans changer de domaine. Les 80 articles du blog suivent le mouvement. Les équipes d’Edebex sont formées en vidéo pour publier seules.
Avant de toucher au site, nous avons listé chaque URL existante, dans chaque langue, avec sa page d’arrivée et sa redirection. Un détail parmi d’autres, la racine du site servait une version anglaise qui ne figurait dans aucun des marchés retenus (il a fallu décider ce qu’elle devenait). Chaque page reçoit ses recommandations de balises, et la Search Console est suivie pendant les trente jours qui suivent la mise en ligne.
Le blog, puis le gabarit de ses articles.
Flex, Fix, Balance : trois produits, un même gabarit.
Résultats
Un seul domaine, de la première visite au compte créé
11
seul domaine, de la simulation à la création du compte.
66
versions du site, pour 5 pays.
8080
articles de blog migrés de WordPress vers Webflow.
Avant2
Après1
Domaines traversés pour s’inscrire, avant et après la refonte.
Le visiteur simule, crée son compte et se connecte sans changer de domaine. Les 6 versions du site et les 80 articles du blog passent de WordPress à Webflow, URL par URL.
Nos expertises : stratégie, UX, CRO, branding, UI, développement web, SEO.
StratégieUXCROBrandingUIDéveloppement webSEO
StratégieUXCROBrandingUIDéveloppement webSEO
Cookies
Avec votre accord, nous utilisons des cookies de mesure d’audience pour comprendre comment le site est consulté et l’améliorer. Refuser n’empêche pas la navigation. En savoir plus