L'offre Terminaux Mobiles
Concevoir de bout en bout le parcours d'acquisition des terminaux mobiles Free Pro, du catalogue à la commande, avec une interface pensée pour les décideurs B2B.
- Client
- Free Pro
- Secteur
- Télécom B2B
- Rôle
- UX · UI · Design system · Prototypage
- Durée
- 1 an
- Période
- 2024
- Périmètre
- UX/UI · E-Commerce
01 · Le défi
Comment permettre à un responsable IT d'équiper une flotte entière en quelques clics, sans formation, sans friction, sur une interface qui reflète le positionnement premium de la marque Free Pro ?
02 · Contexte & objectifs
Création du parcours de vente de terminaux.
Free Pro souhaitait créer un espace dédié aux terminaux mobiles pour les entreprises. Les phases de test ont fait ressortir l'étape de configuration et de sélection de forfait comme le principal point d'abandon. L'enjeu : concevoir une expérience native B2B, pensée pour les achats multi-lignes et les décisions collectives.
- Adapter l'interface aux cas d'usage B2B (commandes multi-unités, rôles)
- Aligner le design sur la charte Free Pro tout en améliorant la lisibilité
- Créer un système de composants réutilisable pour les équipes dev
03 · Démarche
Comment j'ai résolu le problème.
Découverte & Recherche
Benchmark des acteurs B2B pour cartographier les parcours d'achat de terminaux en entreprise. Identification des points de friction à anticiper dans le tunnel de commande.
- Benchmark B2B
- Points de friction
Définition & Architecture
Redéfinition de l'architecture d'information du catalogue. Création de User Flows couvrant les cas B2B spécifiques : commande groupée, gestion de contrats multi-lignes, délégation de validation. Validation avec les équipes produit et métier.
- Architecture d'information
- User flows B2B
Design & Prototypage
Cycles de wireframes basse fidélité, tests utilisateurs et itérations. Puis design haute fidélité sur Figma avec la création d'un système de composants partagé et documenté, et des prototypes interactifs.
- Wireframes
- Tests utilisateurs
- Design system
- Prototypes
Livraison & Suivi
Handoff développeurs via Figma Dev Mode avec annotations précises. Sessions de passation live avec l'équipe front-end. Suivi post-lancement : heatmaps et sessions d'enregistrement pour mesurer l'impact réel des décisions de design.
- Figma Dev Mode
- Passation front
- Heatmaps
04 · Architecture
Quatre espaces, du catalogue à la commande.
- Boutique des terminaux
- Listing des terminaux
- Location
- Comptant
- Page produit
- Location
- Achat comptant
- Tunnel de commande
- Panier
- Connexion / création de compte
- Détail de commande
- Paiement
- Confirmation de commande
- Offre LOC+
- Listing des terminaux
05 · Flow clé
Un tunnel qui prévoit la validation interne.
- Entrée
- Décision
- Écran
- Système
- Fin
- 1Deux montants à suivre : à la commande et chaque mois (loyer + abonnement)
- 2Remises et frais à garder lisibles jusqu'au paiement pour ne pas perdre l'acheteur
- 3Valideur ≠ acheteur : la commande ne doit pas bloquer le collaborateur sans droit de paiement
06 · Interface finale
Location ou comptant, le prix toujours lisible.
- Flow · étape 01 / 13
Listing des terminaux en location
Les filtres en tête (marque, location ou comptant, reconditionné, 5G), le loyer mensuel HT mis en avant sur chaque carte et le prix comptant rappelé dessous. Une carte présente l'offre Loc+ au milieu du catalogue.
Flow · étape 03 / 13Fiche produit en location Loc+
Couleur, stockage et modalité de commande se choisissent au même endroit, et le prix suit le mode choisi. La quantité se règle avant l'ajout au panier, pour équiper plusieurs collaborateurs d'un coup.
Flow · étape 04 / 13Panier : téléphones et forfaits
Téléphones et forfaits dans le même panier, avec un rappel qu'il faut autant de forfaits que de téléphones. Le récapitulatif sépare ce qui se paie à la commande de ce qui se paie chaque mois.
Flow · étape 11 / 13Détail d'une commande en location
Avant le paiement, tout est repris ligne par ligne : livraison estimée, adresses, téléphones en location, forfaits sans engagement, puis les totaux à la commande et par mois, en HT et TTC.
Flow · étape 13 / 13Confirmation de commande
Trois informations, chacune avec sa suite : l'e-mail récapitulatif, le numéro de commande à suivre dans l'Espace Client, la facture disponible dès l'expédition.