Doubler les ventes mobiles dans une boutique Drupal Commerce

html

Chez Droptica, nous avons conçu et mis en œuvre un nouveau design d'une boutique en ligne pour appareils mobiles pour l'un des plus anciens éditeurs en Pologne. Nous avons utilisé Drupal 7 Commerce et effectué une optimisation des moteurs de recherche. Les résultats ? Des ventes en hausse !

Maison d'édition

Il y a trois ans, nous avons commencé à coopérer avec Wydawnictwo WAM, l'une des plus anciennes maisons d'édition catholiques polonaises, en leur fournissant nos services de développement Drupal. En plus de livres sur des sujets religieux, ils publient également des ouvrages scientifiques et de vulgarisation, avec un total d'environ 150 titres par an. Leurs produits comprennent des livres de prières, des catéchismes, des dissertations académiques, de la littérature, des biographies, des livres pour jeunes adultes et des livres de cuisine, y compris les fameuses recettes de Sœur Anastasia.

« L'œuvre la plus admirable de notre temps », a dit le Pape Pie XI à propos de « L'Apostolat de la Prière », qui fut la source de la maison d'édition Wydawnictwo WAM basée à Cracovie. Elle a été fondée en 1872 par les Jésuites. En pratique, cela signifie que WAM a célébré son 145ème anniversaire en 2017.

De plus, la maison d'édition a reçu de nombreux prix et distinctions, incluant le Prix Magellan, le Prix Feniks 2014 et bien d'autres.
La maison d'édition exploite également une boutique en ligne et Deon.pl – un site de réseautage social et d'actualités.

Le début de la coopération

Nous avons commencé notre coopération en construisant des modules pour améliorer l'achat sur leur site web. Quelques exemples notables incluent :

• un module permettant aux utilisateurs d'envoyer les produits achetés en tant que cadeaux;
• sélection du point de retrait;
• intégration de Drupal Commerce avec Freshmail, ce qui a permis à la maison d'édition de cibler les newsletters et d'envoyer des informations sur les nouveaux produits par e-mail.

Version mobile

Notre tâche consistait à moderniser la boutique Drupal Commerce mentionnée ci-dessus. C'était agréable et plaisant sur le bureau ; cependant, les appareils mobiles étaient une autre histoire. La boutique a été conçue et créée il y a quelques années utilisant Drupal 7 lorsque le shopping mobile était encore méconnu. Les temps ont changé. Le client s'attend à pouvoir parcourir les produits, en savoir plus sur eux et les acheter en utilisant n'importe quel appareil mobile.

Étant donné que les normes d'aujourd'hui sont totalement différentes de celles lors de la mise en place de la boutique, le design graphique et la mise en page devaient être améliorés pour rendre les achats à partir d'un appareil mobile plus pratiques.

Il ne fait aucun doute que le trafic et les achats à partir d'appareils mobiles sont en augmentation. En même temps, nous devons nous rappeler que même si le client préfère passer la commande réelle à l'aide d'un ordinateur (par exemple, parce qu'il pourrait préférer saisir des données à l'aide d'un clavier standard), il en apprend souvent davantage sur l'offre et parcourt les produits sur un téléphone mobile ou une tablette.

Nous devions agir.

Nous avons commencé par la préparation d'un nouveau design graphique. Notre graphiste a créé un design adapté aux appareils mobiles, qui non seulement est esthétique mais qui améliore et facilite aussi l'interaction avec l'utilisateur.

Nous avons décidé non seulement de changer la mise en page, mais nous allions aussi choisir des polices appropriées, plus visibles sur les appareils mobiles, et modifier les couleurs. L'apparence sur le bureau resterait inchangée.

Après quelques changements mineurs, le client a accepté le nouveau design et nos développeurs ont commencé à travailler dessus.

Nous avons commencé par déplacer les CSS vers SASS préprocesseur. Les variables, mixins et une structure plus propre ont rendu le travail sur les modifications du design graphique plus rapide et plus efficace.

En même temps, notre département QA a commencé à créer des tests en Codeception. L'une des principales conditions était de laisser la mise en page du bureau inchangée, les tests en Codeception devant capturer l'apparence actuelle et informer des éventuelles modifications indésirables au cours des travaux ultérieurs.

Après les préparations initiales, nous avons commencé à travailler sur le changement de mise en page. Notre priorité principale était le processus d'achat – la page du panier, le choix du mode de paiement et la livraison. Ensuite, nous avons modifié les pages produits, les pages d'information et les résultats de recherche.

En même temps, nous avons également développé de nouveaux tests pour nous assurer que les modifications de code ne causent pas de changements dans d'autres parties de la boutique, qui autrement seraient difficiles à remarquer.

Il s'est avéré que non seulement des modifications dans SASS/CSS, mais aussi du code JS supplémentaire étaient nécessaires. Par exemple, le site web comportait un certain nombre de carrousels avec des graphiques. Pour nous assurer de leur bon fonctionnement, nous avons dû également modifier et étendre le code JavaScript existant. Nous avons ajouté des éléments déroulants supplémentaires sur les sous-pages en résolutions plus petites et nous avons complètement reconstruit le menu, avec l'ajout du soi-disant menu collant pour les appareils mobiles.

