Le workflow infernal

The Nightmare Workflow

Pour traiter chaque signalement : un profil suspect, un message inapproprié ou une photo douteuse, les modératrices devaient :

To process each report : a suspicious profile, an inappropriate message or a questionable photo, moderators had to :

• Ouvrir 6 onglets pour naviguer entre 3 sources de données différentes
• Chercher les profils du plaignant et de l'accusé dans l'onglet Membres
• Basculer sur un autre onglet pour vérifier l'historique du compte (ancienneté, statut d'abonnement, avertissements précédents)
• Reconstituer mentalement les conversations en jonglant entre les messages envoyés par chaque utilisateur (Seuls les messages envoyés étaient accessibles, pas les conversations)
• Passer constamment du clavier à la souris, puis de la souris au clavier
• Assembler toutes ces informations dans leur tête avant de prendre une décision

• Open 6 tabs to navigate between 3 different data sources
• Look up the reporter's and reported user's profiles in the Members tab
• Switch to another tab to check account history (account tenure, subscription status, previous warnings)
• Reconstruct conversations mentally by juggling the messages sent by each user (only sent messages were accessible, not full conversations)
• Constantly switch between keyboard and mouse, and back again
• Keep all this information in mind before making a decision

2 à 8 minutes par cas. Des dizaines de clics. Des centaines de changements clavier-souris par heure.

2 to 8 minutes per case. Dozens of clicks. Hundreds of keyboard-mouse switches per hour.

Avec l'augmentation constante du nombre de membres, l'équipe devait accélérer la cadence pour continuer à traiter les cas rapidement. La charge cognitive et physique s'accumulait, sans aucune marge pour souffler.

As the number of members grew, the team had to speed up to keep processing reports quickly. Cognitive and physical load accumulated, with no room to catch a breath.

🔍 Découverte (Semaine 1)

🔍 Discovery (Week 1)

Shadowing : Pour comprendre les véritables difficultés de l'équipe, j'ai passé 2~3 heures à observer l'équipe de modération, à les regarder travailler et à écouter leurs frustrations.

Shadowing : I spent 2-3 hours observing the moderation team, watching them work and listening to their frustrations.

❓ Questions posées :

❓ Questions I asked:

• "Qu'est-ce qui vous frustre le plus dans ce workflow ?"
• "De quelles informations avez-vous besoin dans 80% des cas ?"
• "Quelles sont les informations dont vous avez besoin dans 20% des cas ?"

• "What frustrates you most about this workflow?"
• "What information do you look up 80% of the time?"
• "What's the other 20% you sometimes need?"

✏️ Direction Design

✏️ Design Direction

À ce stade, le problème n'était plus de comprendre quoi décider, mais comment y parvenir. Je devais concevoir une interface capable de réduire la charge cognitive, éliminer la navigation fragmentée entre onglets et écrans, et de supprimer les allers-retours constants entre clavier et souris.
En résolvant ces frictions, l'accélération du traitement devenait une conséquence naturelle.

At this point, the challenge was no longer what decision to make, but how to get there. I needed to design an interface that would reduce cognitive load, eliminate fragmented navigation across tabs and screens, and remove constant keyboard–mouse switching.
By addressing these frictions, speed would naturally follow.

Pour répondre à l'ensemble de ces problématiques, j'ai posé une direction de design claire : une interface keyboard-first, où l'ensemble du contexte tient dans une seule vue, avec une hiérarchisation claire de l'information.

To address these challenges, I defined a clear design direction: a keyboard-first interface where the full context fits within a single view, with clearly prioritized information.

Le challenge ? Trouver le juste équilibre entre exhaustivité des informations et clarté de l'interface

The challenge? Finding the right balance between information completeness and interface clarity.

Au lieu du tableau classique avec un cas par ligne et une navigation fastidieuse pour voir quelques détails, j'ai conçu un système de cartes empilées : chaque signalement occupe tout l'écran, se traite d'un coup d'oeil. Toutes les actions se font via les touches ZQSD, pour un flux 100 % clavier.

Instead of the classic table with one case per row and tedious navigation to see details, I designed a stacked card system: each report takes up the entire screen, can be processed at a glance. All actions are performed via WASD keys for a 100% keyboard workflow.

🎯 Décisions Clés de Design

🎯 Key Design Decisions

