N2F

Refonte d’un site internet pour une solution Saas, dédiée à la gestion des dépenses professionnelles.

  • Webdesign
Voir le site
Visuel principal du projet N2F

Contexte

En pleine expansion internationale, l'entreprise disposait d'un site internet qui ne reflétait plus ses ambitions : une navigation peu intuitive, des contenus insuffisamment structurés pour le SEO, aucune déclinaison multilingue adaptée aux nouveaux marchés, et une marque employeur totalement absente.

Maquette du projet N2F, visuel 1

Objectifs

L'enjeu principal était de transformer le site en levier d'acquisition. Concrètement, il s'agissait de concevoir un nouveau site plus intuitif et plus informatif, capable de présenter clairement chaque fonctionnalité de la solution, tout en étant optimisé pour le SEO grâce à des sections pensées pour accueillir du contenu de qualité.
Le nouveau site devait également accompagner l'expansion internationale de N2F avec une version multilingue cohérente, et donner enfin une place à la marque employeur pour soutenir les recrutements. Pour cadrer ces besoins, nous avons réalisé des ateliers afin de bien comprendre les enjeux et besoins attendus.

Maquette du projet N2F, visuel 2
Maquette du projet N2F, visuel 3

Méthodes

Le projet a été mené en co-construction avec le client. Pour chaque début de projet, j’ai commencé par animer un atelier UX et arborescence, ce qui a permis de cadrer les besoins et fonctionnalités avant de passer à la conception.

  1. Atelier UX & arborescence : J’ai travaillé sur la structure du nouveau site avec le client afin de prioriser les besoins et de cadrer les fonctionnalités attendues. Nous avons étudié les utilisateurs afin de comprendre leurs besoins, et analysé ce qui ne fonctionnait pas sur l'ancien site. J’ai présenté un benchmark pour analyser la concurrence, puis nous avons travaillé sur une nouvelle arborescence.
  2. Wireframes : J’ai créé les premiers wireframes sur Figma, que j’ai ensuite présentés au client. L’objectif était de se focaliser sur l'essentiel : la partie fonctionnelle du site avec la navigation, les types de contenus, fonctionnalités et création du design system.
  3. Webdesign : Une fois les wireframes validés, j’ai appliqué l'identité visuelle de N2F sur les maquettes, j’ai mis à jour et enrichi le design system, créé des sections sur-mesure et ajouté des animations pour rendre le prototype interactif.
  4. Passation designer × développeur : Après validation des maquettes, j’ai organisé mon fichier pour les développeurs en regroupant les sections et composants, ajouté des notes et exporté tous les assets nécessaires.
Maquette du projet N2F, visuel 4a
Maquette du projet N2F, visuel 4b

Résultats

Un site performant et fluide, conçu autour des utilisateurs. Chaque type de cible dispose désormais de pages dédiées, avec des contenus adaptés, des visuels contextualisés et un maillage interne intelligent qui relie les produits aux besoins exprimés par chaque audience. Le parcours, optimisé pour le SEO, s'appuie sur des pages fonctionnalités, des cas clients et une page tarifs claire, le tout décliné en plusieurs langues.