Avant chaque implémentation, nous avons effectué des tests automatiques et manuels, analysé le processus d'achat complet et vérifié la mise en page en cours de route. Nous avons tout vérifié dans différents environnements et navigateurs. Nous avons corrigé tous les bugs qui survenaient et nous nous sommes assurés que la mise en page était unifiée.
Tout au long du processus, nous avons régulièrement mis en œuvre les résultats de notre travail, en moyenne une fois par semaine.

Résumé des changements

• Amélioration de la mise en page pour les appareils mobiles – elle est maintenant claire, attire les clients et facilite la navigation sur le site et les achats.
• Modifications du processus d'achat (les formulaires ont été adaptés à la mise en page mobile) pour accélérer les achats et faciliter le choix des méthodes de livraison et de paiement depuis les smartphones et tablettes.
• Correction des bugs sur les écrans mobiles.
• Le site web a été adapté aux normes actuelles.
• Implémentation de tests automatiques, nous aidant à détecter les bugs et à économiser du temps de développement.
• Réduction de la durée des sessions couplée à une augmentation des revenus pour les clients utilisant des appareils mobiles. Cela signifie que les clients trouvent ce qu'ils recherchent plus rapidement qu'avant.
• Augmentation de 200% des achats effectués via des appareils mobiles.

Le client était très satisfait du nouveau design, mais nous étions surtout satisfaits de la croissance des ventes. Après quelques mois de mesures, il s'est avéré que non seulement plus d'achats ont été effectués via la version bureau, mais les achats effectués via des appareils mobiles ont doublé par rapport à la même période de l'année précédente.

SEO

Après avoir terminé le travail sur la mise en page mobile, nous avons concentré nos efforts sur le SEO (optimisation pour les moteurs de recherche et positionnement) afin d'attirer de nouveaux clients, d'augmenter le trafic sur le site web et d'ajouter de nouvelles informations sur les produits dans les résultats de recherche.

Nous avons commencé par connecter le site web à Google Search Console, un outil qui nous permet de mesurer le trafic sur le site, d'améliorer les performances et de détecter les bugs. Ensuite, nous avons mis en œuvre des modifications basées sur l'audit SEO, qui comprenait :

• amélioration des titres;
• ajout d'une notification pour les éditeurs si le nombre optimal de caractères dans la balise description est dépassé – l'information dans la balise est affichée comme des indices lors des recherches;
• ajout d'un plan du site;
• ajout de prix et de disponibilité des produits aux résultats de recherche Google; 

De plus, nous avons optimisé la taille, les proportions et la qualité des graphiques sur le site web.

La taille des graphiques et la vitesse de chargement des pages sont importantes pour l'optimisation de la recherche Google. Plus la page se charge rapidement, plus le classement est élevé, ce qui augmente à son tour la probabilité de finir en haute position dans les résultats de recherche.

Des graphiques plus petits entraînent des temps de chargement de page plus rapides. Une connexion plus rapide permet de servir plus de clients. Un chargement rapide des pages est également important pour les clients utilisant des smartphones et des tablettes, surtout lorsque leur connexion est faible et lente. Grâce à cela, plus de personnes peuvent parcourir les pages de manière pratique et faire leurs achats plus fréquemment.

Résultats du travail SEO

• Des changements aboutissant à un meilleur classement dans les résultats des moteurs de recherche.
• Augmentation du trafic depuis les moteurs de recherche (Google et autres). Le trafic a augmenté de 50%.
• Indexation de toutes les pages appartenant à la librairie Wydawnictwo WAM. Google et d'autres moteurs de recherche explorent désormais l'intégralité du contenu des pages, indexant tous les produits et améliorant l'avantage concurrentiel de l'éditeur.
• Ajout d'outils informant sur le trafic sur le site web.
• Les résultats de recherche incluent des informations supplémentaires concernant le prix et la disponibilité.
• Travail facilité pour les éditeurs (informations sur la conformité SEO) lors de l'ajout de nouveaux éléments.

Résumé

Le travail sur le nouveau layout mobile et les modifications liés au SEO ont apporté de nombreux avantages pour la maison d'édition Wydawnictwo WAM. Les plus importants d'entre eux étaient :

• Une augmentation significative du trafic sur le site web et des ventes dans les mois suivant la mise en œuvre des changements.
• Augmentation des ventes sur bureau de 50% par rapport à l'année précédente.
• Augmentation de 200% des achats effectués via des appareils mobiles par rapport à l'année précédente.
• 84% de nouveaux utilisateurs en plus.
• Un nouveau layout qui facilite la navigation et les achats pour les clients utilisant des smartphones et des tablettes.
• Nouveau layout et design graphique pour appareils mobiles.
• Temps de chargement des pages plus courts.
• Diminution du taux de rejet.
• Pleine conformité avec le RGPD pour la boutique.
• Amélioration (simplification et accélération) du processus d'achat – du panier à la sélection du mode de livraison.
• S'assurer que Google et d'autres moteurs de recherche explorent tout le contenu, les produits et les articles.
• Informations supplémentaires sur les produits dans les résultats de recherche Google.
• Travail facilité pour les éditeurs travaillant dans la librairie.
• Conformité avec les normes actuelles.
• Introduction de tests automatisés qui faciliteront et accéléreront le travail ultérieur des développeurs pour la maison d'édition.

Nous continuons notre coopération avec Wydawnictwo WAM Publishing House. Nous travaillons actuellement sur l'amélioration des processus d'entrepôt.