Refonte de la boutique en ligne Muslimadani : processus et résultats

Avez-vous déjà été frustré par les performances de votre propre site Web ?

C’est exactement ce que l’équipe de Muslimadani.id a ressenti. Il s’agit d’une marque en ligne vendant des vêtements musulmans pour hommes, et elle était confrontée à une vitesse de chargement lente, en particulier lorsque les clients essayaient de cliquer sur le bouton Ajouter au panier sur les pages de produits. Ce type de friction a clairement réduit leur taux de conversion des ventes en ligne.

Après avoir contacté plusieurs fournisseurs, ils ont finalement décidé de travailler avec nous chez Harun Studio. Une longue discussion via WhatsApp et des appels téléphoniques m’ont aidé à comprendre l’ampleur réelle des problèmes.

J’ai commencé par un audit technique et j’ai trouvé plusieurs causes principales à la lenteur du magasin. Fort de cette compréhension, j’ai conçu une stratégie pour améliorer les performances de chargement.

Pour faire court, après la mise en œuvre de plusieurs étapes d’optimisation, les résultats ont commencé à apparaître. Le site Web est devenu beaucoup plus rapide, ce qui a créé une bien meilleure expérience pour les clients de Muslimadani.id.

Leur satisfaction à l’égard de ces premiers résultats a ouvert la porte à une discussion plus large sur d’autres améliorations, notamment le référencement, le taux de conversion, etc.

J’ai ensuite effectué un audit plus complet de leur boutique en ligne et j’ai constaté qu’il y avait encore beaucoup de choses à améliorer.

Sur la base de cet audit, Muslimadani.id a décidé de franchir une étape plus importante : une refonte complète du site Web axée sur les performances et la conversion.

Cette transformation impliquait plusieurs étapes stratégiques, notamment le choix d’un thème plus léger et plus réactif, la conversion d’Elementor vers Blocks, la réduction des plugins inutiles et la migration de l’hébergement vers un VPS plus fiable géré par Harun Studio. Chaque étape a été traitée avec soin pour garantir l’amélioration de l’expérience utilisateur et l’augmentation du potentiel de conversion.

Le résultat ? Un site Web plus rapide, plus réactif et bien plus prêt à servir les clients de Muslimadani.id. Cette refonte ne concernait pas seulement un nouveau look visuel. Il s’agissait de créer une meilleure expérience d’achat susceptible de soutenir la croissance de l’entreprise.

Identification du problème : comment j’ai découvert les goulots d’étranglement dans la précédente boutique Muslimadani.id

Pourquoi Muslimadani.id a-t-il accepté de lancer un projet de refonte ? Ils souhaitaient utiliser des canaux tels que Google Ads, Facebook et Instagram pour attirer plus de trafic vers leur boutique en ligne.

Cependant, j’ai expliqué que si la conception du magasin n’était pas axée sur la conversion des ventes, les campagnes publicitaires ne fonctionneraient pas efficacement pour transformer ce trafic en acheteurs.

Pour cette raison, j’ai commencé par un audit complet du site. J’ai examiné chaque page importante, de la page d’accueil, de la page de la boutique et des pages de produits au panier et à la caisse. J’ai également analysé le contenu et identifié des solutions pour chaque problème que j’ai trouvé.

Bien entendu, je ne peux pas inclure l’intégralité du rapport d’audit dans cette étude de cas. Concentrons-nous donc sur un exemple important : l’audit de la page produit du bureau.

Après un examen plus approfondi, j’ai trouvé au moins sept problèmes majeurs dans la conception précédente de la page produit :

1. Le bouton « Ajouter au panier », ainsi que les options « Choisir la couleur » et « Choisir la taille », ont été placés sous la description du produit plutôt qu’en haut, là où les utilisateurs l’attendent généralement. Cela peut réduire la conversion des ventes.

2. La sélection de variantes obligeait les clients à cliquer d’abord sur le menu déroulant « Choisir une option » juste pour voir les couleurs et les tailles disponibles.

3. Les variantes de couleurs ont été présentées uniquement sous forme de texte, sans échantillons de couleurs ni visuels à l’appui. Par exemple, les utilisateurs pourraient avoir du mal à distinguer le marron du rouge foncé simplement en lisant les étiquettes.

4. La description du produit utilisait une couleur de police qui n’était pas assez claire, qui semblait moins soignée et qui était trop longue. Idéalement, une partie devrait être réduite pour faciliter la numérisation de la mise en page.

5. Les informations sur le produit manquaient d’étiquettes indiquant si l’article était nouveau, à prix réduit, tendance ou un best-seller. Ces détails aident souvent les clients à prendre une décision d’achat.

6. Il n’y avait aucune information susceptible de renforcer la confiance, telle que l’assistance à l’expédition, le paiement à la livraison, la livraison dans tout le pays, l’échange de taille gratuit ou les garanties de remboursement.

7. Il n’y avait aucune information de « Transaction sécurisée » à côté du bouton d’ajout au panier pour aider les clients à se sentir plus en confiance lors de leur commande.

