{"id":16488,"date":"2022-07-05T09:35:27","date_gmt":"2022-07-05T07:35:27","guid":{"rendered":"https:\/\/sylius.com\/?post_type=case-study&p=16488"},"modified":"2022-07-05T09:35:29","modified_gmt":"2022-07-05T07:35:29","slug":"nouvelle-boutique-en-ligne-pour-leau-vive-avec-sylius","status":"publish","type":"case-study","link":"https:\/\/sylius.com\/fr\/case-study\/nouvelle-boutique-en-ligne-pour-leau-vive-avec-sylius\/","title":{"rendered":"Nouvelle boutique en ligne pour L\u2019Eau Vive avec Sylius"},"content":{"rendered":"\n
<\/div>
\n

En 2021 et 2022, la soci\u00e9t\u00e9 Ascanio<\/a> a accompagn\u00e9 L\u2019Eau Vive, r\u00e9seau de magasin bio, dans la refonte de son site marchand afin d\u2019augmenter sa pr\u00e9sence sur internet et d\u2019offrir une vraie exp\u00e9rience diff\u00e9renciatrice pour ses clients.<\/p>\n\n\n\n

Sommaire<\/h2>\n\n\n\n

Sommaire<\/a>
Une Exp\u00e9rience utilisateur repens\u00e9e<\/a>
Un site ultra performant<\/a>
\u27a1\ufe0f Recherche multicanale<\/a>
\u27a1\ufe0f Mode recette<\/a>
\u27a1\ufe0f Gestion des stocks<\/a>
SEO friendly, optimis\u00e9 pour le r\u00e9f\u00e9rencement local<\/a>
R\u00e9sultat et chiffres cl\u00e9s<\/a>
T\u00e9moignages de l’Eau-Vive<\/a><\/p>\n\n\n\n

Une Exp\u00e9rience utilisateur repens\u00e9e<\/h2>\n\n\n\n

Benchmark, personas, userflow, wireframes, maquettage, prototypage, design system… ont \u00e9t\u00e9 mis en place dans une d\u00e9marche it\u00e9rative afin de proposer la solution la plus ergonomique et simple possible pour les utilisateurs.<\/p>\n\n\n\n

C\u2019est gr\u00e2ce \u00e0 l\u2019\u00e9quipe UI \/ UX d\u2019Ascanio compos\u00e9e d\u2019experts digitaux et en science cognitive que les leviers prioritaires ont pu \u00eatre identifi\u00e9s afin de d\u00e9finir le parcours client le plus performant possible :<\/p>\n\n\n\n

  • Parcours simple, pr\u00e9visible et guid\u00e9 (bas\u00e9 sur les sch\u00e8mas mentaux des utilisateurs)<\/li>
  • Trouver les points bloquants et \u00e9viter les frustrations<\/li>
  • Conserver les codes du e-commerce classique tout en proposant un parcours innovant et optimis\u00e9<\/li>
  • Construire une interface intuitive et simple de navigation pour r\u00e9pondre \u00e0 toutes les typologies d\u2019utilisateurs<\/li>
  • Accompagner l\u2019utilisateur tout au long du parcours au moyen de feedback sur ses actions<\/li>
  • Syst\u00e8me de suggestion entre les produits et recettes<\/li><\/ul>\n\n\n\n

    La refonte graphique a \u00e9galement pour but de moderniser l\u2019image de marque et d\u2019adapter la charte graphique d\u00e9j\u00e0 en place au web :<\/p>\n\n\n\n

    • Couleurs naturelles, cama\u00efeu et nuances de vert et orange, jeu de transparence, coh\u00e9sion avec la charte graphique actuelle de l\u2019eau vive<\/li>
    • Proposer une exp\u00e9rience visuelle reconnaissable et identifiable comme \u00e9tant celle de l\u2019Eau Vive<\/li>
    • Interface claire sobre et rassurante : L\u2019interface doit se faire oublier au profit des produits de la boutique<\/li>
    • Cr\u00e9er une ambiance dynamique et proche du consommateur : Accompagner et aider le consommateur dans son quotidien<\/li><\/ul>\n\n\n\n
      <\/div>\n\n\n\n

      Un site ultra performant<\/h2>\n\n\n\n

      Si de nouvelles fonctionnalit\u00e9s innovantes ont pu \u00eatre imagin\u00e9es lors des diff\u00e9rents ateliers de recherche utilisateurs, un travail de recherches et d\u00e9veloppement a \u00e9galement \u00e9t\u00e9 mis en place afin de r\u00e9pondre techniquement de mani\u00e8re performante aux exigences.<\/p>\n\n\n\n

      Apr\u00e8s beaucoup de recherches, tests et POC, le choix s\u2019est rapidement port\u00e9 sur Sylius<\/strong> (bas\u00e9 sous Symfony), et plus pr\u00e9cisement l\u2019API Sylius ainsi que son back-office. Le caract\u00e8re modulaire de Sylius a \u00e9t\u00e9 un atout dans le choix du framework. C\u00f4t\u00e9 front, nous utilisons le framework React. L\u2019ensemble de l\u2019application utilise Docker pour avoir un maximum de souplesse et de scalabilit\u00e9 en cas de mont\u00e9e en charge.<\/p>\n\n\n\n

      <\/div>
      \n
      \n
      \n

      <\/p>\n\n\n\n

      Recherche multicanale<\/h3>\n\n\n\n

      Optimis\u00e9e et extr\u00eamement rapide, la recherche centralis\u00e9e permet \u00e0 l\u2019utilisateur de trouver \u00e0 la fois des produits et des recettes en quelques millisecondes avec une sensibilit\u00e9 \u00e0 la casse sur des stocks diff\u00e9rents selon les magasins et sur plus de 500 000 r\u00e9f\u00e9rences.<\/p>\n<\/div>\n\n\n\n

      \n
      \"Eau<\/figure>\n<\/div>\n<\/div>\n<\/div><\/section>\n\n\n\n
      <\/div>
      \n
      \n
      \n
      \"Eau<\/figure>\n<\/div>\n\n\n\n
      \n

      Mode recette<\/h3>\n\n\n\n

      Cette fonctionnalit\u00e9 est tr\u00e8s pratique pour l’utilisateur mais il s’agit d’un d\u00e9fi technique de taille : la possibilit\u00e9 de mettre des produits au panier en fonction d’une recette et du nombre de personnes dans le foyer. Il est possible de retirer des ingr\u00e9dients, d\u2019ajouter des quantit\u00e9s, changer de marque, etc… En lien avec les stocks des diff\u00e9rents magasins.<\/p>\n<\/div>\n<\/div>\n<\/div><\/section>\n\n\n\n

      Gestion des stocks<\/h3>\n\n\n\n

      L\u2019envoi se fait par des flux depuis l\u2019outil de gestion des stocks communs \u00e0 tous les magasins : plus de 2000 flux chaque jour, avec plus de 7000 produits et 400 000 prix diff\u00e9rents mis \u00e0 jour toutes les deux heures<\/strong>.<\/p>\n\n\n\n

      La gestion et le traitement de ces flux exige de la rigueur<\/strong> et de la performance<\/strong> pour \u00e9viter toute erreur ou ralentissement du tunnel d\u2019achat.<\/p>\n\n\n\n

      <\/div>\n\n\n\n

      SEO friendly, optimis\u00e9 pour le r\u00e9f\u00e9rencement local<\/h2>\n\n\n\n

      Dans un objectif d\u2019accroissement et de p\u00e9rennisation du trafic, il \u00e9tait n\u00e9cessaire d\u2019avoir un site performant et orient\u00e9 SEO.<\/p>\n\n\n\n

      L\u2019optimisation des images, des textes, mais surtout du code React et la mise en place d\u2019\u00e9l\u00e9ments essentiels ont \u00e9t\u00e9 cl\u00e9s dans cette qu\u00eate : Pr\u00e9-render pour acc\u00e9l\u00e9rer le r\u00e9f\u00e9rencement, Lazy loading pour charger uniquement ce dont on a besoin et acc\u00e9l\u00e9rer le chargement, balises canoniques, redirections 301, param\u00e9trage des urls contenant les mots cl\u00e9s n\u00e9cessaires, optimisation de la version mobile du site, etc.<\/p>\n\n\n\n

      La structuration des contenus et l\u2019optimisation de l\u2019exp\u00e9rience utilisateur sont des \u00e9l\u00e9ments primordiaux pour le SEO<\/p>\n\n\n\n

      • Vitesse de navigation<\/li>
      • Parcours utilisateur simplifi\u00e9 et logique de navigation<\/li>
      • Hi\u00e9rarchisation des contenus et tunnel de conversion simplifi\u00e9<\/li>
      • D\u00e9coupage des donn\u00e9es produits (description, ingr\u00e9dients, etc.) afin de fluidifier la lecture des utilisateurs et minimiser le taux de rebond.<\/li><\/ul>\n\n\n\n

        Performances du site en version desktop<\/strong> et mobile<\/strong> (via Google PageSpeed Insights) :<\/p>\n\n\n\n

        \"Eau<\/figure>\n\n\n\n
        \"Eau<\/figure>\n\n\n\n

        La cr\u00e9ation de pages magasin d\u00e9di\u00e9s permet \u00e9galement une optimisation de la pr\u00e9sence locale des magasins.

        Les pages sont reli\u00e9es aux pages Google My Business et plus particuli\u00e8rement \u00e0 leurs avis ce qui am\u00e9liore consid\u00e9rablement le r\u00e9f\u00e9rencement local.<\/p>\n\n\n\n

        \"\"<\/figure>\n\n\n\n
        <\/div>\n\n\n\n

        R\u00e9sultat et chiffres cl\u00e9s<\/h2>\n\n\n\n

        Une moyenne de 50% de taux de rebond avant refonte et environ 20% aujourd\u2019hui<\/p>\n\n\n\n\n

        \n
        \n
        \n
        -30%<\/div>\n
        de taux de rebond<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n\n\n
        \"Eau<\/figure>\n\n\n\n

        0,30% de taux de conversion en moyenne contre 2,2% aujourd\u2019hui.<\/p>\n\n\n\n

        \"+1,9%<\/figure>\n\n\n\n\n
        \n
        \n
        \n
        +20%<\/div>\n
        de CA sur le drive<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n\n\n
        <\/div>\n\n\n\n

        T\u00e9moignages de l’Eau-Vive<\/h2>\n\n\n
        \n
        <\/div>\n \n
        \n
        \n \r\n

        \u00ab\u00a0Le nouveau site marchand\u00a0eau-vive.com\u00a0a \u00e9t\u00e9 un vrai service additionnel dans le contexte actuel\u00a0! Aussi bien en termes de fid\u00e9lisation que de recrutement, ce site nous permet d\u2019apporter de la proximit\u00e9 et de la valeur ajout\u00e9 tout en rajeunissant l\u2019image de marque.<\/i><\/p>\r\n\r\n\r\n\r\n

        Beaucoup de nouvelles fonctionnalit\u00e9s sont pr\u00e9sentes\u00a0; plus de 600 recettes avec mise au panier des ingr\u00e9dients, un compte client r\u00e9invent\u00e9 avec cumul de points fid\u00e9lit\u00e9 et pr\u00e9f\u00e9rences de consommation, des listes de courses… Ce n\u2019est que le d\u00e9but mais nous avons d\u00e9j\u00e0 de tr\u00e8s bons retours.\u00a0\u00bb<\/i><\/p>\r\n\n <\/div>\n <\/div>\n\n