Carsparency Pro — la plateforme négociants, de l'offre au transfert de propriété
Le côté négociant d'une place de marché automobile aux EAU : enchères chronométrées en façade, puis cinq étapes de l'offre gagnante au transfert de propriété.
Entreprise
Carsparency
Rôle
Designer produit
Type
Produit
Secteur
Place de marché automobile · B2B
Équipe
Designer produit ; la taille et les rôles de l'équipe ne sont pas consignés dans les fichiers
Outils
Figma
Le problème
Un négociant remporte une voiture qu'il n'a jamais touchée. Le prix, le paiement, les papiers, la livraison et le transfert de propriété restent à régler, et chacun peut bloquer la transaction.
Le rôle
Designer produit de la plateforme négociants : l'app et le produit web desktop, de la liste des enchères au transfert de propriété.
Le résultat
129 frames d'app et 167 frames desktop couvrant tout le cycle d'achat. Les fichiers ne consignent ni date de lancement ni données d'usage.
Figure 01
Figure 01L'app négociant : la liste des enchères en cours filtrée par marque et année, le formulaire d'offre et les commandes en attente, chacune indiquant son étape dans l'achat.
01Contexte
Une plateforme négociants, conçue à la fois comme app et comme site desktop
Carsparency exploitait une place de marché de voitures d'occasion aux EAU : des particuliers mettaient leur voiture en vente, un inspecteur en consignait l'état et des négociants vérifiés se la disputaient lors d'enchères chronométrées. Pro est le côté négociant, le produit qu'utilisaient les acheteurs.
Son fichier Figma réunit les deux moitiés de ce produit. Quatre pages d'app couvrent les enchères, les commandes, le compte et la connexion, et quatre pages web reprennent les mêmes espaces en largeur desktop. Ensemble, elles comptent 129 frames d'app et 167 frames desktop, pour la plupart des états des mêmes écrans plutôt que de nouveaux écrans.
Figure 02La liste des enchères sur desktop : onglets « En cours », « À venir » et « Stock », panneau de filtres par prix, kilométrage, année, marque et distance, et sur chaque carte l'offre actuelle face à la Fair Market Value (juste valeur marchande).
02Problème
Remporter l'enchère, c'est le milieu de l'achat, pas la fin
Un négociant enchérit sur une voiture qu'il n'a pas vue, face à des concurrents qu'il ne voit pas, pendant qu'un compte à rebours défile. Les écrans d'enchères doivent rendre cette décision rapide et défendable.
Puis commence la partie la plus difficile. Après l'adjudication, il reste à fixer le prix de la voiture, à la payer en plusieurs fois, à la documenter, à la livrer et à en transférer légalement la propriété. Ce travail se joue entre le négociant, le vendeur et les équipes de Carsparency, et peut se bloquer à chaque étape. La plupart des parcours de place de marché s'arrêtent à l'offre gagnante ; celui-ci continue.
03Parcours
Un cycle de vie, cinq étapes numérotées
La plus grande partie du fichier n'est pas l'enchère mais les Commandes. Chaque voiture remportée passe par « En négociation », « En attente » et « Acquise », et aucune carte ne se contente de dire « en attente » : elle indique à laquelle des cinq étapes se trouve la commande et ce qui vient ensuite.
Le statut occupe la même place sur chaque carte et chaque fiche, sous forme de bandeau coloré accompagné d'une seule action, pour que le négociant voie toujours si c'est à lui de jouer.
Le cycle d'achat tel que le fichier l'organise
01
EnchérirListes en cours, à venir et stock ; offre, offre proxy, offre automatique ou achat immédiat ; états en tête et dépassée.
02
NégocierSi le vendeur refuse, relever l'offre ou accepter son prix.
Dépassée
Figure 04Les commandes en attente sur desktop. La bande sous chaque carte porte le numéro et le nom de l'étape, par exemple « 3 sur 5, règlement en attente », et le bouton au-dessus est l'unique action que requiert cette étape.
04Décisions clés
Quatre décisions qui façonnent la journée du négociant
Ces choix sont visibles dans les frames. Le fichier ne consigne pas le raisonnement ; les raisons ci-dessous sont donc déduites de la façon dont les écrans sont construits.
01
Afficher la Fair Market Value sous chaque offre
Un négociant qui enchérit contre la montre a besoin d'un repère qui ne vienne pas des autres enchérisseurs. Afficher l'estimation de la plateforme à côté de l'offre actuelle, dans la liste comme sur la fiche, transforme chaque offre en comparaison plutôt qu'en pari.
Compromis
L'estimation s'expose à la discussion : une offre très au-dessus de la Fair Market Value invite à demander pourquoi.
02
Numéroter les étapes après l'adjudication
« En attente » ne dit rien au négociant sur ce qu'il doit faire. « Étape 1 sur 5, acompte en attente » lui dit où il en est, ce qu'il reste à faire et à qui c'est le tour.
Alternatives
Un état unique « en cours », ou une page de chronologie séparée.
03
Un seul gabarit de fiche pour tout le cycle
La page depuis laquelle le négociant a enchéri est celle où il suit ensuite la livraison. Seuls le bandeau de statut et son unique action changent : rien n'est à réapprendre d'une étape à l'autre.
05Solution
La vitesse des enchères devant, les démarches visibles derrière
Le côté enchères est conçu pour comparer vite. Le compte à rebours passe au rouge dans les dernières minutes, une pastille colorée indique « En tête » ou « Dépassée », et les offres proxy et automatiques permettent au négociant de rester en course sans surveiller l'horloge.
Le côté commandes est conçu pour la confiance. L'acompte affiche le solde dû, les fonds disponibles et le portefeuille avant tout débit. Le détail du prix ventile chaque déduction, la liste des documents nomme chaque pièce nécessaire au transfert, et chaque étape a son propre état d'échec (paiement refusé, document rejeté, paiement excédentaire) plutôt qu'une erreur générique.
Enchères : En cours, À venir et Stock, avec filtres et tri
Offres : offre, offre proxy, offre automatique et achat immédiat, avec messages de succès et d'erreur
Commandes : négociation, acompte, règlement, justificatif de paiement, livraison et transfert de propriété
Compte : portefeuille, comptes bancaires en cours de vérification, documents, notifications et aide
Figure 05La fiche véhicule sur desktop. La carte de prix associe l'offre actuelle à la Fair Market Value, au temps restant et à deux façons d'enchérir : proxy ou directe.
En négociation
Livraison en attente
Figure 06
Acompte
Détail du prix
Figure 07
Figure 08La carte éclatée de la voiture dessinée dans le fichier Pro : toit, capot, portières et pare-chocs mis à plat, avec des pictogrammes pour les bosses, les rayures et la peinture. Le même dessin revient sur la page des défauts du rapport d'inspection.
06Tous les écrans
216 écrans de téléphone et 170 pages desktop
Chaque page du fichier Figma de Pro a été passée en revue le 27 septembre 2026, et chaque frame de la taille d’un écran a été exportée : les écrans de téléphone à 390 points, les pages desktop à 1 440 pixels. Les quatre pages d’app contiennent 129 frames et les quatre pages web 167 frames desktop ; en ne montrant chacune qu’une fois, et en ajoutant les mises en page téléphone propres au web ainsi que la page Updates, on obtient 216 écrans de téléphone et 170 pages desktop. Les deux index suivent le parcours du négociant : la connexion, la liste des enchères et la fiche d’une voiture, puis les commandes qu’ouvre une enchère remportée (négociation, acompte, règlement et justificatif de paiement, titre de propriété et livraison), puis le compte, les comptes bancaires, le portefeuille et l’aide.
La plupart des frames téléphone des pages web copient celles de l’app et n’apparaissent qu’une fois ; les 42 qui diffèrent, avec des prix en dollars, les vrais textes des pages Confidentialité, À propos et Aide, des états vides et une feuille de partage, figurent dans l’onglet Web mobile. Les onglets Refonte contiennent la page Updates : une fiche véhicule reconstruite avec une carte des défauts, la connexion par numéro de téléphone et des états de chargement ; les formats App Store et les Explorations de la carte d’enchère ont leurs propres onglets. Les adresses e-mail et numéros de téléphone d’exemple, ainsi que le portrait d’exemple, sont masqués, tout comme la capture d’écran de virement bancaire utilisée comme exemple de justificatif de paiement.
07Écosystème
Le dernier arrêt d'une voiture partie du téléphone du vendeur
Tout ce qu'un négociant lit dans Pro a été produit en amont. Le vendeur a décrit la voiture dans l'assistant web, un inspecteur l'a vérifiée dans l'app d'inspection, et les opérateurs en ont fixé le prix et ont invité des négociants depuis le back-office. Pro est l'endroit où ce dossier rencontre un acheteur.
Les éléments partagés se retrouvent d'un fichier à l'autre : la même fiche véhicule (tranche de kilométrage, spécification GCC, titulaire du titre de propriété, historique d'entretien), les mêmes notes d'état, le même vocabulaire de prix (Fair Market Value ici, Fair dans le back-office) et, en dessous, la même bibliothèque de composants.
08Mon rôle
La part de Sina
Relevé dans le fichier Pro. Les fichiers ne consignent ni la taille de l'équipe ni qui a décidé quoi : il s'agit donc du travail présent dans le fichier, pas d'une revendication de paternité exclusive.
Responsable
↳Navigation et structure de l'app et du produit web desktop
↳La liste des enchères, les filtres et les états d'offre, d'offre proxy et d'offre automatique
↳Le cycle de la commande : états de négociation, paiement, règlement, livraison et transfert de propriété
↳Les parcours compte, portefeuille, compte bancaire et documents, avec leurs états de vérification
↳La carte éclatée de la voiture pour localiser les dommages
Coresponsable
—
Collaboration
↳Des collègues de l'ingénierie et des opérations, non nommés dans les fichiers
Le fichier conserve aussi une page Updates et des tests de carte numérotés (Test 2 à Test 7), preuve que la carte d'enchère a été itérée plutôt que dessinée d'un seul jet.
09Résultats
Ce que livre le fichier
Des nombres de frames conçues, pas des résultats. Aucune date de lancement, donnée d'usage ou taux de conversion n'est consigné dans les fichiers Carsparency.
frames d'app
129
Quatre pages d'app : Enchères, Mes voitures, Compte, et Connexion et onboarding
Livrable
frames desktop
167
Quatre pages web qui reprennent les mêmes espaces en 1 440 px
Livrable
étapes de commande numérotées
5
De l'acompte au justificatif de paiement, chacune avec son statut et son action
Livrable
Ce qui a été livré
↳Liste des enchères, filtres et tri
↳Offre, offre proxy, offre automatique et achat immédiat
↳Négociation et contre-offres
↳Acompte, règlement et justificatif de paiement
↳Suivi de la livraison et du transfert de propriété
↳Portefeuille, comptes bancaires et documents
10Ce que j’ai appris
Ce que ce travail a appris
01
Concevoir ce qui suit l'état de réussite
L'offre gagnante est l'endroit où s'arrêtent la plupart des parcours d'enchères. Ici, elle se situe à peu près à mi-chemin, et les frames qui suivent (paiements, papiers, livraison) sont plus nombreuses que les écrans d'enchères.
02
Dans un statut, les chiffres valent mieux que les adjectifs
« Étape 3 sur 5, règlement en attente » répond aux trois questions d'un négociant : où en suis-je, que reste-t-il, et que dois-je faire ensuite ? « En attente » seul ne répond à aucune.
03
Les données fictives masquent les cas difficiles
Chaque carte du fichier montre la même voiture au même prix, si bien que la mise en page n'est jamais éprouvée face à un titre long, une voiture bon marché à côté d'une voiture chère, ou une offre très au-dessus de son estimation.
Un parcours vendeur qui affiche un prix avant de demander des détails, puis laisse le propriétaire inspecter sa voiture au smartphone en seize photos guidées.
Verser l'acomptePayer depuis le portefeuille ou en ligne, avec les fonds disponibles affichés d'abord.
04
RéglerDétail du prix, règlement final et justificatif de paiement, avec les états rejeté et paiement excédentaire.
05
TransférerLivraison du véhicule en attente, puis attente du transfert de propriété, puis acquise.
En tête
Offre proxy
Figure 03La carte d'offre dans trois états : dépassée, en tête, et pendant le réglage d'une offre proxy. La ligne Fair Market Value reste sous l'offre dans tous les cas.
Compromis
La page reste longue : le rapport d'inspection se trouve sous la carte de prix à chaque étape.
04
Montrer le coût de la victoire avant de le demander
Le détail du prix sépare prix d'achat net, remises et retenues, et le formulaire d'offre ajoute le transport et la garantie acheteur étendue, pour que le négociant voie le coût de revient réel et non le seul prix d'adjudication.
La même carte de prix à deux étapes. Seuls le bandeau de statut et l'action changent : en négociation avec le vendeur, avec « Augmenter le prix », puis livraison du véhicule en attente.
Acompte et détail du prix, recadrés depuis les fenêtres desktop : solde dû face aux fonds disponibles, puis prix net, remises et retenues avant le montant final.
Figure 09Tous les écrans à la largeur d’un téléphone : l’app parcours par parcours, puis les mises en page téléphone propres au web et les refontes ; ouvrez un écran pour le voir en entier.
Figure 10Toutes les pages desktop, parcours par parcours ; ouvrez une page pour la voir en entier.