Et voici à quoi ressemblait la page produit après la refonte :

Pouvez-vous voir la différence ?

• Avez-vous remarqué les flèches gauche et droite sur l’image du produit et la galerie de produits visible à côté de l’image principale ?

• Avez-vous également remarqué le bouton « Ajouter au panier », qui semble plus approprié que « Ajouter au panier », et comment il se démarque comme l’un des éléments les plus importants de la page, à part le bouton WhatsApp ?

• Et les courtes informations de stock que j’ai personnalisées avec des messages du type “Dépêchez-vous, il n’en reste que 2 en stock !” lorsque le stock tombe en dessous de 5, ou “Il n’en reste que 1 pour cette variante. Commandez maintenant avant que quelqu’un d’autre ne le fasse.” quand il ne reste qu’un seul élément ?

Je me suis également assuré de conserver les couleurs et la typographie de la marque qu’ils avaient déjà utilisées sur leurs réseaux sociaux et de les appliquer de manière cohérente sur l’ensemble du site Web. Cela a permis de maintenir la cohérence de la marque et de créer une expérience plus cohérente pour les clients.

Reconstruire le thème avec la rapidité comme priorité

Utilisation de GeneratePress et GenerateBlocks

Pour obtenir les meilleures performances possibles, j’ai décidé de convertir le site Web d’un thème ThemeForest et du constructeur de pages Elementor en GeneratePress combiné avec GenerateBlocks.

GeneratePress est un thème WordPress léger et rapide, tandis que GenerateBlocks offre une flexibilité de conception sans sacrifier la vitesse. Les conceptions précédemment préparées dans Figma ont été reconstruites dans leur site WooCommerce en utilisant cette combinaison. Le résultat a été un site Web visuellement solide tout en étant réactif et rapide.

Travail de code personnalisé

Pour répondre aux besoins spécifiques de Muslimadani.id, j’ai écrit plus de 1 000 lignes de code personnalisé. Cela couvrait des fonctionnalités telles que les informations sur la taille des vêtements sur les fiches produits, les prix personnalisés sur les pages de produits et divers autres éléments permettant une meilleure expérience d’achat.

Déplacement du site Web de l’hébergement partagé Niagahoster vers un VPS SpeedyPage

Pour m’assurer que le site Web puisse fonctionner de manière optimale et gérer plus facilement un trafic plus élevé, j’ai migré l’hébergement de l’hébergement partagé Niagahoster vers un VPS SpeedyPage avec les spécifications suivantes :

• AMD Ryzen 7900
• Mémoire DDR5
• Stockage NVMe
• Emplacement du serveur à Singapour

J’ai optimisé le VPS à l’aide d’une stack LEMP : Linux, Nginx, MySQL et PHP. Avec la bonne configuration de serveur, j’ai pu maximiser les performances de WooCommerce et m’assurer que le site Web Muslimadani.id reste rapide et stable.

Pourquoi passer à un VPS ?

Il existe de nombreuses raisons au-delà du fait que tous nos clients de maintenance sont placés sur un hébergement VPS hautes performances, mais en parlant spécifiquement de vitesse, l’impact principal est sur TTFB.

Auparavant, Muslimadani.id fonctionnait sur un hébergement partagé avec les limitations habituelles. L’hébergement partagé signifie que les ressources du serveur sont partagées avec de nombreux autres sites Web, ce qui entraîne souvent un ralentissement du délai d’obtention du premier octet. TTFB est le temps nécessaire au navigateur pour recevoir le premier octet du serveur après avoir effectué une requête.

Un TTFB lent peut affecter plusieurs mesures de performances importantes, notamment :

• First Contentful Paint (FCP) : rapidité avec laquelle le premier contenu visible apparaît
• Largest Contentful Paint (LCP) : à quelle vitesse le plus grand élément apparaît
• Temps de blocage total (TBT) : durée pendant laquelle les utilisateurs ne peuvent pas interagir car JavaScript ou CSS bloque la page
• Cumulative Layout Shift (CLS) : la stabilité de la mise en page pendant le chargement de la page

En passant à un VPS, nous avons donné à Muslimadani.id des ressources dédiées. Cela a considérablement réduit le TTFB et amélioré les performances globales du site. Le résultat a été une expérience utilisateur plus rapide et plus réactive, ce qui peut à terme améliorer le taux de conversion et la satisfaction client.

Conclusion : une transformation réussie

Avec la conversion d’Elementor vers GeneratePress et GenerateBlocks, ainsi qu’une refonte plus conviviale pour l’acheteur, Muslimadani.id a réussi à améliorer la vitesse globale du site Web et l’expérience utilisateur.

Une meilleure vitesse n’améliore pas seulement l’expérience de navigation. Cela a également un impact positif direct sur la conversion.

Les clients peuvent désormais explorer les produits et effectuer leurs achats plus rapidement et plus facilement, ce qui améliore en fin de compte la satisfaction et la fidélité.

Si vous souhaitez discuter de la prochaine étape à suivre pour votre magasin, vous pouvez planifier une consultation gratuite.