Refonte Shopify : intégrer la conversion dès les maquettes

Une refonte commence souvent par une demande visuelle. La marque a changé, le thème paraît daté, les concurrents ont progressé, le mobile manque de clarté. Puis le projet avance. Les maquettes sont validées, le développement démarre et la conversion arrive tard dans la discussion, sous la forme d'une liste de corrections : remonter un CTA, ajouter de la réassurance, raccourcir une page, rendre le panier plus visible.

À ce stade, les décisions les plus structurantes sont déjà prises. La hiérarchie de l'information, le rôle de chaque template, la place des preuves, les données nécessaires et les états fonctionnels sont inscrits dans le design.

Une refonte orientée conversion traite ces sujets avant le développement. Elle ne promet pas qu'un nouveau design fera mécaniquement progresser un taux. Elle organise le projet autour des décisions que le client doit pouvoir prendre : comprendre l'offre, trouver le bon produit, choisir une variante, lever un doute, acheter, puis savoir ce qui se passe après le clic.

La conversion n'est pas une couche posée sur l'interface

Changer la couleur d'un bouton reste une décision d'interface. La conversion, elle, dépend d'un système plus large : qualité du trafic, clarté de l'offre, prix, disponibilité, contenu, confiance, vitesse, paiement et contraintes opérationnelles. Une refonte ne contrôle pas tout ce système.

Elle peut toutefois rendre le parcours plus lisible et mieux instrumenté. Par exemple : une taille impossible à choisir, un délai de livraison caché, une promotion mal expliquée, une fiche produit qui demande de connaître le vocabulaire interne de la marque, ou un module mobile qui masque l'action principale.

Le bon brief ne demande donc pas seulement à quoi le futur site doit ressembler. Il précise ce que chaque parcours doit permettre, quelles informations sont disponibles pour y parvenir et comment l'équipe vérifiera le résultat.

1. Fixer le problème avant de dessiner la solution

Le cadrage commence par les raisons de la refonte. Une phrase comme « moderniser l'expérience » ne suffit pas. Elle décrit une intention, pas un problème observable.

Nous cherchons plutôt des situations précises : des visiteurs arrivent directement sur les pages produit sans comprendre la gamme, le sélecteur de variantes ne reflète pas les règles du catalogue, les équipes ne peuvent pas modifier une page sans intervention technique, ou le tracking ne distingue pas correctement les étapes du parcours. Chaque situation appelle une réponse différente.

Le brief de travail peut documenter :

• les audiences prioritaires et leur niveau de connaissance de la marque ;
• les portes d'entrée réelles, notamment collection, page produit, campagne et recherche ;
• les décisions commerciales qui doivent rester visibles ;
• les contraintes du catalogue, des marchés, du stock et des promotions ;
• les données disponibles et les trous à combler ;
• les indicateurs actuels, à conserver comme référence uniquement si leur définition est fiable.

2. Cartographier les parcours qui comptent vraiment

Pour une boutique Shopify, nous cartographions d'abord quelques parcours réels plutôt qu'un chemin idéal unique. Un client fidèle qui rachète une référence connue n'a pas besoin du même niveau d'explication qu'un nouveau visiteur qui compare plusieurs produits. Une personne arrivée depuis une campagne peut ignorer la collection. Une autre commence par le moteur de recherche interne et attend des résultats compatibles avec son besoin.

Chaque parcours associe quatre éléments : l'intention, les questions d'achat, les points de friction possibles et les composants qui donnent une réponse. Cette carte révèle vite les dépendances. Si le client doit choisir selon une matière, un usage ou une compatibilité, la donnée doit exister dans Shopify ou dans le PIM. Le design ne peut pas inventer une information que l'organisation ne produit pas.

3. Transformer les questions d'achat en architecture de contenu

Le contenu de conversion ne se limite pas à une accroche et à un bouton. Il répond aux questions qui empêchent une décision. La nature de ces questions dépend du produit.

Pour un vêtement, la coupe, la taille, la matière, l'entretien et le rendu en mouvement peuvent être déterminants. Pour un soin, le type de peau, le mode d'emploi, la routine, la composition et les précautions prennent davantage de place. Pour un produit technique, la compatibilité, les dimensions, la livraison ou l'installation peuvent passer avant le récit de marque.

Nous utilisons une matrice simple : question du client, réponse attendue, source de la donnée, responsable, composant et état de validation. Cette matrice évite de découvrir pendant l'intégration que les textes n'existent pas, que les médias ne couvrent pas toutes les variantes ou qu'une affirmation produit attend encore une validation juridique.

Elle aide aussi à retirer du contenu. Une page plus longue n'est pas automatiquement plus convaincante. Chaque bloc doit informer, prouver, orienter ou permettre une action. Si personne ne peut expliquer son rôle, il occupe probablement une place qui devrait revenir à une information utile.

4. Concevoir les maquettes fonctionnelles avec du contenu crédible

Les maquettes fonctionnelles doivent utiliser assez tôt des contenus représentatifs : noms courts et longs, prix simples et comparés, produits avec plusieurs variantes, état épuisé, messages de livraison, contenu localisé et médias aux proportions réelles. La rédaction n'a pas besoin d'être finalisée avant le design. À ce stade, elle sert à tester la structure avec ce qu'elle devra réellement absorber.

