Etablissements Deloffre

Étude de cas de site e-commerce

La Maison Deloffre est une marque spécialisée dans la vente d’instruments d’écriture, de stylo plume, roller, crayon, porte-mine etc. Depuis plus d’un siècle, la boutique s’efforce de proposer des produits de qualité à travers différentes marques dont Faber-Castell, Pilot ou encore Lamy. La Maison Deloffre met également à disposition de ses clients des produits plus ou moins variés, notamment une large gamme de carnets à dessins, de carnet de voyage et de soldats de plomb par exemple.

Objectifs

Design & prototypage

Sachant qu’il a fallu refondre l’ensemble des pages du site et en créer des nouvelles, nous avons utilisé Adobe XD et Figma pour mettre en place la structure et le design du nouveau site. L'objectif était de mettre en place un design d’interface qui soit intuitif, notamment pour les personnes les plus âgées qui représentent la majorité de la clientèle de Deloffre.

L’UX/UI a donc été développé de sorte à ce que les utilisateurs puissent facilement trouver ce dont ils ont besoin. Les catégories les plus recherchées ont été mises en avant sur la page d’accueil et des filtres ont été ajoutés sur les listes des produits.

Nous nous sommes donc appuyés sur les attentes des utilisateurs pour mettre en place les filtres :

  • Prix
  • Marques
  • Lieu de fabrication

Une section “sélection de la maison” accessible dans le menu a été développée pour permettre au plus connaisseur de découvrir les nouveautés et les produits d’exception d’actualité. Sur cette section, le rendu est plus sombre, plus sobre et donne un côté plus luxueux au site.

Développement & CMS

Une section “sélection de la maison” accessible dans le menu a été développée pour permettre au plus connaisseur de découvrir les nouveautés et les produits d’exception d’actualité. Sur cette section, le rendu est plus sombre, plus sobre et donne un côté plus luxueux au site.

Pour cela, nous avons développé une administration lui permettant de gérer facilement et rapidement les produits de son e-commerce. Il a donc la main sur plusieurs éléments :

  • Le stock des produits
  • L'ajout de nouveaux produits
  • Les catégories de produits
  • Les couleurs des produits
  • Les descriptions
  • Les tailles de plumes
  • Les reccommandations en bas de page
  • Les prix
  • Les lieux de fabrication
  • Envoi de mail de confirmation
  • Les utilisateurs inscrits

Intégration

L’intégration des maquettes s’est faite entièrement à la main pour proposer une expérience utilisateur performante. Que ce soit en termes d’accessibilité, de responsive et de vitesse de chargement. Nous nous sommes engagés à proposer un code qui soit le plus propre possible en évitant les templates et les kits UI. L’intégration HTML, CSS et JS a été axé sur l’expérience utilisateur avant tout.

Pour assurer une cohérence graphique, un design system a également été créé afin de mettre en place facilement de nouvelles pages et de nouveaux designs de page.

Des petites fonctionnalités ont été ajoutées pour optimiser l’expérience client, notamment un compte utilisateur facilement éditable, une liste de produits favoris et une possibilité de contacter la Maison Deloffre à tout moment.

Optimisation & analyse de données

Pour obtenir des informations sur les utilisateurs et optimiser les conversions sur le long terme, des outils d’analyse ont été installés, notamment Google Analytics et Hotjar.

Google Analytics

Chaque bouton des pages produit est tracker, nous permettant de savoir quand les utilisateurs cliquent sur un bouton d’ajout au panier. Plusieurs balises de tracking ont été mises en place, notamment sur les liens situés sur la page d’accueil, sur les différentes étapes du tunnel d’achat et sur les listing produits.

Ainsi, cela nous permet d’avoir un retour clair sur le taux de conversion de chacun des produits et de chacune des fonctionnalités du site. Il est donc facile de savoir lequel des produits est le plus populaire et si les fonctionnalités de filtres sont plus ou moins utilisées.

Des rapports personnalisés ont également été créés sur le dashboard de Google Analytics, ce qui nous permet de voir très rapidement les produits qui ont été vendus, en fonction de différentes données démographiques, de la date, des pages, du trafic, de la zone géographique, etc.

Hotjar

L’outil Hotjar nous permet de tracker les sessions des utilisateurs et de les relire à la manière d’une vidéo. L’outil enregistre les sessions des utilisateurs et génère des heat maps.

Cela nous permet donc de savoir :

  • où les utilisateurs cliquent
  • où les utilisateurs passent leur souris
  • jusqu’où les utilisateurs scrollent sur les pages

Hotjar nous permet d’identifier les potentiels bugs, les incompréhensions des utilisateurs et de voir si les utilisateurs utilisent comme il se doit l’interface.