Aller au contenu

Refonte de plusieurs sites pour le Groupe WPI

Le groupe WPI a souhaité effectuer une refonte de ses principaux sites de catalogues et de vente de produits en b2c dédiés aux univers de la piscine, du spa et du bien-être. L’objectif de ces sites est de capter des prospects en communiquant sur les produits, ainsi que de permettre à des clients potentiels d’identifier rapidement le revendeur le plus proche.

Les sites souffraient d’une ergonomie et d’une structure graphique obsolète, ainsi que d’une TMA trop lourde de par l’utilisation de Ruby on Rails, technologie beaucoup trop poussée pour le besoin réel. L’équipe de WPI a fait appel à Imagile afin de l’accompagner dans la refonte graphique responsive de ces environnements et dans l’utilisation autonome du CMS WordPress.

Pour chaque site, les enjeux et les objectifs vont donc être les suivants :

  • Intégrer les standards de développements web afin de diminuer les coûts de maintenance et d’évolutivité
  • Organiser le site de manière à rendre l’accès à l’information rapide
  • Avoir un site responsive pour répondre aux usages actuels en termes de supports de consultation
  • Fournir une autonomie aux gestionnaires de contenu par l’utilisation du CMS WordPress
  • Rester dans des standards de développements
  • Utiliser un code source optimisé pour le référencement naturel
Sites du groupe WPI

page revendeurs - l eau bien-être
Espace revendeurs sur le site de L'Eau Bien-Être

Les 3 sites comportent une carte interactive qui permet de localiser les revendeurs. La gestion de ces cartes doit pouvoir être autonome pour les gestionnaires de contenu des sites, afin de pouvoir ajouter / supprimer des revendeurs à leur convenance.

Pour ce faire, nous utilisons l’API de Open Street Map combinée à l’ajout d’un Custom Post Type. Ici, nous ajoutons donc des champs d’adresse, que nous transmettons ensuite à l’API qui va alors générer une carte contenant toutes les localisations des revendeurs renseignées.

Sur le site de SPA WPI, chaque rendeur dispose de sa propre page pour approfondir les informations renseignées.

Le site « Les Bonnes Affaires Piscines » est un site de vente de piscines et spa, ainsi que d’accessoires et aménagements extérieurs. Il permet de commander et de se faire livrer chez soi ou chez le revendeur de son choix.

N’étant pas optimisé pour une utilisation responsive, la navigation sur le site devenait vite compliquée pour les utilisateurs. Il a donc fallu dans un premier temps retravailler le menu et la hiérarchie pour améliorer le parcours utilisateur. En parallèle, nous avons conçu des maquettes graphiques du site, afin de proposer au client plusieurs versions de la page d’accueil et de la page de catégorie de produits.

Kit UI Les Bonnes Affaires Piscines
Kit UI pour le site Les Bonnes Affaires Piscines

Le travail sur les maquettes s’effectue en plusieurs étapes :

  • Échange avec l’équipe décisionnelle pour récolter le plus d’informations sur l’idée qu’ils se font de leur futur site
  • Conception de plusieurs propositions, grâce à des logiciels tels que Figma ou Adobe XD
  • Réunion avec l’équipe décisionnelle pour présenter ces propositions et recevoir les différents retours client
  • À ce moment, 2 possibilités se présentent :
    • une retouche des maquettes est à faire, ou un mélange des plusieurs propositions : nous concevons une nouvelle version de la maquette et la présentons à nouveau, jusqu’à validation complète de la maquette.
    • une des maquettes est validée : nous faisons une itération de cette maquette sur plusieurs pages du site (archive du blog ou de produits, page d’un produit ou d’un article…), et produisons un kit UI

Le kit UI est un regroupement de plusieurs éléments du site définissant sa charte graphique. Il est utile aux développeurs pour avoir une documentation des styles à utiliser. On y retrouve les couleurs du site, les typographies, les styles des boutons dans leurs différents états (principalement standard et au survol), des éléments qui seront répétés sur le site, comme le header, le footer, des cartes produits par exemple…

Ce n’est qu’une fois le design validé, les maquettes et le kit UI finalisés, que nous passons à l’intégration sur le site.