À ce stade, la hiérarchie doit être visible sans décoration. Le visiteur comprend-il ce qui est vendu ? Peut-il choisir ? Les informations qui conditionnent l'achat sont-elles accessibles au bon moment ? Le chemin vers le panier reste-t-il clair sur un petit écran ?

Une maquette fonctionnelle orientée conversion documente aussi les comportements : accordéon ouvert ou fermé, sélecteur invalide, message d'erreur, bouton d'ajout au panier fixe, zoom média, changement de prix selon la variante et retour arrière. Une capture statique ne suffit pas pour valider un parcours interactif.

5. Faire du design system un outil commercial et opérationnel

Le design system ne sert pas seulement à uniformiser les rayons, les boutons et les espacements. Il donne un langage commun aux équipes de marque, e-commerce et développement. Il définit comment une preuve, une promotion, une alerte, une option de produit ou un bloc éditorial se comporte dans plusieurs contextes.

Un composant utile possède des règles, pas seulement une apparence. Il précise les contenus acceptés, les variations, les états, le comportement responsive et ce qui reste éditable dans Shopify. Il prévoit aussi les cas où la donnée manque.

Le sur mesure doit se concentrer sur ce qui différencie vraiment l'expérience. Les fonctions courantes gagnent souvent à reposer sur des composants éprouvés et maintenables. Une animation spectaculaire qui ralentit le choix ou rend le texte inaccessible ne devient pas utile parce qu'elle est unique.

6. Relier les maquettes aux données et aux règles Shopify

Une maquette peut montrer un bundle, un nuancier ou une recommandation personnalisée en quelques pixels. Le fonctionnement réel demande davantage : structure des variantes, métachamps, metaobjects, règles de stock, promotions, traductions, analytics et parfois intégration avec un système externe.

Avant la validation UI, chaque composant important doit être relié à sa source et à sa règle de gestion. Qui crée l'information ? Où est-elle stockée ? Peut-elle varier par marché ? Que se passe-t-il si elle est vide ? Comment le composant se comporte-t-il avec dix options au lieu de trois ? Quelle action doit être suivie ?

Ce travail évite une fausse validation. Une interface peut être très convaincante dans son état nominal et impossible à maintenir avec le catalogue réel. La spécification fonctionnelle traduit l'intention de la maquette en comportements testables. Elle donne aussi au marchand une vision claire de ce qui sera éditable et de ce qui dépendra encore du code.

7. Préparer la mesure avant le développement

Le plan de mesure fait partie du design. Il nomme les événements utiles, les propriétés nécessaires et les décisions que l'équipe veut prendre à partir des données. Suivre tous les clics sans question précise produit surtout du bruit.

Une fois le site lancé, la qualité du tracking doit être contrôlée avant toute interprétation. Un changement de consentement, de source de trafic ou de définition d'événement peut créer une différence apparente qui ne vient pas du design. Les décisions post-lancement doivent croiser la donnée quantitative avec les retours du service client, la recherche interne, les erreurs et, lorsque le périmètre le permet, des tests utilisateurs.

8. Traiter la QA comme une étape de conception

La QA couvre plus que la conformité pixel à pixel. Elle vérifie la sélection des variantes, les erreurs, le clavier, le focus, les contrastes, les contenus longs, les traductions, les promotions, le panier, le checkout, le tracking et les performances. Elle contrôle aussi l'édition : un composant reste-t-il cohérent lorsque l'équipe change son contenu dans l'admin Shopify ?

La recette client garde un rôle essentiel. Elle valide les règles métier, les contenus, les accès et la réalité opérationnelle. La différence tient à l'ordre : la recette ne remplace pas l'assurance qualité interne.

Une séquence de livrables qui rend les décisions visibles

Ce qu'une refonte ne peut pas promettre

Un meilleur parcours peut réduire des frictions que le site crée. Il ne corrige pas à lui seul un prix mal positionné, un trafic peu qualifié, un produit indisponible, une promesse difficile à comprendre ou une logistique défaillante. Il ne garantit pas non plus une hausse de conversion.

Le design doit composer avec la qualité des contenus et des données fournis. Les fonctions Shopify, les applications et les intégrations imposent aussi des contraintes à vérifier au moment du projet. Enfin, certaines décisions relèvent du droit, de la fiscalité, de l'accessibilité ou de la politique commerciale du marchand. Elles demandent les responsables compétents.

Checklist avant de valider les maquettes

• Le problème de chaque parcours est formulé sans jargon visuel.
• Les questions d'achat prioritaires ont une réponse, une source et un responsable.
• Les maquettes couvrent mobile, contenus longs, erreurs et indisponibilités.
• Chaque composant important est relié à une donnée ou une règle Shopify.
• L'équipe sait ce qui sera éditable dans l'admin.
• Les événements de mesure répondent à une question utile.
• Les critères d'acceptation couvrent comportement, accessibilité et performance.
• Aucun résultat attendu n'est présenté comme garanti.

Un audit Shopify peut aussi précéder la refonte lorsque la dette technique, les données ou les intégrations restent mal connues.

Votre refonte doit relier marque, commerce et fonctionnement Shopify avant la première ligne de code.

Échangeons sur votre projet UX, UI et CRO