On vient de mettre en ligne Poste 4, le poste d’expédition de Ficelle, une marque de vente en ligne imaginaire. On pèse un colis, un portique le mesure, l’outil choisit le transporteur et l’étiquette se pose sur le carton. Le tout dans le navigateur, avec un entrepôt en 3D autour de l’écran. On en est fiers, et on voulait raconter comment il est né.
Pourquoi un projet sans client
Un écran métier se juge en le voyant tourner, et celui d’une entreprise ne se montre pas sur un site. Poste 4 n’a pas de client : la marque, les commandes, les prix et les transporteurs sont inventés. L’outil, lui, fonctionne de bout en bout, et chacun peut l’essayer en ligne.
On s’est fixé une contrainte simple : une semaine, à deux. Louis à la direction artistique, Enzo et Louis au développement et à la 3D. Assez court pour garder l’idée nette, assez long pour soigner les détails.
Partir du poste, pas de l’écran
Un poste d’expédition traite des centaines de colis par jour. Une erreur de poids ou de transporteur ne se voit pas tout de suite : elle se paie plus tard, en surcoût ou en colis retourné. Avant de dessiner le moindre bouton, on a donc posé le poste réel : une balance à écran, un portique de mesure, une étiqueteuse, un convoyeur vers les quais.
Chaque machine de la scène reprend un équipement existant. Ce n’est pas du décor : quand l’écran demande le poids, le carton arrive sur la balance ; quand on survole un transporteur, son quai s’allume au fond du hall.
Une étape à la fois
L’interface tient dans un seul panneau, en quatre étapes : le poids, la mesure, le transporteur, l’étiquette. Une seule est active à la fois, et le panneau s’ajuste en douceur de l’une à l’autre, sans faire sauter la page. L’opérateur sait toujours ce qu’on attend de lui.
Le choix du transporteur est automatique : le moins cher parmi ceux qui tiennent le délai promis, puis le moins émetteur. L’outil recommande une option et donne sa raison en une phrase. Les autres restent à portée de flèche, pour garder la main quand l’opérateur en sait plus que la règle.
Tout au clavier
Un opérateur ne lâche pas son clavier pour attraper une souris. Dans Poste 4, les chiffres saisissent le poids, quatre lettres choisissent le format, Entrée valide l’étape, les flèches changent de transporteur. Chaque touche a son bouton à l’écran, et chaque bouton affiche sa touche : on apprend le raccourci en cliquant.
C’est le genre de détail qu’on retrouve sur nos applications sur mesure : un écran qu’on utilise toute la journée doit aller aussi vite que la personne qui s’en sert.
Un système court
Des angles droits, une palette courte, une seule famille de caractères. La scène 3D reprend exactement les couleurs de l’interface, si bien qu’on passe de l’une à l’autre sans changer de monde.
Côté technique : Figma pour le design, React et TypeScript pour l’interface, Three.js pour la scène. La 3D ne se redessine que lorsqu’elle bouge, et baisse sa résolution si l’ordinateur peine. Laissée trente secondes sans geste, la démo enchaîne les colis toute seule.
Ce qu’on en retient
Poste 4 reste une démonstration. Sur un projet réel, le poste lirait les commandes dans votre boutique ou votre outil de gestion et interrogerait les transporteurs par leurs API : c’est le travail de nos ponts entre logiciels. Les chiffres affichés viendraient de vos contrats transporteurs.
La méthode, elle, ne change pas : comprendre le poste avant de dessiner l’écran, une étape à la fois, et une interface qui suit le rythme de ceux qui l’utilisent. Si vous gérez des expéditions, notre page transport et logistique montre ce qu’on peut faire pour ce métier.
