Bouygues Quickconnect : Optimiser la gestion de chantier grâce à une solution multi-canal

UI DesignUX DesignDesign SystemBTP & Construction

QuickConnect est un outil interne Bouygues pour fluidifier la transmission d'informations entre les équipes siège et les équipes terrain sur les chantiers.

J'ai repris l'outil de zéro côté UX et UI : arborescence, wireframes, maquettes hi-fi et Design System.

Le contexte

QuickConnect existait déjà, mais avait été développé sans démarche UX. Le problème majeur c'est que deux usages opposés cohabitaient sans qu'aucun ne soit vraiment pris en compte. Le siège manquait de visibilité terrain, et le terrain héritait d'un outil lent et difficile à utiliser.

Quickconnect, le contexte
Le challenge : les formulaires

La solution

Plutôt que de chercher un compromis entre les deux usages, le parti pris a été de les séparer entièrement : deux parcours distincts au sein d'un même outil, chacun pensé pour son contexte d'usage (desktop côté siège, mobile en conditions de chantier côté terrain).

Bénéfices engendrés

La méthodologie

Sur ce projet, j'ai repris l'expérience d'un outil fonctionnel mais inexploitable en conditions réelles, car conçu à l'origine par les développeurs pour eux-mêmes plutôt que pour les utilisateurs.

J'ai d'abord analysé deux contextes d'usage très différents : la création de formulaires au siège sur desktop, et leur saisie sur le terrain par des agents mobiles, parfois avec des gants. Cette phase a aussi servi à sensibiliser l'équipe technique à l'importance du design avant le code.

J'ai repris l'outil de zéro côté UX. La première étape a été de poser une nouvelle arborescence claire, en identifiant les grandes zones fonctionnelles et en distinguant les parcours siège et terrain. J'ai créé les pages manquantes, restructuré la navigation, et produit l'ensemble des wireframes lo-fi : gestion de la base de données, création de formulaires, vues mobile en conditions réelles. Le passage en maquettes hi-fi a apporté une identité visuelle cohérente entre les deux versions, avec une attention particulière sur la lisibilité et la rapidité de saisie côté terrain.

Arborescence
Des wireframes aux maquettes

Avant la mise en production, le client a fait circuler les maquettes auprès de différents services concernés (équipes siège, responsables terrain, équipes de développement) pour collecter leurs retours. Ces allers-retours ont permis d'ajuster certains points sur l'organisation des formulaires et la hiérarchie de l'information avant le passage en développement, sans repasser par une phase de tests utilisateurs en conditions réelles.

La phase finale a été de mettre en place un Design System complet, pensé autant pour garantir la cohérence visuelle dans le temps que pour faciliter la maintenance côté développement. La documentation des composants a été un livrable clé pour soutenir l'autonomie de l'équipe dev et capitaliser sur le travail de sensibilisation mené en Discovery.

Le produit

QuickConnect se décline en deux interfaces distinctes : une plateforme web pour la gestion managériale côté siège, et une interface mobile pensée pour la saisie rapide en conditions de chantier.

Plateforme web pour la gestion managériale
Application mobile pour le terrain
Management Assist' Colas
Management Assist' Colas
UI Design UX Design Charte Graphique BTP & Construction
Innomillion Vivatech FDJ
Innomillion Vivatech FDJ
UI Design UX Design Événementiel & Salon Jeux d'argent