Toolkit

Toolkit
Design Produit, web, app, branding-De zéro à un-2023-2025

Concevoir un logiciel de gestion de chantier qui fonctionne vraiment

Du Prototype à 2 000 Clients

Toolkit avait besoin de design produit pour lever des fonds et atteindre le product-market fit dans la construction tech. Pendant 12 mois, j'ai mené le design de bout en bout dans une équipe légère CEO-Dev-Designer avec validation continue auprès des utilisateurs. Nous avons livré trois versions majeures : prototype de financement (3 mois), V2 riche en fonctionnalités (5 mois) et V3 optimisée mobile (4 mois). Le produit a atteint 2 000 clients payants en 24 mois, sécurisé l'adoption entreprise dès le lancement et levé une Série A en novembre 2025.

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, patterns d'interaction) qui nous ont fait gagner un temps de développement considérable par la suite.

Pierre-Marie Nigay

Pierre-Marie Nigay

Fondateur @ Toolkit

Type

Product Design

Scope

Web, App, Branding

Period

2023-2025

Phase

Zero to One

Toolkit App Overview

Vue d'ensemble


Introduction

Les logiciels de construction sont écrasants. Les outils historiques empilent toutes les fonctionnalités dans des interfaces denses, forçant les utilisateurs à traverser des workflows complexes pour accomplir des tâches basiques. Les conducteurs de travaux jonglent entre plusieurs projets, les ouvriers sur site ont besoin de mises à jour rapides, et les équipes bureau demandent une planification détaillée. Une seule interface ne peut pas servir tous ces besoins de manière égale.

Toolkit a abordé le problème différemment. Plutôt que de construire une énième solution complète, nous nous sommes concentrés sur les workflows essentiels que les équipes de construction utilisent quotidiennement : planifier les tâches par zones, suivre l'avancement, gérer les documents, coordonner les équipes. Le défi était d'offrir de la sophistication sans complexité.

Mon rôle

J'ai rejoint l'équipe comme seul designer dans un trio. Le CEO apportait l'expertise métier acquise en années de recherche sur les workflows du bâtiment. Le lead développeur construisait les fondations techniques. Mon rôle : transformer les exigences business en un produit scalable que les utilisateurs adopteraient vraiment. Pas d'équipe design, pas de researchers, pas de product managers. Juste une collaboration serrée, une validation continue et des itérations rapides.

Projet et impact

Sur 12 mois, nous sommes passés du prototype de financement à la maturité plateforme. Chaque phase ajoutait de la sophistication tout en maintenant la simplicité. La révélation progressive cachait la complexité jusqu'au moment opportun. Les interfaces context-aware s'adaptaient aux tâches utilisateur. Les opérations par lot réduisaient les actions répétitives. La hiérarchie visuelle prévenait la surcharge d'information à grande échelle.

L'approche a fonctionné. Les clients entreprise ont déployé dès le lancement. Les utilisateurs gérant plus de 15 chantiers ont adopté la plateforme. Le produit a atteint 2 000 clients payants en 24 mois et sécurisé une levée Série A. Cette étude de cas montre comment nous y sommes arrivés.

Contexte et approche

Trois phases, du prototype de financement à la maturité plateforme. La Phase 1 a sécurisé le financement initial avec les fonctionnalités core. La Phase 2 a ajouté des interactions sophistiquées et le support multi-projets. La Phase 3 a atteint l'optimisation mobile et la scalabilité du design system. Résultat : 2 000 clients, adoption entreprise, Série A en moins de 24 mois.

Phase 1

Fondation

Mois 1-3

Architecture core et workflows essentiels.

Livrables clés

  • Architecture authentification & navigation
  • Workflows création & gestion projet
  • Bibliothèque tâches avec séquences drag-drop
  • Planning V1 avec cartes colorées
  • Système abonnement (individuel + entreprise)
  • Export PDF
Phase 2

Expansion Features

Mois 4-8

Interactions enrichies et systèmes visuels.