LBAP responsive
Le nouveau site responsive des Bonnes Affaires Piscines

Sur WordPress, nous avons à disposition un plugin spécifique au e-commerce : WooCommerce. Ce plugin a de nombreux avantages parmi lesquels :

  • être open-source
  • gratuit
  • nous faire gagner beaucoup de temps car les fonctionnalités e-commerce sont toutes implémentées de base
  • suivi par une très grande communauté dans le monde entier
  • un suivi des versions de WordPress et des mises à jour régulières

Nous pouvons donc sans crainte utiliser WordPress pour la gestion d’une boutique en ligne.

Afin de gagner du temps et éviter les pertes de données, nous utilisons un export de la base de données de l’ancien site pour récupérer les produits avec leur description et tous les détails. Cet export est ensuite formaté pour correspondre à la base de donnée de Woocommerce et permet de recréer une boutique avec tous les éléments du site d’origine.

Néanmoins, étant donné que nous utilisons notre propre système de gestion de contenu optimisé pour le référencement, il est nécessaire de repasser sur les descriptions des produits afin d’intégrer leur contenu dans ce nouveau système.

Le site « L’Eau Bien Être » est un site catalogue piscines, bien-être (spa, jacuzzi), et équipements. Il est également un blog, regroupant non seulement des actualités événementielles et de réalisations, mais aussi des conseils techniques et des tutoriels.

Le site de « SPA WPI » regroupe le catalogue de spa uniquement. Il intègre également le même type de blog que L’Eau Bien-Être : articles et conseils pratiques.

Catégories de spa
Catégories de spa avec champs spécifiques - SPA WPI

Pour gérer ces catalogues, nous utilisons à nouveau les Custom Post Types, afin de générer des types de contenus « produit » sans avoir à gérer un quelconque panier ni prix. Ceci nous permet d’éviter d’avoir à utiliser Woocommerce, qui serait un trop gros plugin à installer et maintenir pour une simple consultation.
De plus, les Custom Post Type nous permettent tout de même la gestion de catégories de produits, ce qui nous permet, dans SPA WPI par exemple, de regrouper les SPA en 4 gammes différentes. Les catégories ayant leur propre champs customisables, nous pouvons pousser la personnalisation du site pour correspondre aux attentes du client.

Nous offrons de plus la possibilité sur chaque page — produit ou catégorie de produit — d’utiliser notre système de gestion de contenu pour optimiser le référencement.

Par ailleurs, pour augmenter encore davantage le référencement, un maillage interne se fait entre les différents spa, afin aussi d’optimiser le parcours utilisateur et lui laisser la possibilité de naviguer d’un spa de même catégorie à un autre. Nous effectuons le même maillage dans les articles en affichant les derniers articles de la même catégorie ou, dans le cas où aucune catégorie n’est précisée, en ajoutant un lien vers l’article précédent et/ou suivant.

Single Categorie - SPA WPI
La page d'une catégorie de SPA, avec son contenu optimisé SEO et la liste des SPA de cette catégorie
Single Spa - SPA WPI
La page d'un SPA, avec son contenu optimisé SEO, ses champs spécifiques et un lien vers les spa de même catégorie
Article - SPA WPI
Article où l'on retrouve les liens vers les articles précédent et suivant
espace pro l'eau bien-être
L'espace professionnel de l'Eau Bien Être

Sur les sites spawpi.com et leaubienetre.com, il existait un espace professionnel. Ces espaces, réservés aux revendeurs, sont mis en place pour mettre à disposition des fichiers privés hébergés sur Google Drive.

Chaque revendeur peut se connecter via un identifiant/mot de passe personnel.

Afin de conserver cette disposition et perdurer le stockage déjà en place pour le client, nous avons utilisé l’API de Google Drive, créant ainsi un lien entre les utilisateurs de WordPress ayant un rôle bien défini, avec leur espace personnel disponible sur le Drive.

Ainsi, le client peut garder la main de façon totalement autonome sur la gestion de ses revendeurs et des accès aux fichiers à leur disposition sur le drive.

Notre approche vous séduit ?

Contactez-nous, ou venez nous rencontrer pour discuter de vos projets.