M&J Fromagerie

design UXUI ecommerce accessibilité

Description du Projet

Ce projet, réalisé durant le deuxième semestre du BUT MMI (S4), consistait à concevoir et développer de A à Z un site e-commerce fictif pour une fromagerie artisanale baptisée M&J Fromagerie. L’objectif pédagogique était de simuler une commande réelle en prenant en charge l’intégralité du cycle de conception : définition de la proposition de valeur, réflexion sur l’expérience utilisateur, développement front-end et intégration des bonnes pratiques ergonomiques. Le contexte de départ était celui d’une fromagerie souhaitant valoriser ses produits artisanaux à travers une expérience d’achat agréable et accessible.

J’ai commencé par définir la proposition de valeur : rendre l’achat de fromages d’exception accessible et agréable en ligne, en mettant en avant l’authenticité et le savoir-faire artisanal. Cette réflexion m’a amené à concevoir les fonctionnalités essentielles : un catalogue filtrable par type de fromage et par allergènes, un système de paniers personnalisés, un tunnel de commande en trois étapes clairement indiquées, et un mode accessibilité intégrant grands caractères et fort contraste pour les utilisateurs ayant des besoins spécifiques.

Sur le plan ergonomique, j’ai conduit une analyse approfondie des frictions typiques d’un parcours e-commerce, en m’appuyant sur l’étude de sites existants. J’ai mis en place des feedbacks visuels systématiques : une notification toast lors de l’ajout au panier, une animation sur l’icône panier, et des erreurs de formulaire signalées de façon claire et contextualisée. Un indicateur de progression visible à chaque étape du checkout situe en permanence l’utilisateur, et j’ai intégré un skip link pour la navigation au clavier, traduisant une prise en compte réelle de l’accessibilité.

Côté référencement, j’ai travaillé l’optimisation SEO en structurant correctement les balises meta, les titres et le maillage interne, afin que le site soit techniquement prêt à être indexé efficacement.

Enfin, j’ai cartographié le parcours utilisateur complet, en identifiant les points de contact, les moments de satisfaction (promotions, produits phares) et les points de friction, notamment la vérification de la zone de livraison et le choix entre livraison à domicile et click & collect. Ce travail, nourri par une étude préalable de sites e-commerce du secteur alimentaire, m’a permis de construire un parcours fluide, guidé et rassurant.
HTML

HTML

CSS

CSS

JavaScript

JavaScript

Tailwind CSS

Tailwind CSS

Apprentissages Critiques associés

  • AC22.01 — Co-concevoir un produit ou un service
  • AC22.02 — Produire une recommandation ergonomique à partir des tests utilisateurs
  • AC22.04 — Optimiser le référencement d’un site web, d’un produit ou d’un service
  • AC21.04 — Identifier et décrire les parcours client à partir d’enquêtes de terrain
  • AC21.05 — Cartographier les expériences utilisateur : points de contact, points de friction et de satisfaction, carte d’empathie