Livrables clés

  • Interactions planning avancées (multi-sélection)
  • Système menu adaptatif dynamic island
  • Esthétique cartes tâches affinée (V2)
  • Zoom fluide timeline (jour à trimestre)
  • Hub projet pour managers multi-sites
  • Gestion des parties prenantes
Phase 3

Maturité Plateforme

Mois 9-12

Scalabilité, stratégie mobile et raffinement.

Livrables clés

  • Gestion complexité visuelle (hiérarchie)
  • Stratégie mobile platform-specific
  • Évolution navigation (accès direct)
  • Navigation mobile consolidée (4 groupes)
  • Enrichissement activité (annotation photo)
  • Scalabilité design system (120+ écrans)
Core Design Challenge
Défi design central - Interface de planification montrant la tension fondamentale : les projets de construction contiennent 50-100+ tâches réparties sur plusieurs zones et timelines.
Research process
Processus de recherche - Validation lean dans une équipe de trois. Microsoft Clarity fournissait l'analytics comportemental. Le CEO menait 5-7 appels utilisateurs par semaine.
Foundation
Fondation - Scope MVP sécurisant le financement initial. Infrastructure core : auth sans mot de passe, navigation double sidebar, workflows projet.
Project Creation Workflow
Workflow de création projet - Processus en quatre étapes, des bases du projet au lancement de l'équipe. Design en révélation progressive : étapes de setup visibles pendant la création, se réduisant automatiquement une fois le projet actif.
Core Interaction Principles
Principes d'interaction core - Principes de design évitant la surcharge fonctionnelle. Révélation progressive, conscience du contexte, efficacité par lot, hiérarchie visuelle.

Phase 1 - Fondation

Première expérience

Passwordless authentication
Authentification sans mot de passe - La connexion par magic link élimine la friction des mots de passe pour les ouvriers sur site.
État vide
État vide - Accueil des nouveaux utilisateurs avec navigation sidebar principale.
Form design pattern
Pattern de formulaire - Approche mobile-first utilisée dans toute l'application.
Chantier Detail v1
Détail Chantier v1 - Layout desktop initial établissant l'architecture double sidebar.
Chantier Detail v2
Détail Chantier v2 - Métadonnées déplacées vers la vue d'édition. Seuls les contacts restent visibles.

Show and Hide navigation

Secondary sidebar collapsing and expanding on demand. Setup sections (zones, companies, task libraries) prominent during project creation, collapsing once project active. Operations sections (planning, documents, observations) surfacing as primary navigation. Progressive disclosure: complexity hidden until relevant, interface adapting to project lifecycle stage.

Navigation afficher/masquer - Sidebar secondaire se réduisant et s'étendant à la demande.

Tasks

Task creation interface
Création de tâches - Création assistée pour ajout rapide et paramétrage de chaque phase.

Sequences

Tasks sequences interface
Séquences de tâches - Le templating fait partie de l'ADN de Toolkit. Le planificateur peut sauvegarder des séquences.

Planning

Planning interface v1
Planning v1 - Premier canvas avec esthétique de cartes colorées. Le poids visuel fonctionnait avec 10-15 tâches mais devenait écrasant à 50-100+ tâches.
Task component v1
Composant tâche v1 - Tailles et variations multiples pour différents contextes.
Task component v2
Composant tâche v2 - Système raffiné avec quatre états. Hauteur réduite, couleurs désaturées.
Planning interface v2
Planning v2 - Évolution du canvas avec système visuel raffiné. Zones multiples et 50+ tâches visibles simultanément sans surcharger l'interface.
Multi-select
Multi-sélection - Glissement rectangulaire pour opérations par lot sur zones et timeline.
Context menu
Menu contextuel - S'adaptant à la tâche sélectionnée avec actions priorisées.
Adaptive zoom
Zoom adaptatif - Contrôles basculant entre échelles jour, semaine, mois.

Expand layout on planning view

