Etude de cas Mon bracelet Nato /
Webmarketing et technique d'un site e-Commerce

09/08/2015

Aujourd’hui je vous propose de découvrir ma dernière réalisation MonBraceletNato.fr. Sur ce nouveau site e-Commerce j’ai réalisé toute la stratégie marketing ainsi que l’ensemble du développement technique. Découvrez dans cet article les secrets de fabrication, et les technologies utilisées sur le projet.

Le Webmarketing du projet / augmenter la conversion

Le design & l’expérience utilisateur

Capture d’écran 2015-05-20 à 19.13.46D’un point de vue design, j’ai décidé de créer un site sobre, moderne et efficace. Étant sur une thématique mode, accessoire de mode j’ai donc offert une place importante à de grands visuels, l’objectif était de mettre en scène les produits dans le quotidien pour permettre à l’utilisateur de se projeter plus facilement.

Au niveau de l’expérience utilisateur je me suis concentré à rendre le site simple et à éviter de parasiter le comportement d’achat. Cette stratégie se traduit notamment par l’utilisation massive d’éléments dépliants. L’exemple le plus parlant est celui du formulaire intégré directement dans la sidebar (barre latérale), il permet de garder l’internaute dans la page d’achat et d’éviter toute fuite du client vers une page tierce. Il en est de même pour la « like box Facebook », pour éviter toute distraction intempestive afin de canaliser le comportement d’achat dans l’objectif d’améliorer le taux de conversion global du site.

L’enjeu de la confiance

L’un des enjeux majeurs d’un site e-commerce, est d’appuyer le plus possible sur le levier de la confiance. Si l’internaute à l’ombre d’un doute sur la qualité de vos services, vous ratez la vente. En 2013 la confiance était le quatrième critère le plus important après le prix, la disponibilité et la promotion (FIA net).

Pour maximiser cette confiance dans le site j’ai mis en place des avis défilants sur l’ensemble du site, cela permet à l’utilisateur de voir les avis, quelle que soit la page qu’il visite. Pour que ce système soit efficace il faut que récolter des avis, j’ai donc mis en place une demande d’évaluation automatique qui se déclenche (envoie d’un mail) pour acquérir l’avis des clients. Pour maximiser le nombre d’avis, j’ai réduit le parcours au plus simple. En effet le formulaire est prérempli avec le prénom du client, et celui-ci doit donner son avis dans un message de 100 caractères maximum.

Toujours dans l’objectif d’augmenter la confiance des visiteurs dans le site j’ai intégré Instagram sur la page d’accueil su site, dessus nous retrouvons des photos de clients qui permet au client de découvrir les produits dans un environnement quotidien.

Suivi de la performance commerciale

Comme dans tout projet web l’évaluation de la performance est une étape indispensable. Le déploiement d’un outil d’analyse comme Google Analytics est d’autant plus important quand on parle d’un site e-Commerce.

Google à pensé aux e-commercants avec un mode dédié au e-commerce « Le suivi du commerce électronique ». J’ai donc mis en place dans le plan de tagage (installation du tracking), la remonté des informations de commande (produit, quantité, catégorie…), cela me permet par exemple de connaitre les produits qui ont le plus de succès par ville ou par tranche d’âge, informations indispensables pour tout marqueteur.

Le Développement technique / l'enjeu de la performance

Le développement Front End et la performance

Le site Monbraceletnato est bien évidement responsive design, celui-ci s’adapte donc à l’ensemble des terminaux mobiles (tablette, smartphone…). (Le front-end est basé sur la grille Bootstrap 3, mais le projet ne fais qu’utiliser la grille, tout les autres ajouts propres à Bootstrap 3 ont été retirés.)

