Green Market
Une expérience e-commerce bio pensée de A à Z : deux thèmes, une identité cohérente, des parcours prêts pour la conversion.
La vision : Green Market est un concept d'application e-commerce dédiée au marché bio et aux produits responsables. La cible : des utilisateurs sensibles au naturel, à l'origine des produits et à une expérience d'achat apaisée. L'enjeu n'est pas de corriger un existant, mais de produire une vision aboutie : une interface complète, cohérente et prête à être présentée.
Les contraintes assumées : mobile-first, accessibilité (contraste, lisibilité), et double thème (mode clair / mode sombre) pour répondre aux usages réels et aux préférences de confort. L'objectif est de démontrer la capacité à livrer une DA cohérente, un design system maîtrisé et deux déclinaisons qui conservent la même hiérarchie visuelle et la même identité green, sans compromis sur la conversion ni sur l'accessibilité.
La Réponse Design
1. Architecture de la liste produits
Grille deux colonnes, cartes produit épurées : image, nom, notation, prix et CTA d'ajout au panier. La densité est calibrée pour permettre une exploration rapide tout en gardant les informations essentielles visibles. Le libellé « 235 articles trouvés » et le lien « Effacer ma recherche » offrent un feedback immédiat sur l'état du filtre.
2. Système light/dark maîtrisé
Deux palettes cohérentes : mode clair (fond blanc/beige, vert foncé, accents naturels) et mode sombre (fond anthracite, vert clair, contrastes préservés). La hiérarchie typographique et les zones d'action restent identiques d'un thème à l'autre, garantie de lisibilité et d'accessibilité.
3. Tri et filtres accessibles
Boutons « Je veux trier par » et « Je veux filtrer » placés en évidence, avec menu déroulant (Prix croissant, Prix décroissant, Meilleures notes, Nouveautés). Le parcours est pensé pour que l'utilisateur affine sa sélection sans quitter la liste, en un minimum de taps.
4. Cartes produit et CTA
Prix mis en avant, icône panier verte pour l'ajout direct. Les badges et étoiles renforcent la confiance (bio, notation). Chaque carte est conçue pour un usage réel : scan rapide et action en une fraction de seconde.
Avant & après
Mode clair et mode sombre : deux déclinaisons d'une même interface, pensée pour le confort de lecture et l'identité green.
Lisibilité
Hiérarchie visuelle claire et contrastes maîtrisés en mode clair comme en mode sombre.
Confort light/dark
Deux déclinaisons cohérentes pour s'adapter aux préférences et usages (jour/nuit, accessibilité).
Identité green
Interface alignée avec les valeurs bio : naturel, confiance et parcours orientés conversion.