Plateforme e-commerce SCAR

Concrétiser une nouvelle ambition

Après une AMO, que nous avons réalisée, pour définir la pertinence de se lancer dans le e-commerce, la coopérative SCAR n’attendait plus que le site Internet pour se lancer. Si vous n’avez pas suivi la première partie de ce projet, SCAR est, en France, le plus grand réseau de distribution de matériel agricole. Jusqu’ici, sa cible était ses magasins adhérents. Désormais, la coopérative ajoute une corde à son arc en projetant un e-commerce s’adressant directement aux agriculteurs et éleveurs.

Place donc au concret.

Une approche structurée pour des enjeux considérables

SCAR a décidé de nous faire confiance pour la seconde étape de ce grand projet : la concrétisation grâce à un portail de commerce en ligne. Cette phase de réalisation a suivi une méthodologie bien rodée à l’Agence :

• conception fonctionnelle et technique,
• maquettes graphiques,
• tests utilisateurs,
• développement front-end et back-end,
• recettage et implémentation des contenus.

Bien que la méthodologie soit habituelle, la dimension de ce projet l’était beaucoup moins. Les enjeux étaient considérables. Dans un premier temps, la plateforme e-commerce devait être capable de recenser 4.000 références, pour, dans un autre temps, pouvoir en référencer jusqu’à 100.000 (au moins…).

Des expertises complémentaires au service du projet

Conception

La phase de conception a été entamée dès l’AMO puisque nous avions commencé à produire des wireframes. C’est Alizée, designer UX/UI qui s’en est chargée et qui a continué ce travail jusqu’à créer une quinzaine de wireframes, sans compter les déclinaisons liées au parcours client.

Ces wireframes se sont largement inspirés des conclusions obtenues en phase d’AMO : proposer des choses simples, avec les fonctionnalités les plus adaptées à la cible et le maximum d’éléments de réassurance. En effet, les agriculteurs ne semblent pas particulièrement motivés par la fidélisation envers une enseigne lorsqu’ils passent une commande. Le facteur prix et la disponibilité du stock sont les principaux moteurs dans l’acte d’achat. C’est pourquoi la page produit représente un réel enjeu pour la conversion client. Alizée s’est donc concentrée à apporter le maximum de précisions utiles à la cible sur ce type de page : le prix, le nombre de pièces disponibles en stocks, les dimensions, la précision de s’il s’agit d’une pièce adaptable ou d’origine, le schéma éclaté du produit, etc. Ce sont autant d’éléments qui permettent aux clients d’obtenir toutes les informations importantes très rapidement et de se projeter.

Mais l’enjeu ne s’arrête bien sûr pas à la page produit. La suite du parcours client doit rester fluide. C’est pour cela qu’une attention particulière a été portée à l’étape de la commande. Toujours dans une logique de faire simple : la création de compte n’est pas du tout imposée, le minimum de champs de complétion a été créé, la sélection du lieu de livraison se veut claire, etc.

Direction Artistique et Webdesign

Pour la direction artistique choisie, Alizée s’est basée sur les quelques éléments graphiques déjà existants : le logo et les couleurs présentes sur les catalogues SCAR. De toute façon, la règle retenue de la phase de recherche utilisateurs était de proposer une interface simple et épurée afin de se concentrer sur une navigation claire.

Le projet était d’une ampleur telle que nous ne pouvions pas de nouveau intégrer Justine, UX Researcher, à cette partie. En effet, elle a avait produit une grosse étude utilisateurs en phase d’AMO ; mais cette fois elle a dû animer des tests utilisateurs sur les maquettes finales. C’était une façon, pour nous, de nous assurer que l’expérience des usagers avait bien été prise en compte en phase de conception et que les agriculteurs et éleveurs se retrouvaient bien dans l’approche du site e-commerce SCAR. Justine a pu en tirer quelques points à perfectionner. Une fois ceux-ci pris en compte par Alizée, les maquettes étaient donc validées. Ne restait plus “qu’à” développer.

Développement web : création de la partie CMS

S’il y avait bien un principe à garder en tête tout au long du projet, c’était celui-ci : faire simple et efficace. Simple, car SCAR se lançait sur un nouveau marché, et un tout autre métier du commerce en ligne, avec un besoin de maîtriser parfaitement le budget de lancement. Nous avons essayé d’appliquer ce principe au développement du site également. C’est pourquoi nous allons un peu plus rentrer dans le détail pour les prochaines étapes. Accrochez-vous quand même, nous y parlons en particulier de développement back-end.

Pour cette partie, nous avons choisi de travailler avec Sylius, sous le framework Symfony. Les raisons de ce choix sont explicitées dans l’étude technique de l’AMO.

Sylius nʼintègre pas de partie CMS. Heureusement, il dispose de deux bundleskits très utiles pour pallier cela : Resources et Grid. Ces deux bundles contribuent à la notoriété de Sylius auprès des développeurs Symfony car ils répondent à une problématique récurrente : éviter de réinventer la roue quand il sʼagit de mettre en place du CRUD (Create, Read, Update, Delete ; en français créer, lire, mettre à jour, supprimer).

Quʼil sʼagisse dʼune page, dʼun article de blog ou dʼun produit, il est indispensable de pouvoir effectuer ces fonctions de base sur ces types de données. Cʼest là toute la force du ResourceBundle : il suffit de créer notre entité (ex. : une Page) puis de la déclarer au ResourceBundle dans un fichier de configuration. Le bundle prend la relève et crée automatiquement tous les éléments nécessaires pour établir les quatre opérations de base sur la nouvelle entité. Ne reste alors plus quʼà déclarer les routes (les URL vers lesquelles pointer) pour accéder à la ressource souhaitée en back-office et en front- office.