To enhance ease of use on the planning we implemented a way to expand the layout to focus on task management, without getting confusion with navigation panel.

Extension du layout - Zoom avant et arrière sur le canvas pour meilleure concentration.

Phase 2 - Expansion fonctionnelle

La fondation validée, la Phase 2 s'est concentrée sur l'expansion des capacités tout en maintenant la simplicité. Nous avons introduit un système de menu dynamique qui s'adapte au contexte utilisateur, réduisant la charge cognitive et fluidifiant les workflows. Le défi était d'ajouter des fonctionnalités puissantes sans encombrer l'interface.

Système de menu dynamique

Le menu dynamique s'adapte au contexte de la tâche courante. En éditant une tâche, les actions pertinentes apparaissent immédiatement. En consultant les logs d'activité, les options de filtrage prennent la priorité. Cette conscience du contexte réduit les étapes de navigation et garde les utilisateurs concentrés sur leur workflow actuel.

Dynamic island menu - task modification
Menu île dynamique - Modification de tâche contextuelle avec actions rapides.

Task manipulation in planning

Edit duration and task information on the fly directly from the planning canvas.

Manipulation de tâches - Modifier durée et informations à la volée.

Batch edition

Select a zone or multiple tasks on the canvas, apply parameters in 20 seconds. Users managing 50-100+ tasks need efficient ways to apply changes across groups.

Édition par lot - Sélectionner zone ou tâches, appliquer paramètres en 20 secondes.
Dynamic menu components and interface system
Système d'interface - Architecture de composants pour le menu dynamique, assurant la cohérence dans tous les contextes.
Task detail with activity section
Section activité - Vue détail tâche avec menu dynamique, log d'activité et actions contextuelles.

Phase 3 - Maturité plateforme

La Phase 3 a apporté la maturité plateforme avec le hub projet et l'évolution mobile. Les clients entreprise avaient besoin de gérer plusieurs chantiers depuis un dashboard unique. Les ouvriers sur site avaient besoin d'un accès mobile équivalent à l'expérience desktop. Nous avons livré les deux sans compromis.

Hub projet

Le hub projet offre une vue d'ensemble de tous les chantiers. Les managers peuvent rapidement évaluer l'avancement, identifier les blocages et explorer des projets spécifiques. Les indicateurs visuels font remonter les éléments urgents sans nécessiter une navigation profonde.

Project hub - construction site index v3
Hub projet v3 - Dashboard multi-sites avec indicateurs de progression et filtres.

Mobile evolution

Construction happens on-site, often in challenging conditions. The mobile experience needed to be robust, fast, and usable with gloves. We redesigned the navigation system for touch-first interaction while maintaining feature parity with desktop.

Mobile menu evolution
Navigation mobile - Système de menu tactile avec support des gestes et zones d'action accessibles au pouce.

Fondation design system

Une équipe de trois personnes ne peut pas se permettre de redesigner des composants pour chaque fonctionnalité. Nous avons construit un design system qui scale avec le produit : composants réutilisables, patterns cohérents et langage visuel partagé. Cette fondation a permis une itération rapide tout en maintenant la qualité.

Design system overview
Design system - Bibliothèque de composants avec tokens, patterns et guidelines d'usage pour une implémentation cohérente.
Icon system - files and folders
Système d'icônes - Set d'icônes personnalisé pour fichiers et dossiers, optimisé pour la gestion documentaire du bâtiment.

Impact

L'approche design a livré des résultats business mesurables. En nous concentrant sur les workflows core et la complexité progressive, nous avons créé un produit que les clients entreprise comme les petites équipes pouvaient adopter rapidement. Les chiffres parlent d'eux-mêmes.

Impact diagram
Impact projet - Métriques clés et jalons atteints sur le cycle de développement produit de 12 mois.

2 000+

Clients payants en 24 mois après le lancement

Série A

Financement sécurisé en novembre 2025

Entreprise

Clients gérant plus de 15 chantiers ont adopté dès le lancement