Autoparts Logitcis

LE CONTEXTE Autego est un distributeur de pièces automobiles qui vend en B2B à des garages et ateliers professionnels. Ses équipes administratives traitent quotidiennement un volume important de comptes clients, de commandes et de factures. LA PROBLÉMATIQUE Il ne s'agissait pas d'améliorer un outil, mais d'en concevoir un intégralement. Sans référence existante, le premier enjeu était de modéliser le métier : comprendre comment les équipes traitent une commande, suivent un stock, gèrent un compte client — pour traduire ces processus en une architecture d'outil cohérente. LA DÉMARCHE La conception s'est appuyée sur les processus métier plutôt que sur un audit de l'existant : quelles tâches les équipes réalisent au quotidien, dans quel ordre, avec quelles informations sous les yeux. J'ai structuré l'architecture de l'information de l'ensemble de la plateforme, neuf modules : ventes, catalogue, clients, marketing, contenus, reporting, points de vente et administration, avant d'entrer dans la conception détaillée des écrans. LA SOLUTION Plus de 70 écrans ont été conçus en trois mois, chacun pensé pour qu'une tâche se termine sans changement de contexte. La fiche client, par exemple, réunit sur une seule page : • les informations de compte et les adresses de facturation / livraison • L'historique des commandes avec statuts et états de paiement • Les indicateurs clés : chiffre d'affaires cumulé, panier moyen, factures ouvertes, ancienneté client • Le journal d'activité, pour tracer les dernières actions • Les actions critiques en un clic : créer une commande, réinitialiser un mot de passe, se connecter en tant que client Un système de statuts colorés permet d'identifier instantanément l'état d'une commande et de son paiement, un repère essentiel sur des écrans à forte densité d'information. L'ensemble repose sur un design system de composants documentés, livré en handoff aux développeurs pour garantir la cohérence sur les neuf modules. LE RÉSULTAT Les équipes disposent d'un outil de gestion opérationnel là où il n'en existait aucun : comptes clients, commandes, stock et facturation sont pilotés depuis une interface unique et cohérente. Durée : 3 mois, Mission réalisée en collaboration avec l'agence Galadrim.

Conception d'un back-office de gestion commerciale : fiches clients, commandes, stock et facturation, pour un distributeur de pièces automobiles en B2B.

E-commerce Websites

Database Administration

Production Engineering

Back-office e-commerce B2B - Distributeur de pièces automobiles

Respire

<h3>&nbsp;</h3><h3>1. Analyse et compréhension du contexte</h3><ul><li>Audit du site existant : navigation, clarté de l’offre, cohérence entre les valeurs de la marque et l’expérience proposée.</li><li>Étude des parcours utilisateurs : notamment autour de la découverte produit et du passage à l’achat.</li><li>Benchmark d’autres marques de cosmétiques naturelles pour identifier les bonnes pratiques en matière de transparence, storytelling et conversion.</li><li>Analyse des freins utilisateurs : surcharge d’informations, lisibilité, cohérence visuelle.</li></ul><h3></h3><h3>2. Définition des besoins et objectifs</h3>Avec l’équipe Respire, les priorités étaient de :<ul><li>Mieux mettre en avant les produits et leurs bénéfices naturels.</li><li>Clarifier la hiérarchie de l’information (gammes, ingrédients, engagements).</li><li>Améliorer la fluidité du parcours d’achat, en particulier sur mobile.</li><li>Renforcer la cohérence graphique avec l’image de marque fraîche et positive de Respire.</li></ul><h3></h3><h3>3. Phase UX : structure et expérience</h3><ul><li>Création de parcours utilisateurs simplifiés : de la découverte à la commande.</li><li>Conception de wireframes pour les pages clés (home, fiches produits, panier, blog).</li><li>Tests rapides sur la compréhension des produits et la lisibilité du contenu.</li></ul><h3></h3><h3>4. Phase UI : univers et design visuel</h3><ul><li>Définition d’une direction artistique douce et lumineuse, inspirée de l’univers naturel de la marque.</li><li>Utilisation de couleurs fraîches, de visuels aérés et d’une typographie simple pour refléter la transparence et la bienveillance de Respire.</li><li>Réalisation de maquettes Figma et d’un design system cohérent avec leur identité.</li></ul><h3></h3><h3>5. Livraison et accompagnement</h3><ul><li>Transmission des maquettes et du design system à l’équipe technique.</li><li>Suivi de l’intégration pour assurer la cohérence du rendu.</li><li>Ajustements post-lancement selon les retours utilisateurs.</li></ul>

