Interflex

Création d’un site e-commerce dans l’industrie de flexibles hydrauliques.

  • Webdesign
Visuel principal du projet Interflex

Contexte

Avec plus de 40 ans d'expertise dans la distribution et la réparation de flexibles hydrauliques, Interflex est une référence sur son marché. Suite à un changement de fournisseur, l'entreprise a entamé une transformation stratégique qui nécessitait une nouvelle identité visuelle et un site marchand à la hauteur de ses ambitions.

Maquette du projet Interflex, visuel 1

Objectifs

L'enjeu principal était de concevoir un site e-commerce sur-mesure permettant aux clients d'identifier rapidement le produit adapté à leurs besoins techniques. L’UX devait rester claire et simple, malgré la richesse du catalogue. Pour cadrer le projet, nous avons mené plusieurs ateliers et réunions, avec le client comme en interne, afin d'organiser les nombreuses familles et catégories de produits. Cette complexité nous a amenés à faire du e-commerce sur-mesure pour le projet avec des tableaux de références, des croisements de données entre produits, etc.

Maquette du projet Interflex, visuel 2

Méthodes

  1. Ateliers arborescence & user flow : Nous avons mené une grosse session d’atelier avec le client sur l’organisation du catalogue en familles, sous-familles et références, ainsi que sur le parcours d’achat des utilisateurs. Des réunions régulières avec l’équipe technique et les clients ont permis de valider en parallèle la faisabilité des imports de produits et des croisements de données.
  2. Wireframes : J’ai créé les premiers wireframes sur Figma pour poser la structure du site : navigation par familles, pages de sous-familles, fiches produits, panier et espace client. L’objectif était de valider la logique de navigation avant d’entrer dans le design.
  3. Webdesign : Une fois les wireframes validés, j’ai appliqué la nouvelle identité d’Interflex sur les maquettes et construit le design system. J’ai conçu des composants sur-mesure, comme les tableaux de références (codes, diamètres, filetages, prix client, quantités) avec articles équivalents et complémentaires, un panier latéral et un espace client pour suivre ses commandes, le tout décliné en version mobile.
  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 sur les différents états (connecté, ajout au panier…) et exporté l’ensemble des assets nécessaires.
Maquette du projet Interflex, visuel 3

Résultats

Les utilisateurs passent facilement d'une catégorie à l'autre et accèdent, pour chaque référence, aux informations techniques essentielles avant l'ajout au panier. Le parcours d'achat est fluide jusqu'à la commande, et la gestion des imports de produits et de commandes permet aux équipes de faire circuler l'information rapidement et de manière fiable.

Maquette du projet Interflex, visuel 4a
Maquette du projet Interflex, visuel 4b