E-commerce · mode
Couleurs d'Afrique 974 — Refonte d'une boutique en ligne de prêt-à-porter wax
Une boutique de prêt-à-porter wax à La Réunion, passée de WooCommerce à une plateforme sur mesure : l'univers de la marque au premier plan, un parcours d'achat plus clair et une base technique enfin facile à faire évoluer.
Voir le siteCouleurs d'Afrique 974 (nouvel onglet)Contexte
Faire évoluer une boutique existante sans perdre son identité.
Couleurs d'Afrique 974 vend en ligne du prêt-à-porter autour de l'univers wax. La boutique existait déjà, sur une base WooCommerce devenue lente et difficile à faire évoluer.
Une boutique en ligne ne se contente pas d'afficher un catalogue. Elle doit faire comprendre immédiatement l'univers de la marque, laisser découvrir les produits facilement, se consulter aussi bien sur téléphone que sur ordinateur et accompagner l'achat sans friction.
La refonte devait donc trouver un équilibre entre trois exigences qui tirent souvent dans des directions opposées : l'identité de marque, l'efficacité commerciale et la qualité technique.
Changer l'apparence d'une boutique ne suffit pas : c'est son fonctionnement qu'il fallait reprendre.
Refonte
Repenser plus que l'apparence.
La boutique a été entièrement reconstruite sur une base Django et Nuxt. Mais une refonte n'est pas une remise à zéro : ce qui faisait la boutique — son catalogue, ses commandes passées — a été repris, et la nouvelle version a été éprouvée avant de remplacer l'ancienne.
Le déroulé de la refonte
- Reprise du catalogue
- Reprise de l'historique des commandes
- Nouvelle plateforme Django / Nuxt
- Préversion à part, non indexée
- Tests
- Bascule en production
Chaque étape protège l'existant : rien du passé de la boutique n'est perdu, et le site en ligne reste en place tant que la nouvelle version n'a pas fait ses preuves.
UX / UI
Donner de la place aux produits sans compliquer le parcours.
La cliente, le client
L'univers wax repose sur les motifs et les couleurs : les visuels doivent occuper l'espace, sans que la navigation se perde dans le décor.
- Comprendre l'univers de la marque dès l'arrivée
- Parcourir les catégories naturellement
- Voir les produits dans de bonnes conditions
- Retrouver les informations utiles à la commande
- Aller jusqu'à l'achat sans détour
La boutique
Côté gestion, la priorité est la simplicité : une boutique qui se met à jour et se pilote sans lutter contre l'outil.
- Catalogue et médias
- Suivi des commandes et de leurs statuts
- Délais de livraison par zone
- Produits à acompte et bons cadeaux
Le travail d'interface ne consistait pas à neutraliser une identité forte pour obtenir un e-commerce générique, mais à la mettre au service des produits : une hiérarchie lisible, des visuels généreux, et un parcours qui reste simple.
E-commerce
Du catalogue à la commande.
Catalogue
- Catalogue repris depuis l'ancienne boutique
- Catalogue bilingue
Offres
- Produits à acompte
- Bons cadeaux
- Options riches et variées dans le tunnel de vente
Commandes
- Historique des commandes repris
- Statuts de commande
- Délais de livraison par zone
Architecture et performance
Une base plus rapide et plus facile à faire vivre.
La lenteur de l'ancienne boutique faisait partie du constat de départ. La nouvelle architecture sépare l'interface, portée par Nuxt, de la logique de la boutique, portée par Django : chaque partie peut évoluer sans fragiliser l'autre, avec un objectif d'affichage rapide.
Les médias sont stockés hors du code : une boutique de mode vit de ses photos, et chaque mise à jour du site les laisse intactes.
- Frontend
- Nuxt
- Backend
- Django
- Médias
- Stockés hors du code
- Données reprises
- Catalogue et commandes
Responsive
Le même parcours, quel que soit l'écran.
Pour une boutique de mode, la visite commence souvent sur un téléphone. Le responsive n'est pas une version réduite du site : c'est le même parcours, pensé pour rester naturel sur chaque écran.
- Les visuels gardent leur place sur petit écran, sans écraser le reste de la page.
- La lecture des produits et des informations reste confortable, sans surcharge.
- Les actions principales restent à portée, du catalogue jusqu'à la commande.
- Ordinateur, tablette et téléphone partagent une même logique de navigation.
Reprise de l'existant
Une refonte n'est pas une remise à zéro.
Une boutique en place a un passé : des produits, des clients, des commandes. Le catalogue et l'historique des commandes ont été repris dans la nouvelle plateforme, pour que la refonte n'efface rien de l'activité existante.
La nouvelle version a été testée sur une préversion séparée et non indexée, avant toute bascule : le site en ligne n'était pas exposé à une version inachevée, ni aux yeux des clients ni à ceux des moteurs de recherche.
Bilan
Ce que le projet a permis de construire.
- 01Une identité de marque mieux mise en valeur.
- 02Un parcours e-commerce plus cohérent, du catalogue à la commande.
- 03Une expérience pensée pour les produits sur tous les écrans.
- 04Une continuité préservée : catalogue et commandes repris.
- 05Une architecture maîtrisée, plus facile à maintenir.
- 06Une base qui permet de poursuivre l'évolution de la boutique.