Refonte UX/UI du site Respire : travail sur la clarté du parcours d’achat et la mise en avant des valeurs de la marque. Création d’une direction artistique douce et cohérente avec leur univers, et d’un design system complet pour assurer lisibilité, transparence et cohérence visuelle.

Refonte site e-commerce Respire

Leon & Harper

<h3>1. Analyse et compréhension du contexte</h3><ul><li>Audit du site existant : ergonomie, structure du catalogue, cohérence visuelle, tunnel d’achat.</li><li>Analyse du parcours client, notamment sur mobile (canal principal pour leurs ventes).</li><li>Étude des sites concurrents dans la mode féminine contemporaine.</li><li>Observation des retours clients et des comportements de navigation.</li></ul><h3></h3><h3>2. Définition des besoins et objectif</h3>En collaboration avec l’équipe Leon &amp; Harper :<ul><li>Mettre en avant l’identité de marque : naturelle, libre, haut de gamme.</li><li>Améliorer la lisibilité du catalogue et la mise en avant des produits.</li><li>Simplifier le parcours d’achat mobile et renforcer la cohérence visuelle entre les pages.</li></ul><h3>3. Phase UX : structure et expérience</h3><ul><li>Refonte des arborescences et filtres produits pour une navigation plus intuitive.</li><li>Création de wireframes centrés sur la découverte produit et la clarté du parcours d’achat.</li></ul><h3></h3><h3>4. Phase UI : univers et design visuel</h3><ul><li>Création d’une direction artistique inspirée de l’identité Leon &amp; Harper : chaleureuse, féminine et sincère.</li><li>Travail sur la hiérarchie visuelle et la mise en valeur des photos (élément clé dans l’expérience e-commerce).</li><li>Réalisation des maquettes Figma (desktop &amp; mobile) et d’un mini design system pour assurer la cohérence graphique.</li></ul><h3></h3><h3>5. Livraison et accompagnement</h3><ul><li>Collaboration avec les développeurs pour assurer une intégration fidèle au design.</li></ul>

Refonte UX/UI du site e-commerce Leon & Harper : accompagnement sur la restructuration du parcours d’achat et la refonte visuelle complète. Création d’une direction artistique alignée avec l’identité de marque et conception d’un mini design system pour garantir cohérence et simplicité d’évolution.

Refonte site e-commerce Leon & Harper

The bradery

<h3>1. Analyse et compréhension du contexte</h3><ul><li>Audit du site actuel (ergonomie, performances, cohérence visuelle, tunnel d’achat).</li><li>Analyse des indicateurs clés : taux de conversion, taux de rebond, parcours utilisateurs.</li><li>Benchmark des sites concurrents et des bonnes pratiques e-commerce dans la mode.</li></ul><h3>2. Définition des besoins et des objectifs</h3>Avec l’équipe The Bradery, nous avons identifié :<ul><li>Les objectifs business : augmenter le taux d’achat, fluidifier le parcours, renforcer l’image premium.</li><li>Les besoins utilisateurs : navigation plus intuitive, filtres efficaces, visuels produits mis en valeur, confiance lors du paiement.</li><li>Les contraintes techniques.</li></ul><h3></h3><h3>3. Phase UX : structure et expérience</h3><ul><li>Élaboration de parcours utilisateurs (user flows) pour les principales actions : découverte, ajout panier, commande.</li><li>Création de wireframes basse fidélité pour tester la structure des pages clés (home, fiche produit, panier, checkout).</li><li>Tests rapides pour valider la logique de navigation.</li></ul><h3></h3><h3>4. Phase UI : design visuel</h3><ul><li>Conception de maquettes haute fidélité sur Figma (desktop &amp; mobile).</li><li>Réalisation d’un design system pour garantir la cohérence visuelle sur tout le site.</li></ul><h3>&nbsp;</h3><h3>5. Livraison et accompagnement</h3><ul><li>Transmission des maquettes et du design system à l’équipe de développement.</li><li>Suivi de l’intégration pour assurer la fidélité du rendu final.</li></ul>

Refonte du site e-commerce The Bradery : accompagnement complet de la marque sur la refonte UX/UI du site. Refonte du parcours d’achat, création d’un design system et de maquettes Figma alignées avec leur univers mode/lifestyle, dans une logique d’optimisation de conversion et de cohérence de marque.

Maureen Renaud

UX UI Designer

À propos

Expérience de travail

UX UI Designer

Designer d’expérience utilisateur

Stagiaire Webdesigner

Webdesigner

Formation

IIM Digital School

Epitech Digital School

Portfolio