Mr. Jardinage

Design et intégration d’un Ecommerce sous Wordpress

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.

Sur ce projet, j’ai utilisé toute mes compétences : UX design, UI design et intégration CSS.


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.

Din et Hind

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.


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 qui pourrait intéresser les utilisateurs mais comme ils ne l’ont pas sous le nez, seuls les curieux ou motivés iront voir ce qui se cache derrière ce bouton. Je vous invite à lire 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 verrais 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.

  • Le bouton “Nos produits” est ici un exemple où l’utilisation d’un bouton faisant apparaître la navigation est pertinent. On se trouve sur un site de jardinage, l’utilisateur sait quels genres de produits il va pouvoir y trouver. Si il désire parcourir les rayons pour trouver ce qu’il souhaite plutôt qu’utiliser la recherche, le bouton est suffisamment mis en évidence pour suggérer son utilisation. Il n’y avait aucune raison pour utiliser plus de place pour la navigation des produits, d’autant plus que l’on trouve une navigation secondaire à côté de la grille de produits.
  • La barre recherche est visible partout et occupe une grande parti de la place disponible (toute la largeur sur mobile et tablette) parce que c’est une fonction essentielle sur un e-commerce et que cela renforce son affordance. Le site se charge, vous recherchez, vous trouvez. L’expérience est fluide; il n’y a pas besoin de balayer l’écran pour chercher le bouton avec l’icône d’une loupe.
  • L’accès au panier ainsi qu’à la page mon compte se place naturellement dans cette barre puisque ces actions concernent la partie e-commerce du site. Ces boutons sont bien visibles grâce à la force d’attraction du bouton nos produits et la barre de recherche.

La zone d’actualité

Comme tout projet de e-commerce (voir même de site web), il y a toujours la demande du carrousel qui finit par arriver. Les carrousels ne marchent pas, c’est un fait. À 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 catégories

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 mis en page dans une 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


Page 404


Visiter le site (des changements ont pu être faits par rapport aux captures d’écrans présentes dans cet article)

Crédit du projet

  • Design et intégration CSS : Moi-même
  • Marketing et développement Wordpress / JS : Expertinbox