E-commerce Headless

Vous souhaitez lancer votre boutique en ligne ou migrer vers une solution e-commerce headless ? User Agency vous accompagne dans votre démarche en s’appuyant sur des plateformes et technologies modernes dans l’optique de simplifier vos ventes et d’améliorer l’expérience utilisateur de vos clients sur internet.

• Qu’est-ce qu’un ecommerce headless ?
• Pourquoi passer sur du headless ?
• Solutions techniques backend pour gérer votre boutique en ligne en mode headless
• Solution front-end pour pour faire du commerce headless en 2022
• E-commerce en ligne dans le navigateur
• L’e-commerce mobile
• Phygital commerce
• CMS headless pour gérer vos contenus
• Notre méthodologie pour passer au headless
• Audit et conseils
• Démarche UX / UI
• Définition de stack de développement
• Planification du projet
• Test and learn
• Mise en production
• Maintenance et évolutions

Le e-commerce headless n’est pas qu’un sujet technique, c’est également une façon de voir les choses et d’aller plus loin que les solutions monolithiques qui existent aujourd’hui comme Prestashop ou Magento. Le principe même du headless commerce est de détacher les parties front-end et backend de l’infrastructure . En s’appuyant sur ce principe, il est possible d’imaginer une multitude de nouveaux usages de façon très simple. Concrètement votre solution backend va distribuer une galaxie d’API dans le but de pouvoir les utiliser là où l’on veut, et pas uniquement sur le web.

Il est donc possible une fois implémenter de développer une application mobile rapidement, mais également des services de support personnalisé pour gérer vos clients via un service client sur mesure et qui répond à vos problématiques business.

Avant de vous présenter notre façon de travailler il est important de rappeler ce qu’est une infrastructure headless et pourquoi réfléchir dans ce sens pour les prochaines années. Il n’y a pas de réponse simple au sujet, il est possible de réarticuler l’architecture de votre boutique en ligne de plusieurs façons, cela dépend de votre niveau de maturité ainsi que des moyens que vous souhaitez mettre en place pour faire progresser votre activité en ligne.

Mettre en place une boutique avec cette nouvelle méthode va vous permettre de gagner sur plusieurs points, à la fois sur la technique, mais également sur la flexibilité de vos services et par conséquent pouvoir implémenter des solutions et services que vous n’avez pas encore activés.

Pour gérer vos produits, il est possible de passer par plusieurs méthodologies, soit en choisissant une solution unifiée qui va servir de PIM / CRM, ou d’avoir une architecture plus complexe en détachant les deux parties avec des solutions tiers que vous utilisez déjà.

La solution la plus simple aujourd’hui et de s’appuyer sur Shopify qui se prête très bien à l’exercice et permet d’avoir un workflow très avancé pour gérer les produits et déclinaisons, les clients ainsi que les commandes. L’avantage d’utiliser Shopify en mode headless est d’avoir une très grande liberté au niveau du front et de renvoyer les clients sur le checkout par défaut qui est très optimisé pour la conversion. Il existe une version plus avancée avec le programme Shopify Plus qui apporte une autre dimension et offre la possibilité de connecter plus simplement votre CRM ou votre PIM en direct et par conséquent d’unifier les flux.

Il reste toujours possible de travailler avec des solutions monolithiques comme Prestashop, Magento, mais cela nécessite du développement spécifique pour répondre au workflow headless. N’étant pas forcément pensé à la base pour faire du commerce headless cela n’est pas idéal et pose une série de questions et problématiques qui peuvent ralentir l’évolution de la boutique.

Enfin pour terminer il existe des frameworks spécialisés sur le sujet en Node.js avec Vendure qui s’annonce très prometteur ou Saleor qui est aujourd’hui une référence dans l’écosystème, du côté de PHP Sylius trust une bonne partie de la demande, basé sur Symfony, c’est un incontournable . L’aspect positif du framework est de pouvoir être malléable à souhait et de faire correspondre exactement vos besoins avec la solution technique, mais cela nécessite une équipe dédiée à cette partie engendre par conséquent des frais de développement conséquent.

Comme évoqué précédemment avec une architecture headless il est possible de réaliser une multitude d’applications dites front-end, du site internet à l’application mobile en passant par les montres connectées, les assistants vocaux ou autre solution implémenter dans les magasins comme les bornes connectées ou les tablettes vendeurs.

Nous avons ici nous concentré sur les trois plus grands usages sur lesquelles nous travaillons activement au sein de chez User Agency, qui sont bien évidemment la partie web, le mobile et les bornes en magasin.

Pour réaliser nos projets e-commerce nous nous appuyons sur l’expertise que nous avons accumulée depuis plusieurs année avec la librairie React, nous travaillons depuis le début en headless avec, que ce soit pour des applications de gestion, typiquement des dashboards ou des applications métiers. Cela nous permet de bien distinguer la partie front (React) et la partie backend (Node.js).

L’une des contraintes à utiliser du React nativement sur le web est de ne pas avoir de prise en charge native du SSR (server side rendering) qui est un frein pour l’indexation dans les moteurs de recherche comme Google. C’est pour cela que nous utilisons depuis presque deux ans une solution qui s’appelle Next.js, qui s’appuie sur les fondamentaux de React, mais qui offre cette possibilité de faire du SSR de façon très efficace tout en ayant un aspect de génération de fichiers statiques pour optimiser les chargements des différentes pages. C’est un parfait hydrique qui permet d’avoir une vision nouvelle du développement moderne. De garantir des performances pour répondre aux contraires de performances des moteurs de recherche et d’avoir une dimension UX force pour garantir l’expérience des clients.