Rapport de performanceLors du développement de ce site, j’ai employé des technologies visant à augmenter la performante globales (vitesse du site), la maintenabilité, et l’évolutivité du projet. En effet j’ai déployé sur le projet des technologies comme SASS et Compass pour la gestion du CSS. Sass est un préprocesseur qui permet en plus de la maintenabilité de garantir un nombre de feuilles de styles très bas (grâce à une concaténation native) cela diminue le nombre de requêtes HTTP envoyé vers le serveur et donc améliore la vitesse globale de l’application.

En ce qui concerne la gestion du JavaScript, je me suis tourné comme toujours vers le gestionnaire de tâche Grunt, qui permet grâce à la création de règles poussées de vérifier (linté) et de vinifier et de concaténer à la volée les fichiers JavaScript.

 

Le développement Back End

Woocomerce

Étant expert sur le CMS WordPress j’ai décidé tout naturellement d’orienter le développement du site vers WooCommerce.

WooCommerce est la solution e-commerce rattachée à WordPress, cette solution permet tout ce que prennent en charge d’autres solutions e-commerce comme Prestashop ou encore Magento (gestion des stocks, mails, suivi…) mais cela dans l’écosystème WordPress. Cela garanti notamment une interface de gestion simple et intuitive qui ne demande pas ou peu de formation, contrairement autres autres solutions s.

De plus WooCommerce est une application légère comparée à ses concurrents ce qui lui permet d’assurer de très bonne performance en terme de vitesse et de charge même sur un serveur peu puissant.

Les fonctionnalités de Mon Bracelet Nato

Mis à part les fonctionnalités de base que nous trouvons sur tous les sites commerce (gestion des stocks, bons de réductions,statistiques, espace mon compte) j’ai mis en place et développés quelques fonctionnalités pour améliorer la productivité générale de la boutique.

J’ai par exemple mis en place le Facebook Conncect qui permet aux internautes de saisir leurs informations plus facilement et plus rapidement sur les pages d’achats.

Une autre fonctionnalité que j’ai développée est la création d’un module d’impression d’étiquettes qui me permet de gagner un temps précieux. En effet le module que j’ai développé permet d’imprimer les adresses des clients en attente de livraison.

L’organisation du code et du déploiement

Dans tout projet professionnel, l’organisation du code est essentielle, cela assure une aisance prononcée dans l’évolutivité du site. L’ensemble du code de MonbraceletNato est donc versionné avec un outil nommé GIT, cet outil permet de créer des points d’arrêt dans le développement et donc de pouvoir revenir en arrière facilement.

AuGit-logo niveau du déploiement du code j’ai mis en place deux environnements , le premier dit de ‘préproduction’ est sur le même serveur que la version de production (version live). L’ensemble des modifications faites en local est d’abord envoyé au serveur de préproduction. Cela permet de s’assurer d’une compatibilité parfaite entre le code et l’environnement. Une fois que les modifications sont validées, celles-ci sont poussées sur le serveur de production.

Pour réaliser les déploiements j’ai mis en place l’outil Dploy qui permet de comparer le commit (la version) présent sur l’environnement distant et la version en local. Dploy procède donc à une mise à jour en comparant les deux versions. L’utilisation active de Dploy a permis un gain de temps important sur l’ensemble du projet.

La performance Back end

Dans l’objectif de fournir un site rapide et performant, la performance backend n’est pas en reste. J’ai utilisé un cache php qui permet d’éviter des appels trop fréquents à la base de données ou aux diverses API (Instagram).

Du côté du serveur le site est sur un VPS qui tourne sous Debian 7 et Apache 2, pour améliorer la vitesse j’ai effectué des réglage coté serveur avec la mise en place d’un cache OPcode (APC), et l’activation des mod apache2 comme deflate, les expires ont aussi été définis pour éviter à l’internaute de recharger sans cesse les ressources front-end.

Conclusion

Vous cherchez un prestataire pour réaliser une boutique sur mesure et performante ? Vous cherchez à construire une boutique qui prend en compte dès la conception l’optimisation de la conversion ? Contactez-moi !