Qui ?
Alexandre Nottin, CDO de Franprix et Vincent Pillet, Fondateur & Directeur de l’Expérience Client d'UserAdgents, agence digitale mobile-first.
Quoi ?
[article partenaire] Une interview croisée sur les enjeux et les résultats du nouveau site mobile Franprix.
Comment ?
Quelle est la promesse de Franprix ?
Alexandre Nottin : Fractionnement des achats, émergence d’Amazon sur la petite couronne Parisienne, démultiplication des acteurs de la food delivery... Après avoir été longtemps épargnée, la grande distribution alimentaire est aujourd’hui bouleversée par des changements d’usages et des innovations technologiques qui nous ont amenés à questionner la place et la promesse de l’enseigne. Dès 2015, nous avons voulu faire du point de vente un lieu de vie, tout en restant un acteur de la proximité alimentaire.
Vous sortez un nouveau site, quelle est sa valeur ajoutéepar rapport à l’app mobile ?
A.N : En juin 2017, l’app, conçue avec UserAdgents, porte à la fois le e-commerce de l’enseigne, notre promesse de livraison en 30 minutes et embarque le programme de fidélité dématérialisé. Compte tenu de la fréquence d’achat dans notre enseigne, l’investissement sur une application native était une priorité. Notre site datait de 2016, il était centré sur la recherche de l’adresse d’un magasin, ses horaires et promotions et connectait au compte client pour connaître le solde fidélité. Entamée en 2019, la refonte avait pour ambition d'en faire à la fois un site e-commerce et drive-to-store.
Etes-vous partis sur une conception mobile-first ?
V.P: En 2019, la question du responsive et d’une approche mobile-first - au vu de l’audience - ne se posait plus. Nous avons privilégié une approche Progressive Web App pour servir la performance et l'expérience d'usage. Le site est donc "PWA compatible, pour offrir le meilleur du web aux utilisateurs du site et non - ce que l’on entend parfois - de remplacer les apps. Toutes les capacités ne sont pas encore exploitées (identification, mode offline,...), notamment en fonction du navigateur utilisé, mais le déploiement se fera progressivement en fonction des usages.
A.N : Le site web précédent était utilisé à 50% sur le mobile, il ne fallait pas négliger cet angle. Il fallait aussi remettre le magasin au centre : si l'on veut générer plus de trafic et massifier notre approche e-commerce, le site est un vecteur moins contraignant que l’app. Pas de downloads, des coûts d'acquisition moins élevés. Nous nous sommes demandés comment capter plus de monde grâce au site, tout en sachant qu'une bonne partie du trafic serait sur smartphone.
Bilan des courses ?
A.N : En termes de chiffres, le trafic a doublé un mois et demi après le lancement et sans acquisition paid ! Juste en ayant bien travaillé le SEO. Les premières commandes laissent voir un panier moyen sur le site 20 à 25% plus élevé que sur l’application. On voit donc qu’on n’est pas dans des logiques de cannibalisation entre les deux interfaces. Ça a été vite. Nous avons commencé en août 2019 pour une mise en ligne mi-janvier 2020. Les équipes se connaissent, avec des prestataires bien identifiés, experts dans leurs domaines et complémentaires, ç'a été clé. La crise sanitaire et le confinement ont eu un impact immédiat sur l’usage du site qui sortait de la phase de rodage.
V.P : La phase de conception a été menée assez rapidement, compte tenu des utilisateurs que nous avions déjà sur la partie applicative. Nous avons alors travaillé sur un socle technique qui était vraiment “propre” et des données correctement exposées.
Pourquoi avoir choisi un site en javascript (Vue.js et Nuxt.js)?
V.P : Pourquoi Vue.js et pas React.js? Vue était plus souple. Et Nuxt a l'avantage d'avoir des équipes françaises, leur techno est adaptée au pre-rendering (pré-rendu des éléments de la page par le serveur), notamment en SEO, fondamental en e-commerce. Ces choix relèvent aussi du “Design for Speed”*, pour la meilleure performance possible. Même s'il nous faut encore améliorer le poids des images et les temps de réponse des web services.
Quelle a été votre approche en termes de mutualisation ?
V.P: Cela s'est concentré sur le back-end (ie la partie serveur / APIs de l’infrastructure IT). Aucun web service n’a été fait spécifiquement pour le site ou les apps, c’est un point très structurant et très important. Le code n'est pas mutualisé mais l’architecture en micro-services nous a permis de ré-exploiter la quasi totalité de nos web services avec des adaptations pour le SEO, qui n'existe pas sur l’application.
A.N : La mutualisation concerne aussi la gestion de projet, avec des équipes légères : un chef de projet côté Franprix pour le site et l’application et idem côté UA, et peu d’interlocuteurs sur le back-office. C’est synonyme de gain de temps et de fluidité sur toute la chaîne avec cette vision globale des interfaces clients (site & apps), qui évite in fine les incohérences pour l’utilisateur et des ressources en doublon.
Quels CMS et plateforme e-commerce avez-vous choisis ?
V.P: Nous avons fait le choix de twill.io qui est un CMS “headless”, c’est à dire qu’il est découplé (le CMS fourni des APIs et non des templates HTML). Le but ? Produire et exposer les données sous forme de web services qui pourront demain alimenter n’importe quel type d’interface. Site, app, écran point de vente, bot... Aujourd’hui, ce CMS est prêt à interagir avec tout l’univers franprix.
A.N : Notre back-office est développé en propre avec OnePoint (technos Red Hat et Microsoft). Nous avons fait ce choix pour pouvoir gérer des sujets e-commerce-mais pas que. Un data hub construit ainsi un puits de données unique pour les magasins, l’offre et les clients. Il fallait s'adapter à notre besoin de livraison rapide, au programme de fidélité personnalisé bibi! D'ailleurs, nous personnalisons sur trois niveaux d’offres : des offres enseignes, des offres partenaires grâce aux algorithmes de Capital Data, et des offres fournisseurs grâce à RelevanC.
* Téléchargez gratuitement l’étude “Design for Speed” de USERADGENTS