Le live chat en verre, qui s'accorde à chaque boutique
Contexte
Reponse est la suite CX agentique pour Shopify : live chat, tickets, fidélité et parrainage, avec des agents IA qui conseillent les clients. Le live chat en est la vitrine : un widget posé en bas de chaque boutique qui installe l'app.
Jusqu'ici, le marchand devait régler ses couleurs pour le thème clair et pour le thème sombre, et le widget cassait malgré tout sur certaines boutiques.
Rôle
En tant que fondateur, j'ai posé le brief, tranché chaque arbitrage de design et piloté une équipe d'agents IA sur tout le cycle : prototype, test terrain, code, contrôle qualité et campagne vidéo.
Objectifs
Un seul widget qui s'accorde à toutes les boutiques, sans aucun réglage de couleur, quelle que soit leur direction artistique. Garder tout le parcours dans la conversation : conseil, carte produit, panier, suivi de commande, aide, relais humain et fidélité. Et le livrer vite, sans casser les boutiques déjà équipées.
Le Design Invité : concevoir pour des sites qu'on ne contrôle pas
Avant, après
L'ancien widget posait sur chaque boutique le même panneau blanc opaque et une barre noire, dont le marchand devait régler les couleurs pour chaque thème. Le nouveau laisse voir la boutique à travers le verre, prend sa couleur et montre les produits en carte, sans aucun réglage.
Le verre, un matériau qui va partout
Plutôt qu'un thème par boutique, un matériau : le verre. Deux variantes floutent la page derrière elles, un verre fumé (sombre, texte blanc) et un verre clair (texte noir). Une seule couleur de marque, lue sur la boutique, éclaire l'avatar, la lumière sous la barre et les mots mis en avant.
Quelques partis pris tranchés en route : la barre reste centrée, l'IA n'est mentionnée qu'une fois (« IA · nom de la boutique »), « Parler à un humain » est toujours la dernière réponse rapide, et l'icône panier n'affiche que le nombre d'articles, jamais le prix.
861 boutiques réelles avant la première ligne de code
Le prototype était validé sur quatre boutiques fictives. Avant de coder, je l'ai confronté à 1 000 boutiques Shopify de notre cible, aux États-Unis, au Canada et en France, ouvertes par un navigateur automatique sur ordinateur et sur mobile : 861 ont pu être analysées. Le contraste du texte tient sur 100 % d'entre elles. Le reste du terrain a imposé quatre ajustements, tous intégrés au prototype avant le code.
Esquiver
Le bas de l'écran est déjà occupé au chargement sur 51 % des pages, surtout par les bandeaux cookies. Tant que le bandeau attend une réponse, le widget se réduit à son avatar, posé au-dessus. Il remonte aussi au-dessus des barres d'achat collantes.
Couleur de repli
45 % des marques n'ont aucune couleur vraiment colorée : noir, gris ou blanc. Le widget prend alors la couleur secondaire Shopify Brand, sinon une lumière neutre.
Verre auto
Verre fumé par défaut, verre clair quand la page autour du widget est sombre. Les bords trop faibles passent de 16 % à 6 % des boutiques.
Autre chat
64 % des boutiques ont déjà un chat, Gorgias en tête. Sur mobile, la barre se raccourcit pour ne jamais le couvrir, et l'admin propose de garder Reponse seul ou les deux.
Un seul objet
À l'ouverture, la barre et le panneau bougeaient chacun de leur côté : deux couches de verre qui se superposaient. Je voulais qu'on croie à un seul composant. La barre s'étire vers le haut en un bloc de verre, le panneau en sort sans couture et s'élargit avec elle, et l'avatar remonte sous le bord jusqu'à l'en-tête. Le bloc ne se sépare qu'à la fin, quand l'écart de 10 px s'ouvre. Chaque version a d'abord été prouvée sur le prototype, image par image, avant de passer en production.
Corriger sur le terrain
Le lendemain de la mise en ligne, j'ai testé tout le chat en production, sur une boutique Shopify de test. Chaque retour a été mesuré avant et après correction, y compris le comportement de l'IA, rejoué cinq fois sur chaque scénario.
| Point | Avant | Après |
|---|---|---|
| Écran blanc à l'ouverture | Panneau blanc à 99 % pendant environ 1 s | 1 % au plus, sur 75 captures |
| « Discuter avec nous » depuis l'aide | Clic sans effet | Retour au chat, curseur dans la barre |
| Produits recommandés montrés en carte par l'IA | 2 réponses sur 40 | 39 sur 40 |
| Produit déjà affiché à l'écran | Répété en carte dans le chat | Remplacé par un conseil de taille ou de variante |
La campagne
Le widget en ligne, restait à le montrer. La publicité suit une cliente à 23 h 47 : une question, une réponse immédiate, la carte produit, l'ajout au panier, le suivi de commande, l'aide, le relais humain, la fidélité, puis le mobile.
Elle est écrite et montée en code, image par image : voix off retenue après un casting de quatre voix, musique composée pour le film, chaque mot à l'écran calé sur la voix, mixage au niveau des plateformes (−14 LUFS). Huit versions, en français et en anglais, aux formats 16:9, 1:1, 4:5 et 9:16, déclinées pour la page live chat du site, les relances e-mail, le blog et les réseaux.
