Étude de cas Dietfitness - Site de nutrition sportive

Site de nutrition sportive

refonte site e-commerce

Dietfitness, site de nutrition sportive

Retour sur la création de la boutique en ligne d’un expert de la nutrition sportive à Marcq-en-Barœul, dans la région de Lille. Notre agence web à Caen et Bayeux a accompagné Alexis, gérant de Dietfitness, dans la refonte de son nouveau site e-commerce sur Prestashop.

Sommaire

Alexis

Dietfitness

Nous sommes très satisfaits, cela a été un vrai tournant numérique pour notre activité. Mathilde est très proactive, on la recommande vivement !

1. Les objectifs de la refonte du site de nutrition sportive Dietfitness à Lille

Notre client souhaitait créer un site de nutrition sportive professionnel et intuitif avec des fonctionnalités plus abouties que celles proposées par son site existant. Nous avons donc débuté ce projet en cadrant le besoin et en définissant les grands objectifs de cette refonte de site internet :

Design épuré

Un design épuré, moderne et responsive replaçant le produit au centre

Navigation simplifiée

Une navigation fluide avec une catégorisation plus claire des produits et la mise en place de filtres

Fiches produits optimisées

Une présentation plus détaillée des caractéristiques produits avec un onglet dédié aux valeurs nutritionnelles

Éléments de réassurance

Un système de récolte d’avis, des informations sur le paiement sécurisé et les délais de livraison

Recommandations produits

Des sections “Meilleures ventes” et “Nouveautés” ainsi qu’une stratégie de cross selling

Modes de livraison

La proposition de plusieurs modes de livraison avec calcul automatique des frais d’expédition

Blog

Un blog servant à prodiguer des conseils, à mettre en valeur l’expertise pointue du gérant, Alexis, et de son équipe

Optimisation SEO

Un travail d’optimisation SEO du contenu pour remonter Dietfitness dans les résultats de recherche

2. Créer un site de nutrition sportive sur Prestashop

Dietfitness avait conçu une première version de son site de nutrition sportive sur Jimdo, une solution SaaS de création de site internet. Très vite limité en termes de fonctionnalités et personnalisation, notre client a souhaité créer un site plus professionnel et intuitif.

Afin de créer la boutique en ligne de Dietfitness nous avons fait le choix de passer par la plateforme de commerce électronique Prestashop connue pour sa flexibilité et ses nombreuses fonctionnalités e-commerce. Prestashop présente plusieurs avantages particulièrement adaptés au projet et budget de Dietfitness :

Pour créer son site de nutrition sportive, nous avons envisagé plusieurs solutions dont Prestashop. Solution Open Source, Prestashop est une plateforme e-commerce gratuite. Son utilisation ne nécessite pas de souscrire à un abonnement mensuel contrairement à la plupart des logiciels SaaS. Seul l'achat d'un hébergement et d'un nom de domaine est requis pour mettre en ligne la boutique en ligne.

Les fonctionnalités intégrées à Prestashop sont nombreuses : administration de catalogue produits, gestion des commandes, configuration de multiples modes de paiement et livraison, paramétrage de la TVA, catégorisation des produits, génération de codes promotionnels, filtres, barre de recherche, outil de gestion des stocks, envoi automatique d'emails transactionnels. Ces nombreuses fonctionnalités natives à Prestashop peuvent ensuite être enrichies par une grande variété de plugins gratuits ou payants.

Côté administrateur, Prestashop propose une interface de gestion relativement simple et intuitive, et ce même pour les néophytes. Toutefois, nous avons fourni à l'équipe de Dietfitness un ensemble de tutoriels vidéos permettant d'administrer son site de nutrition sportive et de saisir les subtilités de la plateforme.

Une fois ces avantages présentés au client, nous avons procédé à la création de l’arborescence, du wireframe et du prototype (maquette graphique interactive). Ces livrables permettent de donner un premier aperçu du résultat final et de s’assurer que le parcours utilisateur soit optimal. Le site de nutrition sportive a ensuite été développé sur un environnement test permettant aux équipes de Dietfitness de suivre l’avancement du travail au fil des semaines.

3. Les fonctionnalités du site de nutrition sportive Dietfitness

📱 Un design épuré et une navigation simplifiée

Le site de nutrition sportive Dietfitness repose sur un design épuré, moderne et dynamique. Le choix d’un design graphique simple permet de mieux mettre les produits en avant. Cette mise en valeur du produit est permise par l’utilisation de photographies aux couleurs vives qui contrastent avec le fond blanc du site. Elle permet aux visiteurs de se concentrer pleinement sur les caractéristiques et les avantages produits. La boutique est responsive et s’adapte aux différents terminaux : ordinateur, tablette et mobile.

