Total : E-commerce B2B
Digitaliser la commande d'huiles moteur : du Desktop au Mobile
About the project
UI/UX Design & Responsive Strategy
Date:
2020
Client:
Total
Secteur:
Automobile / Énergie
Contexte
Total souhaitait moderniser son canal de vente B2B en permettant aux revendeurs et professionnels de l'automobile de passer leurs commandes d'huiles moteur de manière efficace et simplifiée. L'enjeu était de transformer une plateforme web métier dense en un outil mobile fluide, capable de supporter des prises de commandes rapides directement sur le terrain.
Objectif & Problématique
Problématique
Comment adapter une interface de commande complexe aux contraintes du mobile sans sacrifier l'efficacité opérationnelle des professionnels ?
Objectif
Ma mission consistait à rendre les conceptions des pages web et des composants adaptatifs (responsive) pour assurer une expérience utilisateur optimale, quel que soit le dispositif utilisé.
Ma démarche (Tâches et réalisations)
Pour ce projet, j'ai articulé mon travail autour de la transition Desktop vers Mobile :
Stratégie Responsive : Création de la vision mobile du projet et définition des règles d'adaptation.
Design d'Interface : Conception d'une interface mobile interactive respectant les contraintes techniques (grilles de colonnes, zones de clic).
Collaboration & Normes : Travail en binôme avec un Designer Senior et application stricte des guidelines de la marque Total.
Prototypage : Création de prototypes interactifs pour valider les flux utilisateurs (User flows).
Composants & Design System
Le cœur du travail a résidé dans l'adaptation des composants Desktop pour le mobile. Chaque élément a été repensé pour la navigation tactile :
Navigation : Transformation du menu complexe en un menu mobile intuitif.
E-commerce : Optimisation des fiches produits (Cards) et du tunnel d'achat (Add to cart, Checkout).
Données : Adaptation des tableaux de commande et des éléments textuels pour une lisibilité adapté sur petit écran.
Écrans & Parcours Utilisateur
La finalité du projet a été la conception d'un parcours d'achat complet, fluide et optimisé pour une utilisation nomade. Chaque écran a été pensé pour minimiser le nombre d'actions nécessaires à la validation d'une commande.
Navigation & Recherche
Challenge: Sur la version Desktop, la navigation repose sur une Side Bar persistante permettant un accès direct et permanent aux catégories du site. Le défi était de transposer cette structure verticale dense sur mobile sans empiéter sur l'écran
Solution: Contrairement à la Side Bar Desktop qui utilise des liens textuels fins, la version mobile utilise des cellules larges de 48px minimum, garantissant une navigation sans erreur pour les professionnels sur le terrain.
Desktop
Mobile
Fiche Produit & Panier
Challenge: Sur Desktop, les professionnels de l'automobile utilisent des tableaux denses pour comparer les références d'huiles. Transposer ces tableaux sur mobile est impossible sans créer un défilement horizontal frustrant qui perturbe l'expérience utilisateur.
Solution: J'ai abandonné la structure en colonnes au profit d'un système de Cartes (Cards) verticales. Chaque ligne du tableau Desktop devient une fiche produit autonome sur mobile, regroupant toutes les informations critiques (Nom, Référence, Prix) de manière hiérarchisée.
Desktop
Mobile
Tunnel de Commande (Checkout) :
Challenge: L'objectif était de simplifier le tunnel de commande Desktop pour l'adapter aux usages mobiles. J'ai repensé le parcours pour réduire la charge cognitive et garantir une navigation rapide sur le terrain.
Solution: J'ai transformé les étapes complexes en un parcours linéaire, permettant une progression naturelle. J'ai également supprimé les éléments superflus pour ne conserver que les informations essentielles, garantissant une clarté maximale lors de la validation finale.
Mobile
Conclusion & Apprentissages
Ce projet pour Total a renforcé ma capacité à gérer des contraintes de marque fortes tout en résolvant des problématiques ergonomiques complexes liées au responsive design.
Résultat : Une plateforme cohérente qui permet aux professionnels de passer commande en quelques clics, que ce soit depuis leur bureau ou leur atelier.
Apprentissage : Le responsive ne consiste pas seulement à réduire la taille des éléments, mais à hiérarchiser l'information pour l'usage nomade.