🎨 Prototypage & Tests

🎨 Prototyping & Testing

Processus : Process:

1. Création de wireframes basse-fidélité → validation avec le dev + équipe modération
2. Construction d'un prototype haute-fidélité dans Figma → revue finale
3. Tests beta avec la team leader (1 modératrice sur 4)

1. Created low-fi wireframes → validated with developer + moderation team
2. Built high-fidelity prototype in Figma → final review
3. Beta tested with team leader (1 out of 4 moderators)

L'Interface Finale

The Final Interface

Un seul écran. Toutes les informations. Navigation 100% clavier. One screen. All information. 100% keyboard navigation.

💡 Le moment clé : L'idée du préchargement

💡 The Key Moment: The Preloading Idea

Lors des tests du premier prototype avec la team leader, on a découvert un problème majeur : le chargement de chaque cas prenait 2-3 secondes. Nous avions déjà éliminé plusieurs minutes de navigation manuelle : Une amélioration massive, mais perfectible.

During the first prototype tests with the team leader, we discovered a major problem: loading each case took 2-3 seconds. We had already eliminated several minutes of manual navigation. A huge improvement, yet still improvable.

Le problème technique : les données venaient de 3 sources backend différentes, impossible à consolider côté serveur. J'ai proposé une solution au développeur qui l'a implémentée le jour même.

The technical problem: data came from 3 different backend sources, impossible to consolidate server-side. I proposed a solution to the developer who implemented it the same day.

Le problème des cas complexes

The Complex Cases Problem

Tous les cas n'étaient pas égaux. 80 % étaient simples et rapides à trancher. Mais 20 % nécessitaient une investigation plus poussée. Le problème : les cas n'étaient pas triés. Les cas complexes arrivaient au milieu des cas simples, cassant le rythme.

Not all cases were equal. 80% were simple and quick to resolve. But 20% required deeper investigation. The problem: cases weren't sorted. Complex cases appeared among simple ones, breaking the rhythm.

Mon objectif : traiter les 80 % de cas simples le plus vite possible le matin, puis s'attaquer aux cas complexes l'après-midi.

My goal: process the 80% of simple cases as fast as possible in the morning, then tackle complex cases in the afternoon.

La solution : Fonction "Defer" + Jauge intelligente

The solution: "Defer" function + Smart gauge

• Touche "Defer" : Remet un cas complexe tout en bas de la pile
• Jauge de complétion bicolore :
  • Grise au départ (0 cas traités)
  • Se remplit en bleu au fur et à mesure des cas traités
  • Se remplit en jaune par la fin quand on défère un cas
  • Quand le bleu s'approche du jaune → on sait qu'on arrive à la zone des cas complexes

• "Defer" key: Moves a complex case to the bottom of the stack
• Two-color completion gauge:
  • Grey at start (0 cases processed)
  • Fills with blue as cases are processed
  • Fills with yellow from the end when deferring a case
  • When blue approaches yellow → they know they're reaching the complex cases zone

Résultat : les modératrices pouvaient optimiser leur journée stratégiquement, en traitant d'abord les cas rapides pour maximiser leur productivité matinale.

Result: moderators could strategically optimize their day, processing quick cases first to maximize morning productivity.

Pour moi, cette jauge était aussi un indicateur de la qualité de mon interface. Si la partie jaune prenait une proportion trop grande, trop souvent, ça voudrait dire que mon interface était ratée : elle n'aurait pas fourni assez de contexte pour permettre aux modératrices de prendre des décisions rapides sur les cas simples.

For me, this gauge was also an indicator of my interface's quality. If the yellow portion became too large, too often, it would mean my interface had failed: it wouldn't have provided enough context for moderators to make quick decisions on simple cases.

Spoiler : C'est pas arrivé. La jauge restait majoritairement bleue, confirmant que l'interface donnait le bon niveau de contexte pour des décisions rapides et éclairées.

Spoiler: It didn't happen. The gauge remained mostly blue, confirming that the interface provided the right level of context for fast and informed decisions.

Le scepticisme initial

Initial Skepticism

Quand j'ai présenté les wireframes avec les raccourcis ZQSD, l'équipe était sceptique. Elles travaillaient depuis des années avec la souris. Pourquoi changer maintenant ?

When I presented the wireframes with WASD shortcuts, the team was skeptical. They had been working with the mouse for years. Why change now?

