Mr. Jardinage est un réseau de magasins adhérents spécialisés dans le matériel de jardinage. Pour continuer leur croissance, ils ont décidé de faire une refonte complète de leur site. Le projet livré est un e-commerce Wordpress / WooCommerce.


Visiter le site

Des changements ont pu être fait par rapport aux captures d’écran présentées dans cette étude de cas.


Mon rôle :

Charte graphique de mr jardinage

Charte graphique et icônes

Les couleurs, logos et polices de caractère étaient clairement définis : CoconOT pour les titres et Din pour les textes. J’ai juste procédé à un changement pour les textes. Après tests dans le navigateur, le gris typographique de la Din me paraissait trop clair. Cela aurait nuit à la lisibilité du contenu. J’ai cherché une alternative et j’ai choisi la Hind Regular. Elle offre un meilleur gris typographique, est plus condensée donc occupe moins de place sur les éléments d’interface (utile dans le responsive) et s’accorde bien à la CoconOT grâce à une hauteur de x et une largeur très proche.

Différence entre Din et Hind

Glyph Icon par WebHostingHub

Choix des icônes

J’ai choisi le pack créé par Web Hosting Club parce que les icônes de ce set sont très arrondies, très douces. L’enseigne se veut proche de ses clients, rassurante et ces icônes aident à transmettre ce sentiment grâce aux formes douces et arrondies.


La barre de navigation

Le site est à la fois un site vitrine avec des pages de contenu et un e-commerce où l’utilisateur doit pouvoir accéder au produit qu’il cherche sans difficulté.

Pour une structure plus claire, j’ai séparé la navigation en deux barres distinctes : les items vers des pages “branding” dans une première barre et tous les items liés à l’expérience d’achat dans une autre. La mascotte dépasse légèrement pour lier ces deux barres ensemble.

Navigation responsive

Je ne suis pas du tout fan du menu hamburger. Il cache du contenu donc les utilisateurs peuvent potentiellement passer à côté comme le montre cette étude (en anglais) qui confirme le manque d’intérêt pour la nav’ quand on la cache.
En guide de solution pour la navigation sur mobile, j’aime beaucoup le choix du scroll horizontal. C’est léger à implanter, on laisse le contenu dans son état naturel et on laisse la taille de l’écran gérer le nombre d’items qu’il peut afficher. Si j’ai un mobile qui fait 320 pixels de large, je n’aurai qu’un ou deux items sous les yeux. Si j’ai une tablette de 600 pixels de large, je verrai plus d’items, … Il faut penser à suggérer le scroll par un effet de bordure (ici, un fondu en dégradé sur le bord droit) pour améliorer son utilisabilité.

La barre d’achat

Nous avons ici l’accès aux rayons via un bouton, une barre de recherche bien mise en évidence, l’accès à Mon compte et au panier avec un indicateur visuel.


La zone d’actualité

Comme tout projet de e-commerce (voir site web tout court), il y a toujours la demande du carrousel qui finit par arriver. Les carrousels ne marchent pas, c’est problématique pour du contenu à la une. À partir de là, il y a un travail de pédagogie pour expliquer que même si ils sont présents sur la plupart des sites, ils ne fonctionnent pas. Puis il y a un travail de design pour tenter d’apporter une solution à la problématique de départ : promouvoir du contenu ou des produits dans un minimum de place.

Comme vous pouvez le voir au dessus, j’ai proposé un système de cartes. Les cartes font partie des meilleures alliées en conception d’interface. Elles se scannent rapidement et ne prennent que peu de place. Placées dans une zone chaude, l’utilisateur ne peut pas les rater contrairement à une diapo de carrousel.


Page categorie

Guides d’achat

J’ai réutilisé la zone de promotion pour mettre en avant les différents guides d’achat. Là aussi, j’ai opté pour un système de carte.

Navigation secondaire

À côté de la grille de produit, j’ai placé un menu de navigation pour parcourir plus facilement les sous-catégories. L’utilisateur peut ainsi rester pleinement concentrer sur sa recherche.

Micro-interaction

L’utilisateur peut ajouter un produit au panier sans consulter la page produit. J’ai conçu en CSS une micro-interaction pour améliorer le sentiment de fluidité dans l’expérience d’achat.


Page produit


Page panier

Dans cette page, il s’agit de rassurer l’utilisateur pour le pousser à l’action. C’est pour cela que j’ai proposé d’ajouter au dessus du panier trois arguments rassurants.


Le blog

Accueil du blog et catégories

Page article



Crédit du projet


Visiter le site

Des changements ont pu être fait par rapport aux captures d’écran présentées dans cette étude de cas.