Le bundle Grid permet de mettre en place facilement une liste de nos entités avec des filtres, des tris de colonne et une pagination. Des éléments que lʼon retrouve systématiquement dans un back-office. Encore une fois, on ne réinvente rien et on simplifie le développement pour pouvoir se concentrer sur la logique métier.

Spécificités e-commerce pour SCAR

Côté e-commerce, bon nombre de développements ont été réalisés et ce REX deviendrait trop long si nous devions rentrer dans les détails pour chacun dʼentre eux. Nous reviendrons sur certains de ces sujets dans un autre article. Cependant, voici une liste non exhaustive des développements que Kévin, développeur back-end, a notamment réalisés et qui illustrent la diversité des cas de figure à prendre un compte dans la mise en place d’un e-commerce si conséquent :

• ajout dʼune surcouche au client HTTP dédié aux appels à lʼAPI de lʼERP,
• création des commandes CLI dédiées à lʼimport des données exportées par le PIM,
• ajout de la gestion des marques,
• intégration dʼun système de notification pour signaler le retour dʼun produit en stock,
• gestion du prix unitaire pour les produits vendus en lot,
• prise en compte de lʼécotaxe pour les produits concernés,
• ajout de la possibilité de sauvegarder le panier,
• ajout dʼun moteur de recherche basé sur ElasticSearch (via ce plugin),
• ajout automatique dans le panier dʼun service de montage pour les produits dont cʼest obligatoire,
• ajout de la possibilité dʼajouter en complément un service de montage pour les produits pour lesquels cʼest optionnel,
• ou encore l’intégration de la possibilité de choisir un point de vente SCAR comme point de livraison.

Un des points essentiels de la réalisation de cette boutique en ligne a été le tunnel de commande. Celui proposé par défaut ne convenant pas au besoin de SCAR, il a fallu le revoir. Encore une fois, Sylius fait bien les choses puisquʼil utilise le bundle Winzou State Machine, un outil qui permet de définir des états, des transitions entre les états et des callbacks. Grâce à cet outil, il est possible de personnaliser le tunnel de commande. Note des développeurs : depuis la version 1.13, Sylius privilégie lʼusage du bundle Symfony Workflow à la place de celui de Winzou.

Nous avons retiré la possibilité de sauter les étapes de choix de la méthode de livraison et du moyen de paiement. Lʼétape pour saisir les adresses de livraison / facturation a été fusionnée avec lʼétape du choix de la méthode de livraison. Nous avons aussi ajouté la possibilité, pour lʼutilisateur non connecté, de se créer un compte une fois sa commande finalisée, pour ainsi lui éviter de ressaisir les données déjà entrées lors de son achat. Il ne lui reste ainsi plus quʼà se créer un mot de passe.

L’enjeu du store locator

En parallèle, le développement front-end a été pris en charge par Manu, lead développeur front-end. S’il y a bien un point sur lequel il a dû s’attarder, c’est celui du store locator, c’est-à-dire une carte permettant de localiser les différents points de vente adhérents SCAR.

Avec cette fonctionnalité, le but était ici de montrer à quel point le réseau SCAR est développé en France. C’est finalement un véritable élément de réassurance pour l’utilisateur : il y aura toujours un point de vente relativement proche de chez lui. Pour rappel, il en existe plus de 400 actuellement, mais ce nombre peut être amené à augmenter dans les années à venir. C’est là qu’il faut prendre en compte plusieurs difficultés. Plus il y a de lieux à montrer, plus la fonctionnalité est lourde à charger et ralentit une page. De même, la lisibilité peut être compromise si l’affichage est mal pensé.

Ces risques, Manuel les a pris en compte dans son développement. Pour les pallier, il a, par exemple, fait en sorte que la carte ne s’affiche, en termes de requête, qu’une fois que le reste de la page est affiché. L’utilisateur peut ainsi déjà accéder à la recherche de sa ville sans avoir à attendre que la carte se charge. Soyez rassuré : l’affichage reste néanmoins très rapide. Aussi, quand une recherche localisée est lancée – via un champ en auto-complétion -, seuls les résultats inclus dans un périmètre défini sont proposés. Cela permet d’alléger visuellement la carte et de proposer à l’utilisateur une liste plus détaillée des points de vente, à gauche de la carte.

Des filtres ont également été mis en place sur ce store locator pour répondre toujours au mieux aux besoins des clients : service de montage, relais, distributeur de la marque Farmanip, etc. Le tout a été de structurer la fonctionnalité de sorte à la rendre la plus efficace possible.

Ce store locator est enfin utilisé à l’étape de la commande. C’est donc une fonctionnalité unique, adaptée à deux contextes d’usage. Par exemple, si un client sélectionne un produit qui nécessite un montage en point de vente, la carte aura appliqué ce filtre automatiquement. Cela est possible grâce à la connexion avec l’API conçue en phase de développement back-end. À cette étape, le store locator permet de sélectionner le point de vente concerné par la livraison.

Un projet e-commerce concrétisé

Après une phase de recettage et d’écriture des contenus par l’équipe de SCAR, le site e-commerce de la coopérative est en ligne, prêt à recevoir les commandes.

Bien que cette étude de cas (et celle de l’AMO) soit déjà longue, il va sans dire que nous ne sommes pas entrés dans le détail de toutes les réflexions qui ont été menées. En effet, les résultats de l’AMO sont largement réservés à SCAR. Mais si une AMO ou étude très approfondie de vos opportunités vous intéressent également, faites-nous signe.

Nous souhaitons une très bonne réussite à toute l’équipe de SCAR pour ce nouveau projet !