Parallèlement, une navigation simplifiée participe à la création d’une expérience utilisateur fluide. Plusieurs fonctionnalités permettent au visiteur de trouver les produits recherchés rapidement et de simplifier le parcours d’achat :

Une barre de recherche

La boutique en ligne propose une barre de recherche située tout en haut du site, au niveau du header, accessible à n’importe quel moment de la navigation.

Sections "Meilleures ventes" et "Nouveautés"

Ces catégories sont alimentées dynamiquement. Les produits récemment ajoutés dans le back office sont ajoutés à la section « Nouveautés ». Les produits les plus vendus sur le site sont listés dans la section « Meilleures ventes ».

Catégories de produits

Les produits sont classés en catégories et sous-catégories. L’utilisateur peut décider de voir l’ensemble des produits d’une catégorie, toutes sous-catégories confondues, ou de sélectionner une sous-catégorie précise à partir du menu de navigation.

Des filtres de recherche

Sur les pages des catégories Produits, l’internaute peut utiliser un système de filtres permettant de retrouver rapidement un produit. Le filtrage peut se faire en fonction de la marque du produit, de son prix, des meilleures ventes, de l’ordre alphabétique ou de la pertinence.

Un espace client

L’espace client permet aux clients de Dietfitness de retrouver tout leur historique de commandes au même endroit ainsi que leurs codes promotionnels. Il permet de renseigner leurs informations personnelles ou d’enregistrer des adresses de livraison.

Un panier facilement consultable

À n’importe quelle étape de son parcours sur la boutique en ligne, l’internaute peut consulter le contenu de son panier et son montant et ce sans changer de page ou être redirigé vers la page « Panier ».

📝 Des fiches produits détaillées

Les fiches produits ont également été conçues pour inciter à l’achat en fournissant un maximum d’informations sur les produits commercialisés par Dietfitness et maximiser la conversion sur le site de nutrition sportive. Chaque fiche produit est composée de plusieurs éléments cruciaux placés au-dessus de la ligne de flottaison :

Chaque produit est mis en valeur grâce à de multiples photographies :

