Thibaut Sailly

designer d'interfaces

projets menu
projets
un camion en stationnement à son dépôt dans la Somme

fretlink

2019-2022

Cette entreprise mettait en relation de gros expéditeurs de marchandises avec des petits transporteurs routiers régionaux, et assurait le suivi des expéditions de transport qui lui étaient confiés.

Seul designer au sein d’une équipe de développeurs, j’ai commencé par clarifier les attributs permettant de décrire les profils de transporteurs et d’expéditeurs, avec l’aide des équipes d’exploitation, de leurs responsables, et des développeurs. Cet assainissement a permis aux applications métiers de comprendre et utiliser plus d’aspects métiers qui, faute de mieux, étaient présents dans des notes écrites. La classification des camions et de leurs équipements a fait partie de cet exercice.

une sélection d'illustrations de camions que Fretlink était succeptible de faire rouler

Design system

Ce travail d’indexation m’a permis de me rendre compte qu’une navigation profonde serait nécessaire pour qu’un employé puisse circuler d’une application à une autre jusqu’aux niveaux de détails nécessaires au bon déroulement des expéditions. Par exemple : Transporteurs → Transports Bonnemaison → Dépôt Evry → Contacts → Nicolas Martin → Zone géographique attribuée.

illustration en perspective communicant les différents niveaux de la structure globale de la web app de Fretlink

Mon point de départ pour mettre en place le design system était composé de trois éléments existants : le logo, la couleur de la marque, et la fonte (GT America de Grilli Type, avec laquelle ce fût un immense plaisir de travailler). À partir de là, j’ai décliné une palette de couleurs à utiliser dans les interfaces en suivant une méthode de production de variantes décrite ici, défini les styles de texte possibles, puis mis en place les différents éléments d’interface au fur et à mesure de la construction des écrans.

copie d'écran du document Sketch montrant quelques planches de description des couleurs choisies
palette des couleurs du Design System de Fretlink
carte de France en mode lecture et modification
quelques éléments de formulaire web du Design System de Fretlink

Difficile de trouver dans une banque d’icônes existante les notions spécifiques au transport routier de marchandises : transpalette, dépôt, litige, ou encore retard. Il a donc fallu dessiner beaucoup d’icônes dont voici quelques exemples.

exemples d'icônes dessinées pour les interface de Fretlink'

Index des transporteurs

Les affréteurs devaient pouvoir accéder rapidement aux détails d’un transporteur, et les comprendre tout aussi vite : composition de la flotte, zone d’activité, et besoins spécifiques en transport réguliers ou ponctuels.

page 404
page 404

Portail transporteurs

Tous les produits sur lesquels je suis intervenu chez Fretlink étaient des outils internes, sauf celui-ci. Les transporteurs avaient de leur côté un portail leur permettant de décrire leur flotte, leur activité et leurs besoins. Par exemple : j’ai besoin de faire revenir une semi isotherme de 40 tonnes en complet du 13 (Bouches du Rhône) vers le 22 (Côtes d’Armor) les mercredis et vendredis. La grande variété de culture numérique chez les transporteurs a été prise en compte pour proposer une interface qui était simple, claire et satisfaisante à utiliser régulièrement.

page de description d'un dépôt de transporteur
configuration de la flotte d'un transporteur
renseignement de l'adresse et de la géolocalisation du dépôt

Ce portail leur permettait aussi de consulter les offres de transport compatibles avec leur activité, de les saisir, puis de transférer les documents attestant du bon déroulement du transport, nécessaires au règlement de leurs factures.

offre de transport acceptée par un transporteur
page 404

Index des expéditeurs

Les expéditeurs ont des caractéristiques et exigences très variables en fonction de leur activité et de leur échelle : conditions d’accès aux sites de chargement / livraison, types de véhicules acceptés, état des véhicules, équipements nécessaires pour l’arrimage, comportement du chauffeur sur le site. Leur adresse est souvent un problème pour les chauffeurs car les zones industrielles sont bien moins précises que dans les rues des villes, et les sites peuvent avoir des dimensions très importantes. L’index des expéditeurs devait être capable d’accueillir tous les profils possibles pour que les expéditions puisse être proposées aux transporteurs compatibles.

préférence d'un expéditeur au sujet des véhicules devant transporter sa marchandise
écran de modification des préférences de véhicule pour un expéditeur

Réponse aux appels d’offre

Les gros expéditeurs lancent régulièrement des appels d’offre sous la forme d’une liste de lignes (d’un site A à un site B) détaillant la fréquence, la quantité et le type de marchandise à transporter. Le traitement de ces appels d’offre est très laborieux, et cette interface permettait à l’équipe commerciale de la formaliser plus rapidement, de proposer des prix cohérents avec les prix pratiqués au préalable.

liste de lignes prêtes à être transmises au prospect lors d'un appel d'offre
les différents états possibles de lignes dans un appel d'offre

Campagnes d’affrètement

Même si les offres de transport leur sont transmises via email ou au travers de leur portail, les transporteurs gardent une forte culture du téléphone dans leur activité quotidienne. Fretlink avait une équipe d’affrètement dont le travail était d’assigner les expéditions qui leur étaient confiées, dans les temps et pour un tarif permettant de maintenir une marge correcte. La quantité d’information à afficher pour qu’un appel téléphonique soit efficace et rapide est très importante : capacités du transporteur contacté, historique de transport, critères à remplir pour opérer le transport correctement. Cette interface permet de basculer d’un mode “liste à dépiler” pour l’affréteur à un mode “voici les autres expéditions qui peuvent vous intéresser” lorsqu’un appel avec un transporteur est en cours. L’affréteur était capable de lancer plusieurs recherches et d’y revenir si des besoins ponctuels pour ce transporteur se présentaient. Les réponses du transporteur étaient aussi mémorisées pour affiner le moteur de suggestion d’expéditions futures.

écran montrant des expéditions suggérées à un transporteur lors d'un appel téléphonique de campagne d'affrètement

Suivi des expéditions

L’autre métier chez Fretlink était le pilotage de flux : s’assurer qu’un transporteur soit dans les temps au chargement comme à la livraison, et trouver des solutions rapidement en cas d’imprévus. Le travail d’équipe est important car une expédition peut se dérouler sur plusieurs jours, et être suivie par plusieurs pilotes. Chaque pilote doit aussi pouvoir garder un œil sur plusieurs expéditions à la fois. Là aussi, la quantité d’informations à afficher est très importante, car les besoins varient beaucoup en fonction de la phase dans laquelle se trouve l’expédition.

écran montrant une liste des expéditions à publier auprès des transporteurs, et un partie des détails concernant l'une d'entre elles
écran montrant une liste d''expéditions livrées pour lesquelles les documents doivent être contrôlés