alexis.jeuffrain
Tous les projets

● Étude de cas · Centres de contact

ContactMe

Un seul écran pour tous les canaux d’un agent. Un agent avait besoin d’un poste distinct pour chaque canal. Nous avons repensé une plateforme rachetée pour qu’une seule personne gère appels, chat et e-mail depuis un écran unique et stable.

Client
Remmedia
Rôle
UX Product Designer
Équipe
CTO, développeurs, produit
Échelle
Jusqu’à des dizaines de milliers de connexions simultanées
Années
2019–2024
Statut
En production, toujours commercialisé

Contexte

Un moteur solide derrière une interface datée.

Remmedia avait racheté le cœur d’un produit de centre de contact existant. Le moteur savait déjà gérer plusieurs interactions à la fois. L’interface, non : elle était construite autour d’un seul canal par agent, appels entrants, appels sortants, chat ou e-mail.

J’ai passé des matinées sur un plateau en activité chez un grand client du retail, qui reste confidentiel, sur les appels entrants et les files de chat. Le schéma revenait sans cesse : un agent qui change de fenêtre pour retrouver les données client pendant que le client attend. Ce va-et-vient est devenu le problème à supprimer.

L’objectif business tenait en une phrase. Des agents plus polyvalents, qui vendent davantage, sans perdre le contrôle de la conversation en cours.

● Le choix

Garder un poste par canal, ou tout réunir sur un seul écran ?

EnvisagéDes postes séparésFamilier. Moins de charge par agent. Des équipes rigides et des transferts permanents entre personnes.
RetenuUn seul écran, des zones fixesDes agents polyvalents. La charge supplémentaire est absorbée par une mise en page qui ne bouge jamais.

Nous avons choisi un écran unique avec un contrat spatial fixe. Les interactions sont toujours à gauche. Les outils métier toujours à droite : le CRM, le site du client ou son back-office. Quel que soit le canal, le regard de l’agent va au même endroit.

La console

Le contrat spatial, en fonctionnement.

Reconstruite en code à partir du design system, avec le CRM ouvert à droite. La console a été dessinée pour les grands écrans de bureau d’un centre de contact : la caméra va donc vers la zone où se joue chaque scénario, et Écran entier rend la console complète. Choisissez un scénario, ou laissez-le défiler.

La carte d’interaction

Une carte, tous les canaux, tous les états.

Chaque canal utilise la même carte : une icône de canal colorée, le chrono actif, l’interlocuteur, et une barre de commandes pour la mise en attente, le transfert, le signalement, le SMS et le passage de relais. Une carte s’ouvre sur place pour révéler ses outils, et l’agent ne quitte jamais sa file.

  1. Mon canal.
  2. Statut et chrono.
  3. Le canal du client.
  4. L’affichage : le numéro, puis le nom, puis la destination de l’appel.
  5. Les commandes, toujours au même endroit.
Un appel, de la sonnerie au transfert puis à la clôture. La carte change d’état ; les zones ne bougent jamais.

La même carte, ouverte sur ses deux outils, l’un après l’autre : le numéroteur sortant, puis le rappel.

Suivi en direct

Vendre plus, et vendre mieux.

Une cliente appelle au sujet d’une livraison. L’agent lui demande quel produit elle regardait, le cherche, et elle attend : trente secondes perdues. Le suivi en direct les supprime. Dès que l’agent décroche, l’écran montre où elle se trouve sur le site, ce qu’elle a vu et ce qu’il y a dans son panier. L’exemple qui a convaincu en interne : une boutique de puériculture reçoit un appel sur la livraison, l’agent voit deux articles 0-3 mois dans le panier et un troisième de la même gamme en promotion, et une question de livraison devient une vente additionnelle. En moyenne, le téléphone porte 31 % des commandes e-commerce (Fevad) : chaque appel est une vente en cours.

La caméra va vers le module dont parle chaque étape. L’action Proposer et le signal de fort potentiel sont mes ajouts au brief d’origine.

Supervision

Le plateau, sur un seul mur.

Le mur du chef d’équipe, tel que le produit le dessine : des écrans de rapports, un widget par rapport. L’horloge et la jauge Libérés en appel viennent du produit. Agents, file d’attente, délai de décroché et répartition des canaux sont des widgets que j’ai ajoutés pour cette page. Chaque superviseur compose ses propres écrans.

Au-delà du produit

Le même système, dans le monde réel.

Posts, story, bannières et roll-up. Les pastilles et la barre de commandes sont les composants mêmes du produit, à l’échelle de l’affiche.

J’ai aussi porté le produit dans sa communication. La campagne reprend l’interface en grand format : les pastilles de canal, la console, la barre de commandes, qui flottent sur la forme verte du logo. En démo, on retrouvait les objets vus dans la publicité.

Ce qui a été livré

~150écrans conçus pour une seule console, en cinq ans
5itérations, chacune répondant à une question laissée ouverte par la précédente
6canaux sur un seul écran : appels entrants et sortants, e-mail, chat, SMS et messageries

Livraison

Un design system a gardé les écrans cohérents sur cinq ans de mises en production. J’ai fait la QA de chaque livraison avec le CTO et les développeurs, à une époque où design et développement restaient deux métiers séparés, avec des passations faites à la main.

Le système derrière chaque écran ci-dessus, redessiné pour cette page : une famille d’icônes sur une grille de 24 px, des pictos blancs sur les pastilles de canal, deux élévations, trois rayons et quatre durées d’animation.