une image d'ambiance qui contribue à l'esthétique visuelle du site ;
une image du produit réduit à son strict minimum souvent sur un fond blanc ou gris (packshot) ;
une image du produit en situation (en utilisation, dans les mains d'un(e) pratiquant(e) de sport ou musculation) ;
et parfois, une image de l'arrière du packaging avec les valeurs nutritionnelles.

Un titre clair et simple qui contient le mot-clé principal de la page. Une description courte qui permet de communiquer sur les principales caractéristiques et avantages du produit.

En-dessous du titre du produit, une note globale (sur 5 étoiles) permettant à l'utilisateur de juger de la qualité du produit selon les autres acheteurs Dietfitness.

Taille, contenance, parfum, poids etc. Chaque option proposée est associée à une image présentant le produit en question pour que l'internaute puisse se faire une idée très précise de la variante sélectionnée.

Un sélecteur de quantité permet d'ajouter un même produit en plusieurs exemplaires d'un seul clic. Chaque fiche produit présente une étiquette renseignant l'internaute sur la disponibilité ou indisponibilité du produit : "En stock", "Bientôt épuisé" ou "Épuisé" avec un code couleur spécifique (vert, orange, rouge).

La mention de paiement 100% sécurisé accompagné des badges de paiement est placée à proximité du bouton d'Ajout au panier pour rassurer l'internaute et maximiser la conversion.

Sur chaque fiche produit est spécifié le délai de livraison en nombre de jours.

Les fiches produits présentent d’autres éléments d’informations complémentaires situés, cette fois-ci, en-dessous de la ligne de flottaison :

Description longue
Avis clients
Cross selling

La description longue permet de compléter la description courte et de travailler le référencement naturel (SEO). Un onglet "Détails du Produit" reprend la marque du produit, la contenance et/ou poids, la dose recommandée et les valeurs nutritionnelles de chaque produit.

Une section avis permet aux utilisateurs de laisser un avis sur le produit et de consulter les avis laissés par les autres internautes. Nous avons mis en place l'envoi automatique d'emails permettant de solliciter le dépôt d’avis auprès des internautes ayant reçu leur commande.

Une fonction de cross selling qui permet de mettre en avant des produits complémentaires. la section ‘Les clients qui ont acheté ce produit ont également acheté” est alimentée automatiquement à l’aide des statistiques de la boutique. La section “Vous aimerez aussi” permet également à Dietfitness de recommander d’autres produits de son choix, et ce pour chaque produit.

🚚 Des options de livraison & modes de paiement diversifiés

Dietfitness souhaitait pouvoir proposer différents modes de livraison et de paiement sur son site e-commerce sur son site de nutrition sportive.

3 modes de livraison

Le calcul des frais de livraison se fait automatiquement en fonction du poids et du mode de livraison sélectionné par le consommateur final.

2 modes de paiement

Nous avons configuré un système de remboursement via Prestashop pour gérer facilement les avoirs ou remboursements, qu’ils soient complets ou partiels et ce, en quelques clics.

Commande en mode invité

Nous avons mis en place sur le site de nutrition sportive, la commande en mode invité pour réduire l’abandon de panier. La création du compte client permet, quant à elle, d’accélérer le processus d’achat en sélectionnant en 1 clic les informations de livraison et facturation précédemment renseignés.

🌟 Des éléments de réassurance pour renforcer la confiance l'internaute

Les éléments de réassurance sont tous les éléments qui vont renforcer la confiance des visiteurs à l’égard de votre entreprise tout au long de la navigation.

Dans notre projet de créer le site de nutrition sportive Dietfitness, nous avons veillé à intégrer des éléments de réassurance pour maximiser la conversion et lever les freins à l’acte d’achat :

Un bandeau situé au-dessus du menu footer sur toutes les pages du site pour rappeler les forces de Dietfitness : livraison gratuite à partir d’un certain montant, service client réactif, les engagements Dietfitness, le paiement sécurisé ou encore le click&collect en 1h.

La page « À propos » décrit la mission, les engagements et les horaires d’ouverture de Dietfitness. Elle permet – tout comme le blog – de donner une dimension plus humaine au site et de mettre en valeur l’expertise de l’équipe Dietfitness dans l’accompagnement de ses clients.

Soucieux d’éviter les tentatives de fraudes, les consommateurs portent une grande importance à la sécurité de leurs données, et notamment à leurs données bancaires. Toutes les transactions sont sécurisées à l’aide d’un cryptage SSL, garantissant à la fois l’identité de l’organisme de paiement et la confidentialité des données. Les badges de sécurité sont affichés tout au long du parcours d’achat.

L’intégration d’un widget de chat lié à Facebook Messenger permet à l’équipe de Dietfitness de répondre aux demandes en direct lors des horaires d’ouverture de la boutique située à Marcq-en-Baroeul, près de Lille

Un système de notation et de d’avis est accessible depuis chaque fiche produit. La note Google My Business de Dietfitness, gage de qualité, est affiché dans le menu footer et consultable à tout moment de la navigation.

La politique de livraison accessible depuis le footer ainsi que sur chaque fiche produit détaille les tarifs et les délais de livraison pour plus de transparence.

En plus des avis et témoignages, le site de nutrition sportive Dietfitness affiche en page d’accueil son feed Instagram qui participe de la preuve sociale sur sa boutique en ligne.

Nous avons également mis le site en conformité avec la RGPD et les recommandations de la CNIL en rédigeant 3 textes légaux distincts : Conditions Générales d’Utilisation comportant les Mentions légales, la politique de confidentialité et la politique de cookies. Un bandeau cookies permettant d’accepter, de paramétrer ou de refuser le dépôt de cookies sur le terminal de l’utilisateur est également affiché lors de la première visite de l’internaute sur le site. Pour plus d’informations à ce sujet, consultez notre article de blog : “RGPD : les mentions obligatoires pour votre site internet«

Pour maximiser la conversion, nous avons également paramétré la fonctionnalité de création de codes promotionnels native à Prestashop permettant de créer – en fonction des opérations marketing et/ou des saisons – des offres promotionnelles utilisables lors du processus de commande.

4. Optimisation SEO : augmenter la visibilité de Dietfitness sur les moteurs de recherche

En parallèle, nous avons travaillé à améliorer le référencement naturel du site de nutrition sportive de Dietfitness en intégrant les bonnes pratiques SEO dès la conception du nouveau site pour renforcer la position du site dans les résultats de recherche et attirer un trafic qualifié. Nous avons notamment mis en place un plan d’optimisation du contenu avec entre autres :

Résultat ? Une nette augmentation du trafic organique entre mars 2022 et septembre 2023 sur la boutique en ligne :