Projet de Stage : Refonte Stratégique et Optimisation des Performances Web

Ce projet de stage, réalisé au sein de AAINVEST, portait sur la refonte complète du site e-commerce et vitrine développé sous WordPress. L’objectif principal était de moderniser l’expérience utilisateur (UX/UI) et d’assurer une performance technique optimale.

Cette page présente les différentes étapes de ma méthodologie : création d’un environnement de staging, gestion d’une crise post-migration (erreur de base de données et détection de malware), puis optimisation finale des Core Web Vitals.

Le projet s’est conclu par une amélioration significative des performances, atteignant un score de 100/100 sur Desktop et 90/100 sur Mobile selon Google PageSpeed Insights.

Visualisez le résultat de ce projet en direct.

Voir le Site Web

Restructuration Totale du Site E-commerce aainvest.be

Objectif de la rénovation : Moderniser l’interface utilisateur (UI/UX), améliorer l’engagement client et renforcer l’image de marque professionnelle.

Page d’Accueil

La refonte de la page d’accueil a été l’un des éléments centraux du projet...

🔹 Problèmes identifiés (version avant)

La barre de navigation était désorganisée... La Hero Section affichait directement le catalogue produits...

🔹Solutions et améliorations UX/UI

Création d’une top bar claire.Réorganisation complète de la navigation principale...

aainvest-home-page after-home

Design Fonctionnel et Confiance Client : Pages “Nos Services” et “Contactez-nous”

🔹 Page “Nos Services” : Structuration et mise en valeur de l’expertise

Refonte complète de la page afin de présenter les offres de manière claire et professionnelle. Mise en avant des deux services clés :

Installation et Aménagement Sur Mesure valorisent le service personnalisé et la flexibilité.Service de Réparation Rapide & Professionnelle (SAV) met l’accent sur la réactivité et le support après-vente.

🔹 Défi technique : Gestion de la taxonomie WordPress

Reconstruction complète de la structure des catégories avec une hiérarchie logique (catégories principales et sous-catégories comme “Diamond” et “Diverso”). Réaffectation manuelle de chaque produit à sa nouvelle catégorie. Création de catégories temporaires (ex. “2.0”, “3.0”) pour garantir la stabilité des données pendant la migration.

🔹 Solution UX : Mise en place d’un menu accordéon

Installation et configuration d’un plugin dédié (WP Accordion Menu). Création d’un nouveau menu latéral à partir des catégories restructurées. Résultat : un affichage compact, moderne et facilement navigable, améliorant considérablement l’ergonomie et la lisibilité du site.

page services page contact

Design de Pages Spécifiques : "Diamond" et "Diverso" (Stratégie de Contenu & Engagement)

Objectif: Créer des pages de marque dédiées afin de valoriser les gammes "Diamond" et "Diverso", renforcer la crédibilité et améliorer l’expérience d’achat client.

🔹 Page “Diamond” : Mise en Avant de la Marque

Installation et Aménagement Sur Mesure valorisent le service personnalisé et la flexibilité.Service de Réparation Rapide & Professionnelle (SAV) met l’accent sur la réactivité et le support après-vente.

  1. Création d’une page entièrement dédiée à la marque “Diamond”, leader en équipement HORECA professionnel.
  2. Présentation claire des valeurs et de l’identité de la marque à travers une introduction concise et impactante.
  3. Intégration d’images interactives avec effet hoverpour dynamiser la navigation et encourager l’exploration.
  4. Ajout d’un CTA final redirigeant vers le catalogue complet “Diamond”, favorisant la conversion et l’engagement.

🔹Page “Diverso” : Découverte Produit Directe

Installation et Aménagement Sur Mesure valorisent le service personnalisé et la flexibilité.Service de Réparation Rapide & Professionnelle (SAV) met l’accent sur la réactivité et le support après-vente.

  1. Création d’une page orientée produit pour la gamme “Diverso” (“Ingrédients Spéciaux & Produits Complémentaires HORECA”).
  2. Présentation simple et élégante, axée sur la découverte directe des articles.
  3. Mise en place d’un catalogue de cartes produits interactives, avec possibilité d’ajouter les articles directement au panier.
  4. Ajout d’un CTA redirigeant vers la page “Diverso” pour encourager une exploration croisée des gammes.
diamond-page diverso-page

Déploiement et Crise : Gestion et Stabilisation DB.

Phase 1 : Crise Immédiate et Communication

Problème :

Suspension immédiate du site par l'hébergeur, affichant une Erreur de connexion à la base de données.

Action :

Prise de contact rapide avec l’hébergeur One.com et diagnostic du faux positif lié à un prétendu malware.

Compétences Clés :

Gestion de crise (réactivité et priorisation), communication technique claire avec le support.

Phase 2 : Diagnostic Technique et Localisation de la Panne

Action :

Accès direct à phpMyAdmin pour localiser la cause de l’échec de connexion.

Compétences Clés :

Expertise backend (MySQL / phpMyAdmin), analyse et diagnostic précis des erreurs de base de données.

Phase 3 : Résolution et Rétablissement du Service

Action :

Réparation et réimportation manuelle de la base de données, suivies du rétablissement complet du site

Compétences Clés :

Résolution de problèmes critiques, restauration complète du service, fiabilité post-déploiement.

errore database database ok

Visualisez le résultat de ce projet en direct.

Voir le Site Web