DARÜ.
Mon Rôle
Unique Référent Web (Autonomie totale)
Mes Outils
Figma, PrestaShop, Elementor, Claude (MCP)
Le Client
Darü Local Clothing
La Durée
1 An (Alternance)
Optimiser la conversion d'une marque littorale.
Darü Local Clothing est une marque de prêt-à-porter écoresponsable créée en 2024 à Brétignolles-sur-Mer, profondément ancrée dans la culture glisse vendéenne. Afin de lier son catalogue d'une centaine de références à la passerelle de caisse physique KerAwen pour synchroniser les stocks, l'entreprise a migré de WordPress vers PrestaShop.
L'audit du tunnel d'achat initial a mis en évidence des frictions bloquant la conversion : le parcours d'achat était excessivement long et segmenté, les formulaires comportaient trop de champs obligatoires et l'obligation de créer un compte client bloquait l'achat rapide en mode "invité".
Face à la rigidité des templates natifs de commande de PrestaShop et au besoin impératif de maintenabilité pour le fondateur, j'ai réorienté l'effort UX/UI vers des zones modulables stratégiques : la page d'accueil et la valorisation visuelle des fiches produits en production.
Objectifs du Projet
Objectifs Qualitatifs (UX)
- Harmoniser le site avec l'identité rouge littoral du point de vente physique.
- Optimiser le confort de lecture et l'adaptabilité sur tous les écrans.
- Remonter tous les éléments clés de conversion au-dessus de la zone de flottaison.
Objectifs Quantitatifs & Opérationnels
- Normaliser et optimiser les 100+ visuels du catalogue au format WebP.
- Automatiser la production de contenus SEO (méta-titres/descriptions) du catalogue.
- Livrer et déployer l'intégralité de la refonte pour la fin juillet.
Mon processus de conception.
Mener ce projet en totale autonomie en tant qu'unique référent web de l'entreprise m'a imposé d'adopter une méthodologie de terrain structurée pour lier pertinence ergonomique et faisabilité technique.
J'ai réalisé une analyse comparative des concurrents locaux (64, Phare Ouest 17, South West, Cherwood). Je me suis particulièrement concentré sur la structure de la fiche produit de la marque 64, également sous PrestaShop, pour étudier leur gestion des déclinaisons de tailles, de couleurs et des stocks afin de concevoir un sélecteur fluide et de rationaliser notre propre fiche produit.
J'ai réorganisé complètement l'arborescence de stockage des fichiers sources en calquant sa structure sur le menu principal (Homme, Femme, Accessoires). J'ai également configuré de nouvelles sous-catégories dans le back-office (bobs, sacs, chapeaux) afin d'enrichir l'offre et de faciliter la maintenance pour mon responsable.
J'ai appliqué une méthodologie d'intégration Desktop First dictée par l'interface d'Elementor pour PrestaShop, qui impose de concevoir la structure générale sur ordinateur en premier. J'ai toutefois anticipé la déclinaison smartphone en concevant mes sections avec des conteneurs fluides qui s'adaptent naturellement aux réductions d'écrans.
Image d'une page produit du site 64 (Benchmark)
Interfaces et Arbitrages de Production.
1. Conception Graphique (Figma)
J'ai conçu un Kit UI structuré (typographies Snug Variable pour les titres et Roboto pour le corps, styles de couleurs rouge littoral et variants interactifs de boutons en survol). J'ai maquetté l'ossature fonctionnelle de la Home minimaliste pour raccourcir le parcours client, et de la page "Notre Histoire" structurée sous forme de grille Bento.
Styles globaux de textes et de couleurs sur Figma
Maquette Home
Maquette Notre histoire
Maquette Figma de la section ADN
2. L'intégration visuelle et le Kit UI
Intégration et nettoyage front-end de l'iframe Google Maps pour isoler les avis clients
Arborescence des fichiers d'images produit converties au format WebP
Interface de configuration du module de cartes cadeau
Tableau d'analyse de l'audit SEO du catalogue produit
Interface de la nouvelle page d'accueil en production
Nouvelle disposition de la fiche produit après optimisations
Arbitrages et Contournements Techniques
Section ADN :Sur Figma, j'avais dessiné une mise en page asymétrique où l'image débordait des marges. En production, pour préserver la maintenabilité future et le calendrier, j'ai simplifié la structure via un format encadré (boxed) classique, alignant proprement un bloc d'image carré et un bloc de texte sans code CSS complexe.
Intégration Google Avis :Suite à un bug de l'API Google Places qui surfacturait l'entreprise, j'ai coupé la liaison et développé une alternative gratuite. J'ai récupéré l'iframe Google Maps de la boutique et, aidé de Claude, j'ai nettoyé le CSS de l'iframe pour masquer la carte et n'afficher que le bloc des avis textuels.
Zone de flottaison produit :L'agencement initial du site repoussait les éléments de conversion tout en bas de la page. J'ai réorganisé l'ordre des blocs natifs dans le back-office et écrit quelques lignes CSS ciblées pour remonter le titre, le prix, la taille et le panier tout en haut de l'écran, au-dessus de la ligne de flottaison.
Gestion du cache :J'ai dû composer au quotidien avec un bug technique lié à Elementor sur PrestaShop : les modifications sauvegardées ne s'appliquaient pas en production. J'ai été contraint de vider manuellement et systématiquement le cache de performance de PrestaShop après chaque modification pour contrôler mon travail.
Intégration finale de la section ADN sur le site
Validation & Indicateurs.
Indicateurs de réussite opérationnels
Performance Média
Plus de 100 images normalisées (1000 × 1250 px) et converties au format WebP pour accélérer considérablement la vitesse d'affichage des pages du catalogue de Darü.
SEO Automatisé
Intégration des métadonnées (meta-titles et descriptions) du catalogue entièrement automatisée en connectant Claude à PrestaShop via le protocole MCP, évitant des saisies manuelles lourdes.
Omnicanalité Validée
Implémentation d'une extension de cartes cadeaux robuste, synchronisée avec la caisse KerAwen pour lever toute rupture de parcours et planifier l'envoi automatique.
Johnny Fort (fondateur) a validé immédiatement l'ensemble des choix graphiques et ergonomiques présentés par jalons (charte graphique, zoning, wireframes, maquettes). La passation finale et la formation en direct à l'atelier lui permettent de gérer et de maintenir l'ensemble du catalogue de manière totalement autonome.
Le Design est Solide quand la structure est invisible.
Cette année d'alternance m'a appris le pragmatisme face aux contraintes économiques d'un CMS rigide comme PrestaShop, ainsi que l'importance cruciale de la réactivité au sein d'une petite structure pour contourner les imprévus de production.
Sur le plan méthodologique, j'assume une auto-critique : j'ai fait le choix de ne concevoir que le format ordinateur sur Figma pour la Home, ce qui a surchargé ma réflexion visuelle lors de l'intégration responsive sur Elementor. À l'avenir, je veillerai à concevoir systématiquement le format smartphone en amont.