L'argument qui a tout changé

The Argument That Changed Everything

Je leur ai expliqué que la disposition ZQSD (WASD en anglais) est issue de pratiques largement éprouvées en interaction clavier. Elle permet de maintenir la main gauche dans une position stable et confortable, tout en offrant un accès rapide à un grand nombre de touches adjacentes, sans déplacement excessif du bras.

I explained that the WASD layout originates from well-established keyboard interaction practices. It allows the left hand to remain in a stable and comfortable position, while providing quick access to a wide range of adjacent keys, without requiring excessive arm movement.

Mais l'argument décisif a été celui-ci : "Vous aurez le choix. Clavier OU souris. Mais vous n'aurez plus jamais besoin de passer de l'un à l'autre."

But the decisive argument was this: "You'll have a choice. Keyboard OR mouse. But you'll never need to switch between them again."

Leurs douleurs au poignet venaient des centaines de changements clavier-souris par jour. En éliminant cette friction, on éliminait la cause physique de leurs problèmes.

Their wrist pain came from hundreds of keyboard-to-mouse switches per day. By eliminating this friction, we eliminated the physical cause of their problems.

Convaincre des utilisateurs sceptiques, ce n'est pas une question de "design patterns" ou de "best practices". C'est une question d'empathie et d'arguments concrets. J'ai dû puiser dans un domaine complètement différent (les jeux vidéo) pour leur faire comprendre le "pourquoi" du ZQSD. Et surtout, j'ai connecté ma solution à leur problème physique réel : les douleurs au poignet.

Convincing skeptical users isn't about "design patterns" or "best practices." It's about empathy and concrete arguments. I had to draw from a completely different domain (video games) to help them understand the "why" behind WASD. And most importantly, I connected my solution to their real physical problem: wrist pain.

👥 Les power-users savent

👥 Power Users Know

La team leader et son équipe connaissaient exactement leurs problèmes. Mon rôle n'était pas d'inventer des solutions dans le vide, mais de traduire leurs frustrations quotidiennes en design actionnable. L'observation terrain valait mieux que 10 workshops.

The team leader and her team knew exactly what their problems were. My role wasn't to invent solutions in a vacuum, but to translate their daily frustrations into actionable design. On-site observation was worth more than 10 workshops.

🔧 L'empathie technique ouvre des portes

🔧 Technical Empathy Opens Doors

En prenant le temps de comprendre les contraintes backend : endpoints multiples, impossibilité de consolider côté serveur, j'ai pu proposer le système de préchargement. Un designer qui parle tech gagne en crédibilité et peut pousser des solutions plus innovantes.

By taking time to understand backend constraints : multiple endpoints, no server-side consolidation possible, I could propose the preloading system. A designer who speaks tech gains credibility and can push more innovative solutions.

⚡ La vitesse est un feature, pas un détail

⚡ Speed is a Feature, Not a Detail

Pour des outils utilisés plus de 100 fois par jour, chaque minute compte. 1 minute de friction × 100 cas = 100 minutes perdues par jour. Soit plus de 8 heures par semaine, et plus de 400 heures par an par personne.
Optimiser pour les power users crée un effet cumulatif, pas linéaire.

For tools used more than 100 times a day, every minute counts. 1 minute of friction × 100 cases = 100 minutes lost per day. That’s over 8 hours per week, and more than 400 hours per year per person. Optimizing for power users creates a cumulative, not linear, effect.

💡 "Évident" vient de l'observation, pas des suppositions

💡 "Obvious" Comes from Observation, Not Assumptions

Ce projet rappelle un principe fondamental du design d’outils métier : ce qui paraît simple après coup est souvent le résultat d’une compréhension fine du travail réel.

L’observation prolongée des usages a mis en lumière une réalité claire : chaque interruption, chaque changement de contexte, chaque micro-friction pesait plus que le volume d’informations à afficher. La solution s’est donc construite autour d’un objectif unique : préserver la continuité de l’action et de la décision.

This project highlights a fundamental principle of enterprise tool design: what appears simple in hindsight is often the result of a deep understanding of real work.

Extended observation of actual usage revealed a clear reality: every interruption, every context switch, and every micro-friction carried more weight than the sheer amount of information displayed. The solution was therefore built around a single objective: preserving the continuity of action and decision-making.