Sur la partie mobile, nous travaillons uniquement avec du React Native, un choix fort que nous avons depuis le début et qui permet d’avoir une réelle expertise sur le sujet. React Native est la version mobile de la libraire React qui est à la base de nos développements sur le web, écrit en Javascript. Cela permet au sein de l’agence d’avoir une transversale entre les développements web et mobiles. D’unifier une partie des développements entre les deux plateformes et de souder nos équipes.

React Native est une solution qui permet d’aller beaucoup plus vite pour lancer nos applications qu’elle soit e-commerce ou non et d’avoir un support iOS et Android en utilisant une bonne partie de la même base de code. Une application moins gourmande en maintenance et de pouvoir faire travailler des ingénieurs habitués au web vers le mobile.

L’extension des sites internet d’une enseigne et bien évidement le réseau de magasin qu’il possède est grâce au headless cela vient plus facilement s’implémenter dans les projets digitaux en magasin. En offrant aux clients la possibilité d’avoir la vue de l’ensemble du catalogue directement sur une borne interactive ou d’avoir des jeux commerciaux en restant proche de la base client. Sans une ouverte avancée des API cela est difficile à implémenter et les solutions détachées permettent d’avoir une plus grande liberté des innovations en magasin.

La première pierre de votre commerce headless va venir du contenu, c’est une des pierres angulaires de votre boutique en ligne, car cela permet d’améliorer votre référencement, mais également de séduire vos clients avec votre expertise. Pour gérer ce contenu, nous ne passons pas un CMS headless qui permet de s’implémenter facilement à votre stack et d’avoir une interface enrichie et dédiée à votre production de contenu. Il est également possible de passer par des solutions plus avancées en développant votre propre plateforme de gestion des contenus avec un système d’API.

Dans la liste des CMS les plus connus il y a Contentful qui est actuellement le leader sur le marché et qui propose une très large palette d’options pour satisfaire une grande partie des besoins pour gérer son contenu e-commerce, aussi bien pour les pages produits, services et blog. Le choix de la plateforme est très important, car une fois implémenté il n’est pas très évidement de switcher de plate-forme, cela reste possible, mais ouvre la porte aux régressions.

Directus est également une solution viable et robuste, elle permet d’aller plus loin dans la personnalisation et offre une solution pour héberger vous même votre outil, ce qui n’est pas le cas avec Contentful qui est totalement dans le cloud. Avec cette liberté vous pouvez héberger Directus sur votre infrastructure et déterminer la localisation de vos serveurs.

Et pour finir Strapi qui est une société française et qui propose une solution également dans le cloud ou à implémenter dans votre infrastructure, l’interface est très agréable et le projet en open source. Leur roadmap est très intéressante et laisse à penser une belle évolution du produit dans les prochains mois.

Voici le détail de notre méthodologie pour l’implémentation d’un projet une structure headless, en fonction de votre besoin, nous pouvons nous adapter aux différentes contraintes business et vous proposer une stratégie personnalisée. Nous travaillons à la fois pour nos clients et pour nos propres projets en interne, ce qui vous permet de bénéficier de nos différentes phases de R&D. Une garantie pour nous de vous proposer des solutions que nous avons déjà éprouvées.

Nous mettons notre expérience au service de nos différents clients, cela vous permet de bénéficier des dernières réflexions et phases de recherche que nous faisons en interne afin d’améliorer les processus de développement et de maintenance des applicatifs.

Il est également possible de réaliser un audit de votre site actuel en amont de votre refonte afin d’estimer les axes d’amélioration qu’il est possible de travailler et de préserver les fonctions essentielles de votre activité en ligne.

Nous partons du principe qu’il est important de créer une expérience utilisateur, il est important que votre boutique soit élégante, mais avant tout le client qui sera sur votre site doit facilement comprendre votre démarche et d’accompagner l’utilisateur dans sa démarche d’achat en évitant les frictions qui peuvent le pousser à quitter votre site. C’est pour cela nous apportons une grande important à la démarche UX que se soit pour la création d’une boutique ou de la refonte d’une boutique déjà en ligne.

Si vous n’avez pas encore de boutique en ligne, cela est très simple, nous vous proposons une stack en fonction de vos besoins, en fonction de vos contraintes nous ne recommandons pas les mêmes plateformes, car cela peut varier en fonction de ce que vous vendez, on ne gère pas de la même façon des produits physiques et les services par exemple. Même réflexion si vous avez plusieurs points de vente avec différents stocks à gérer.

Si vous avez déjà un actif et que vous souhaitez migrer vos données vers votre nouvelle solution, nous pouvons réaliser cette migration avec nos différents outils que nous avons développés pour palier à la problématique d’enfermement sur une même solution. Nous réalisons la migration de vos clients, produits, commandes et factures.

Une fois que nous avons fixé ensemble les éléments relatifs aux maquettes en fonction des retours des utilisateurs, que nous avons également validé la stack de développement nous allons réaliser un calendrier de livraison des différents éléments technique, nous faisons des livraisons itératives qui permette de votre la construction de votre boutique en fil de l’eau et d’éviter d’avoir un effet tunnel dans votre projet.

Une fois votre première version en ligne il est important de valider les choix fait en UX et si besoin d’ajuster les comportements que l’on n’a pas forcément détectés en amont du projet. Dans le cas contraire d’appuyer sur les choix validés et de comprendre comment il est possible d’aller encore plus loin.

Nous travaillons de façon incrémentale ce qui nous permet de mettre en production plusieurs fois par jour, un déploiement continu permet de pouvoir réaliser des évolutions et migrations rapides avec un workflow solide et d’éviter toutes les contraintes liées à la mise en production initiale ou de nouvelles features sur toute la vie de votre projet.

Une fois votre projet en ligne nous garantissons le bon fonctionnement du site et réalisons les améliorations qu’il est possible d’imaginer à travers la phase de test and lean.