Retail · E-commerce B2C · Expérience en point de vente.
Un guide de recommandation produit intégré en rayon, qui guide l'acheteur de A à Z.
Le contexte
Un acteur de la nutrition animale disposait d'une gamme de plus de 100 références — avec des critères de segmentation complexes : espèce, âge, race, poids, sensibilités, stérilisation. Aucun catalogue structuré n'existait. Les acheteurs en animalerie choisissaient au hasard, souvent mal conseillés, avec un fort taux de retour ou d'insatisfaction. La réponse marketing imaginée : une "tête de gondole digitale" — un rayon entièrement brandé, avec décoration physique, QR code bien visible et produits mis en avant. En scannant le code, l'acheteur accède à un guide de recommandation personnalisé qui l'amène au bon produit, dans les bonnes conditions, sans expertise préalable.
Ce que j'ai construit
Une application web de type Product Finder : un guide interactif qui pose des questions simples, dans le bon ordre, et affine la sélection en temps réel. Toute la logique de filtrage est exécutée côté client (Pinia), sans appel réseau pendant le questionnaire — ce qui garantit une fluidité totale même sur mobile et avec une connexion instable. La plateforme embarque également un dashboard de suivi des interactions : chaque clic, chaque parcours et chaque recommandation déclenchée sont tracés et remontés vers un backend NestJS dédié, pour donner aux équipes marketing une vue précise de ce que les acheteurs cherchent vraiment en rayon.
Mon Rôle
Conception de l'architecture frontend et backend, développement du moteur de recommandation dynamique (Pinia), intégration des données produits et des règles métier, développement du système de tracking et du dashboard de statistiques (NestJS + petite base de données), conteneurisation Docker.
Architecture technique
| Couche | Technologie |
|---|---|
| Framework frontend | Nuxt 3 · Vue 3 (Composition API) |
| State management | Pinia (filtrage 100% client-side) |
| Typage | TypeScript strict |
| Utilitaires | VueUse |
| Backend analytics | NestJS · TypeScript · PostgreSQL |
| Dashboard stats | Graphiques en temps réel · exports |
| CI/CD & déploiement | Docker · GitLab CI/CD · gestion des branches et MEP |
Défis techniques
Moteur de recommandation multicritères : Traduction de règles métier complexes (croisements espèce × âge × sensibilités) en un filtrage instantané côté client.
Usage en rayon, sur mobile, sans connexion stable : Architecture offline-tolerante, temps de réponse sous 100ms, aucun chargement pendant le parcours.
Tracking granulaire sans friction UX : Chaque interaction est capturée de façon transparente et envoyée au backend NestJS sans jamais ralentir l'interface.
Dashboard marketing exploitable : Les données de navigation sont agrégées et présentées sous forme de graphiques permettant d'identifier les questions qui bloquent et les produits les plus recommandés.
Données produits maintenables sans développeur : Structure JSON centralisée permettant d'ajouter une référence ou modifier des critères sans toucher au code de l'interface.
Pipeline GitLab CI/CD : Build Docker déclenché automatiquement sur chaque push. Les branches dédiées (develop, staging, production) pilotent les déploiements — du merge à la MEP sans intervention manuelle.
Problèmes résolus
| Avant | Après |
|---|---|
| Aucun catalogue structuré, achat au hasard en rayon | Guide de recommandation en rayon via QR code → achat guidé, confiant, adapté au profil |
| Trop de produits, aucune aide au choix en magasin | Parcours en questions simples → la bonne référence en moins de 2 minutes |
| Abandon du questionnaire faute de fluidité sur mobile | Filtrage client-side instantané → zéro latence, zéro abandon lié à la lenteur |
| Aucune visibilité sur ce que les acheteurs cherchent vraiment | Dashboard analytics temps réel → données comportementales exploitables par le marketing |
| Catalogue difficile à maintenir sans développeur | Données centralisées en JSON → mise à jour autonome par les équipes produit |
Résultats
"L'acheteur arrive au bon produit en moins de deux minutes, depuis un QR code en rayon, sans expertise préalable. Les équipes marketing disposent d'un dashboard de statistiques pour mesurer l'efficacité du rayon et affiner les recommandations. La solution fonctionne parfaitement sur mobile, sans connexion stable, et ne nécessite aucune intervention technique pour mettre à jour le catalogue."
En chiffres
+100 produits filtrables en temps réel
6 critères de segmentation croisés
Zéro appel réseau pendant le questionnaire
Tracking de chaque interaction → dashboard analytics
Accessible en rayon via QR code sur mobile
Pour vous
Vous avez une gamme de produits complexe qui décourage vos clients au moment du choix ? Un rayon qui n'est pas exploité à son plein potentiel ? Vous voulez des données sur ce que vos acheteurs cherchent réellement en magasin ? Ce type d'outil s'applique à toute gamme nécessitant un accompagnement à la décision : nutrition, équipements, produits de santé, solutions B2B.