L'Optimization Lab
L'Optimization Lab est votre espace de création et de gestion des optimisations. C'est ici que vous créez vos tests A/B et vos Live Changes, que vous modifiez visuellement des éléments de votre site, et que vous suivez l'état de toutes vos campagnes — passées, en cours et à venir.
Vue d'ensemble du Lab
En accédant au Lab, vous arrivez sur la liste de toutes vos optimisations. En haut à droite, le bouton + Create new optimization permet de lancer une nouvelle campagne.
Les filtres de recherche
Trois filtres vous permettent de retrouver rapidement une optimisation :
- Search by name — recherche par mot-clé dans le nom de l'optimisation
- Type — filtrer par A/B Test ou Live Change
- Page — filtrer par page cible (Homepage, Collection, Page Produit…)
- Device — filtrer par device ciblé (All Devices, Mobile, Desktop)
Les colonnes du tableau
| Colonne | Ce qu'elle indique |
|---|---|
| Name | Nom de l'optimisation + page ciblée. Cliquer dessus ouvre le détail. |
| Status | État actuel de l'optimisation (voir tableau des statuts ci-dessous) |
| Visible to | Ciblage device et visiteurs (ex : "Mobile - All Visitors") |
| Type & Traffic | AB test ou Live change |
| Actions | Boutons contextuels selon le statut : Launch, Revise, See results, QR, View |
Les onglets de statut
Les optimisations sont organisées en 5 onglets. Chaque onglet correspond à une étape du cycle de vie d'une optimisation :
| Onglet | Signification | Actions disponibles |
|---|---|---|
| Draft | Optimisations en cours de création — sauvegardées à n'importe quelle étape du wizard | Cliquer sur Finish setup pour reprendre |
| Building | Optimisations en cours de développement par l'équipe Webyn. Visible en lecture seule — vous savez ce sur quoi on travaille pour vous. | Lecture seule — la colonne Actions affiche "Building in progress" |
| Ready to launch | Optimisations finalisées, prêtes à être lancées sur votre site | Launch pour mettre en ligne, Revise pour corriger |
| Active | Optimisations actuellement en ligne. Deux sous-statuts : Testing (A/B test en cours) et Live (Live Change déployé) | See results, QR, View |
| Archived | Optimisations terminées. Quatre sous-statuts possibles : Completed (test terminé normalement), Stopped (test interrompu), Winner (variante gagnante identifiée), Challenged (hypothèse non confirmée). Conservées pour consultation et capitalisation. | See results |
Onglet Draft
Onglet Building
Onglet Ready to launch
Onglet Archived
Dans l'onglet Archived, les optimisations gagnantes affichent un badge Winner directement dans la liste — pratique pour identifier d'un coup d'œil vos meilleurs tests passés.
Créer une optimisation — les 4 étapes
Cliquez sur + Create new optimization pour ouvrir le wizard de création. Il se compose de 4 étapes visibles en bas de l'écran : 1. Type & URL → 2. Design → 3. Targeting → 4. Configure & Launch. Vous pouvez naviguer entre les étapes à tout moment, et sauvegarder en brouillon à n'importe quel moment via Save as draft.
Étape 1 — Type & URL
Choisissez d'abord le type d'optimisation, puis la page sur laquelle elle doit s'appliquer.
A/B Test
Le trafic est réparti entre l'Original et une ou plusieurs variantes (Challengers). Permet de mesurer l'impact d'une modification et de décider sur la base de données statistiques.
→ Idéal pour tester une hypothèse et valider avant de déployer.
Live Change
La modification est déployée à 100% des visiteurs, sans phase de test. Aucune répartition de trafic.
→ Idéal pour des corrections urgentes, personnalisations permanentes ou ajouts de contenu.
En cas de doute, préférez toujours l'A/B Test. Un Live Change mal calibré est déployé à tous vos visiteurs sans filet de sécurité. L'A/B Test vous protège : si la variante performe moins bien, seule une partie du trafic est exposée.
Après avoir sélectionné le type, choisissez la page cible dans la liste proposée. Ces pages sont préconfigurées par l'équipe Webyn lors de votre onboarding — elles correspondent aux grandes zones de votre site (Full site, Homepage, Page Produit, Collection, Landing…).
Vous ne trouvez pas la page dont vous avez besoin dans la liste ? Contactez votre CRO Manager — il peut ajouter de nouvelles pages cibles à votre configuration.
Cliquez sur Save & continue Design pour passer à l'étape suivante.
Étape 2 — Design
C'est le cœur du Lab. Votre page s'affiche en temps réel dans l'éditeur. En bas de l'écran, deux modes de travail sont disponibles : Visual et Code. À droite, le panneau Design Assistant vous propose le mode Prompt AI.
En haut de l'écran, un sélecteur indique la page chargée (ex : "Volcom FR - Homepage"). En bas, le menu Challenger 1 vous permet de basculer entre les variantes si vous en avez créé plusieurs.
Mode Prompt AI — laisser l'IA modifier la page
Le Prompt AI est l'outil le plus puissant du Lab. L'IA voit votre page et comprend son contexte — elle n'applique pas le code à l'aveugle. Vous lui décrivez ce que vous voulez en langage naturel, elle génère le code et l'applique immédiatement sur la page, en quelques secondes.
Ce que le Prompt AI peut faire :
- Créer des éléments from scratch : bannière, pop-in, bloc de réassurance, compteur d'urgence… en respectant le design de votre site
- Modifier des éléments existants : texte, couleur, taille, fond, visibilité
- Effectuer plusieurs modifications en une seule instruction
- Cibler un élément spécifique dans une liste (ex : le 3e produit d'une grille)
- S'inspirer d'une maquette ou d'une image que vous lui envoyez via le bouton 📎
- Expliquer ce qu'il fait — et accepter des demandes de correction à la suite
| Exemple de prompt | Ce que l'IA fait |
|---|---|
"Ajoute une bannière verte en haut de page avec le texte 'Livraison offerte dès 50€'" | Crée une bannière en respectant la charte graphique du site |
"Change le bouton 'Ajouter au panier' en rouge et augmente sa taille de 20%" | Modifie couleur et taille en une seule instruction |
"Cache le bloc livraison sous le prix et remonte les avis clients à sa place" | Réorganise deux éléments en une opération |
"Voici une maquette [fichier joint] — recrée ce bloc en haut de la homepage" | S'inspire de la maquette pour générer le code correspondant |
"Rends le titre plus court, juste 2 mots maximum" | Correction itérative après un premier résultat |
Limites à connaître :
- Les éléments gérés côté back-end (prix dynamiques, stocks, données personnalisées serveur) ne peuvent pas être modifiés — uniquement ce qui s'affiche côté navigateur
- Recréer un élément complexe existant sous une forme très différente (ex : transformer un menu en accordéon en pop-in) peut bloquer — dans ce cas, passez par votre CRO Manager
Le résultat est immédiatement visible dans l'éditeur après quelques secondes. Vous pouvez enchaîner les instructions pour affiner : l'IA garde le contexte de la conversation et de la page.
Mode Visual — modifier en cliquant directement sur la page
Cliquez sur n'importe quel élément de la page pour le sélectionner. Un panneau de modification s'ouvre avec les options disponibles :
| Action | Ce que vous pouvez faire |
|---|---|
| Modifier le texte | Réécrire un titre, un CTA, une accroche, un libellé de bouton |
| Modifier la couleur | Couleur du texte, couleur de fond d'un bloc ou d'un bouton |
| Modifier la taille | Agrandir ou réduire un élément |
| Masquer un élément | Cacher un bloc, une bannière, un élément parasite sans le supprimer du code |
| Cibler un élément précis | Possible de cibler le 3e produit d'une grille, un item spécifique dans une liste |
Le mode Visual ne permet pas de déplacer des éléments d'une zone à une autre. Pour réorganiser la structure d'une page, utilisez le Prompt AI ou le mode Code.
Mode Code — liberté totale pour les profils techniques
Accès direct au JavaScript et CSS générés. Idéal pour les équipes techniques qui souhaitent :
- Contrôler précisément le code produit par l'IA avant validation
- Écrire des comportements dynamiques complexes (animations, logique conditionnelle)
- Injecter des scripts de tracking spécifiques
- Affiner le CSS au pixel près
Gérer les variantes
Dans le menu Challenger 1 en bas de l'écran, vous pouvez ajouter plusieurs variantes pour un même test (A/B/C/D…). Chaque Challenger est éditable indépendamment — vous pouvez tester plusieurs hypothèses en parallèle sur le même trafic.
Plus vous ajoutez de variantes, plus le trafic est divisé — et plus il faudra de temps pour atteindre une fiabilité statistique suffisante. En pratique, au-delà de 3 variantes, le test peut prendre très longtemps sur un trafic modéré.
Cliquez sur Save & Continue une fois votre design terminé.
Étape 3 — Targeting
Configurez qui verra votre optimisation, sur quel objectif elle sera mesurée, et dans quelles conditions.
Name & Description
Donnez un nom clair et explicite à votre optimisation. Un bon nom permet de retrouver et comprendre le test en un coup d'œil, même des mois plus tard.
Convention recommandée : [Page] - [Zone] - [Hypothèse courte]
Exemple : Homepage - Hero banner - Wording urgence soldes
Exemple : Fiche produit - CTA - Couleur rouge vs bleu
Goal — l'objectif de l'optimisation
Sélectionnez la métrique que vous cherchez à améliorer. C'est sur cette base que Webyn calculera si l'optimisation est Winner ou Challenged.
| Goal | À utiliser quand… |
|---|---|
| Conversion | Vous cherchez à augmenter le taux d'achat ou de lead |
| Ajout au Panier | Vous optimisez une fiche produit ou une page catégorie |
| Page Produit | Vous cherchez à attirer plus de visiteurs vers les fiches produit |
Choisissez toujours le Goal le plus proche de l'objectif business réel. Évitez de choisir un micro-objectif (ex : clic sur un élément) comme seul indicateur de succès.
Vous ne trouvez pas le Goal dont vous avez besoin dans la liste ? Contactez votre CRO Manager — il peut créer un nouveau Goal sur mesure adapté à votre contexte métier.
Devices — sur quels appareils
Choisissez les appareils sur lesquels l'optimisation sera visible :
- All Devices — Desktop et Mobile
- Desktop Only — uniquement les visiteurs sur ordinateur
- Mobile Only — uniquement les visiteurs sur smartphone
Visitors — quel type de visiteurs
- All visitors — tous les visiteurs sans distinction
- New visitors — uniquement les visiteurs qui découvrent le site pour la première fois
- Returning visitors — uniquement les visiteurs déjà venus sur le site
Advanced Condition — déclencheurs avancés (profils techniques)
Ce champ permet d'ajouter des conditions JavaScript personnalisées pour déclencher l'optimisation dans des situations très précises. Il est destiné aux profils techniques.
Exemples de conditions possibles :
// Déclencher après 30% de scroll
window.scrollY > document.body.scrollHeight * 0.3
// Déclencher après 30 secondes sur la page
setTimeout(() => { /* activation */ }, 30000)
// Déclencher pour un segment CRM spécifique
// (via donnée injectée dans le dataLayer)
dataLayer.statut_fidelite === 'VIP'Si vous souhaitez utiliser des conditions avancées sans compétences techniques, contactez votre CRO Manager — il peut les configurer pour vous sur la base de vos besoins métier.
Bientôt disponible : Il sera possible de décrire vos conditions avancées en langage naturel directement dans le Lab — par exemple : "Afficher après 30% de scroll", "Déclencher après 30 secondes", "Cibler les clients VIP de mon CRM". Le Lab génèrera automatiquement la condition correspondante.
Cliquez sur Continue to Configure pour passer à la dernière étape.
Étape 4 — Configure & Launch
Dernière étape avant le lancement. Vous pouvez ici uploader des captures d'écran de chaque version (Original et Challenger) pour faciliter la revue et la communication autour du test.
Pour chaque version (Original et chaque Challenger), vous pouvez uploader :
- Une capture Desktop (PNG ou JPG, jusqu'à 10 Mo)
- Une capture Mobile (PNG ou JPG, jusqu'à 10 Mo)
Ces captures s'afficheront ensuite dans le reporting pour vous aider à vous souvenir de ce qui a été testé, même après la fin du test.
Vous pouvez aussi utiliser les boutons QR et View disponibles sur chaque version pour :
- View — ouvrir la version dans un nouvel onglet et la voir en conditions réelles
- QR — générer un QR code à scanner avec votre smartphone pour tester le rendu mobile directement sur votre téléphone
Astuce : Utilisez toujours le QR code pour valider le rendu mobile avant de lancer — ce que vous voyez dans l'éditeur desktop peut différer légèrement de l'affichage réel sur smartphone.
Une fois tout validé, cliquez sur Save as CRO Validation pour soumettre l'optimisation. Elle passera alors en statut Ready to launch, prête à être mise en ligne.
Lancer une optimisation depuis le Lab
Dans l'onglet Ready to launch, chaque optimisation affiche deux actions :
Launch
Met l'optimisation en ligne immédiatement. Elle passe dans l'onglet Active avec le statut Testing (A/B test) ou Live (Live Change).
Revise
Renvoie l'optimisation en brouillon pour modification. Utilisez cette option si vous avez repéré une erreur après la création.
Une fois lancée, une optimisation est immédiatement visible par vos visiteurs. Assurez-vous d'avoir bien testé via QR code avant de cliquer sur Launch.
Bonnes pratiques dans le Lab
Nommer ses optimisations
Un bon nommage permet de gérer efficacement son backlog, de retrouver facilement les tests passés dans l'historique, et de communiquer clairement avec votre équipe et votre CRO Manager.
Bon : FP - CTA - Couleur rouge vs bleu - Mobile
Mauvais : Test bouton ou Optimisation #3
Utiliser "Save as draft" régulièrement
Vous pouvez sauvegarder votre travail en brouillon à n'importe quelle étape du wizard. L'optimisation apparaît alors dans l'onglet Draft et vous pouvez la reprendre plus tard sans perdre votre travail.
Tester avant de lancer
Systématiquement : cliquez sur View pour valider le Desktop, scannez le QR code pour valider le Mobile. Ne lancez jamais sans avoir vérifié les deux.
Choisir le bon Goal dès le départ
Le Goal ne peut pas être modifié une fois le test lancé. Prenez le temps de bien le définir à l'étape 3 — c'est lui qui déterminera si votre test est déclaré Winner ou Challenged.