Concevoir un logiciel de gestion de chantier, de zéro à 2 000 clients

Toolkit organise les chantiers du BTP : tâches, zones, documents et équipes. J’ai été son premier designer produit, du prototype présenté aux investisseurs jusqu’à un outil utilisé par plus de 2 000 clients payants.

Rôle: Premier designer produit
Équipe: CEO, développeur principal, designer
Durée: 12 mois
Périmètre: Web et mobile, design system

Voir la galerie Visiter Toolkit

« Victor a travaillé avec Toolkit en tant que designer UX/UI dès les premières étapes. Nous avons mené ensemble des ateliers de découverte avant même de construire le produit, ce qui lui a permis de comprendre en profondeur l'industrie du bâtiment. Il a transformé des exigences métier complexes en parcours utilisateurs parfaitement adaptés, exactement ce dont une startup comme la nôtre avait besoin. Grâce à son expérience, Victor a aussi mis en place des systèmes fondamentaux (UI kit, modèles d'interaction) qui nous ont fait gagner un temps de développement considérable par la suite. »

Pierre-Marie NigayFondateur @ Toolkit

Synthèse

Contexte: Toolkit aide les entreprises du BTP à organiser leurs chantiers : création, tâches, documents, zones de travail, suivi d’activité et coordination des équipes. Le fondateur avait besoin d’une première version crédible pour structurer le produit et convaincre ses investisseurs.
Mon rôle: J’ai rejoint Toolkit comme seul designer d’une équipe de trois, avec le CEO, qui apportait la connaissance du métier, et le développeur principal. Pendant 12 mois, sans équipe design, sans chercheurs ni product managers, j’ai conçu le prototype de levée, puis les fondations du produit, ses parcours principaux, le planning, les vues mobiles, l’administration et le design system.
Réalisations et livrables: Prototype de levée
Architecture de l’application, parcours, écrans haute fidélité et pitch deck pour la première levée de fonds.
Produit cœur
Création et paramétrage de chantier, tâches, documents, zones, suivi d’activité, collaboration d’équipe, et vues d’administration des utilisateurs et des abonnements.
Planning interactif
Zoom fluide, menus dynamiques, sélection par glissement et opérations par lot sur un canevas qui tient 50 à 100+ tâches.
Vues mobiles
Vues responsives conçues pour qu’une déclinaison native iOS et Android réutilise la même logique d’interaction.
Design system
UI kit Tailwind, tokens, organisation Figma et visuels de communication, sur plus de 120 écrans.

2 000+
Clients payants en 24 mois après le lancement: Série A
Financement obtenu: 15+
Chantiers par client entreprise dès le lancement

Garder le produit lisible à grande échelle

L’enjeu

Les logiciels de chantier empilent souvent toutes les fonctionnalités dans des écrans denses. Sur un vrai chantier, le planning compte 50 à 100 tâches ou plus, réparties sur plusieurs zones et plusieurs périodes, et les mêmes écrans servent les planificateurs au bureau comme les équipes terrain qui consultent l’avancement. Si le planning devient illisible à ce volume, le produit n’a plus de raison d’être.

Planning en pleine largeur · La mise en page s’étend pour se concentrer sur les tâches, puis se replie pour rouvrir la navigation.

Les objectifs

Le travail de conception visait trois résultats. Livrer un prototype assez crédible pour convaincre les investisseurs. Garder l’interface simple pour les conducteurs de travaux, les équipes terrain et les planificateurs, quel que soit le nombre de tâches. Poser des fondations réutilisables, parce qu’une équipe de trois ne peut pas redessiner des composants pour chaque fonctionnalité.

Trois temps, du financement à la maturité

Chaque étape a été vérifiée auprès d’utilisateurs. Le CEO menait cinq à sept appels par semaine et Microsoft Clarity montrait comment le produit était utilisé. Chaque version répondait à ce que la précédente avait révélé.

Mois 1 à 3 : un prototype assez solide pour lever des fonds

Le prototype de levée couvrait l’authentification sans mot de passe, une navigation à double barre latérale, la création de projet et un premier planning. Un lien magique remplace les mots de passe sur des appareils que les ouvriers se partagent. La barre latérale secondaire se replie une fois le projet actif : les sections de configuration passent d’abord, puis le planning et les documents deviennent la navigation principale.

Le premier planning utilisait des cartes de tâches colorées. Elles se lisaient bien avec 10 à 15 tâches et devenaient écrasantes à 50 ou 100, ce qui a fixé le programme de l’étape suivante. Le prototype a sécurisé le financement initial.

Planning, version 1 · Cartes de tâches colorées : lisibles avec 10 à 15 tâches, écrasantes à 50 ou 100.

Navigation qui se replie · La barre latérale secondaire se réduit et se déploie à la demande.

Mois 4 à 8 : tenir plus de 50 tâches à l’écran

Pour garder plus de 50 tâches lisibles, la carte de tâche a été abaissée, désaturée et mieux contrastée, avec quatre états d’interaction. Le planning a gagné la sélection par glissement, un zoom fluide du jour au trimestre et un menu dynamique qui s’adapte à la tâche choisie.

Appliquer des paramètres à une zone ou à plusieurs tâches prend désormais 20 secondes, ce qui compte quand une équipe gère 50 à 100 tâches.

Planning, version 2 · Plusieurs zones et plus de 50 tâches visibles à la fois, sans surcharger l’écran.

Édition par lot · Sélectionner une zone ou plusieurs tâches et appliquer des paramètres en 20 secondes.

Mois 9 à 12 : plusieurs chantiers et la version mobile

Les clients entreprise devaient gérer plusieurs chantiers depuis un seul tableau de bord, et les équipes terrain voulaient sur mobile les mêmes capacités que sur ordinateur. Le hub projet montre l’avancement et les blocages de tous les chantiers.

Sur mobile, la navigation est regroupée en quatre groupes, avec des zones d’action à portée de pouce. Les vues ont été conçues pour qu’une déclinaison native iOS et Android réutilise la même logique d’interaction.

Hub projet · Tableau de bord multi-chantiers avec indicateurs d’avancement, actions rapides et filtres.

Navigation mobile, versions 1 et 2 · Menu pensé pour le tactile, avec des zones d’action à portée de pouce.

Un design system pour une équipe de trois

Une équipe de trois ne peut pas redessiner des composants pour chaque fonctionnalité. J’ai mis en place un UI kit Tailwind, des tokens et une organisation Figma qui donnent au produit des composants réutilisables, des modèles cohérents et un langage visuel commun. Le système tient sur plus de 120 écrans, et le fondateur lui attribue un gain de temps de développement considérable.

Design system · Composants, tokens, modèles et règles d’usage.

Ce que le projet a donné

Des clients entreprise qui gèrent plus de 15 chantiers ont utilisé le produit dès le lancement, et les petites équipes l’ont adopté aussi vite. Toolkit a dépassé 2 000 clients payants en 24 mois après le lancement et levé une Série A. L’année s’est conclue sur une nouvelle version mobile, la gestion multi-chantiers et un planning aux interactions plus abouties.

Modifier les tâches dans le planning · Changer une durée ou les détails d’une tâche directement sur le canevas.

Ce qui reste ouvert

Après mon intervention, l’équipe Toolkit a poursuivi sur la vue d’administration, un tableau de bord d’activité et des fonctions d’IA : prévision, relances et anticipation des tâches.

Voir tous les visuels

Victor Soussan

Lead Product Designer

Envie de collaborer sur un projet similaire ? Discutons.

Contact LinkedIn

Concevoir un logiciel de gestion de chantier, de zéro à 2 000 clients

Synthèse