Contexte

Lorsque CodinGame a été racheté par CoderPad, l’entreprise s’est retrouvée avec une dette UX importante sur ses interfaces. J’ai été recruté dans ce contexte pour apporter de la clarté et de la cohérence à une plateforme SaaS utilisée par les recruteurs techniques pour recruter les meilleurs développeurs du marché.

CoderPad est notamment utilisé par des sociétés comme Apple, Facebook, LinkedIn, Spotify…

Dans cette étude de cas, je reviens sur trois gros chantiers : la création par les recruteurs de tests techniques, la navigation dans la banque de questions, et la refonte de l’environnement de développement utilisé par les candidats.

Aujourd'hui, liste des tests créés par les recruteurs au sein du logiciel SaaS.

1. Le problème : des interfaces complexes, un produit sous-exploité

Côté recruteur

• Une interface vieillissante, source de confusion pendant les démos commerciales.

• Une création de test laborieuse, difficile d’accès pour les profils non-tech.

• La banque de questions des tests, pourtant une valeur forte du produit, était enfouie dans un flow à 6 clics.

Côté candidat

• L’environnement de développement intégré (IDE) n’était proposé qu’en thème clair, ce qui était peu adapté aux usages réels des développeurs.

• L’interface manquait de clarté, et n’était pas alignée avec les standards des outils de dev modernes.

Le produit à mon arrivée en Août 2022.

2. Approche

Ma stratégie de design a reposé sur trois piliers :

1) Benchmark & bonnes pratiques

J’ai étudié les pratiques UX des 4 principaux concurrents de CoderPad (Codility, HackerRank, CodeSignal et TestGorilla), ainsi que celles d’autres plateformes SaaS B2B comparables. Cette veille m’a permis d’identifier des standards bien ancrés et attendus par les utilisateurs, comme l’accès direct à un onglet “Questions”.

2) Itération collaborative

En lien constant avec le PM, les développeurs, et les 2 autres product designers, j’ai challengé les parcours, testé des hypothèses, ajusté les specs et contribué à des cycles courts de développement. J’ai également mené régulièrement des échanges avec les utilisateurs finaux pour aligner nos idées au réel et guider nos choix de design.

3) Observation terrain & analyse comportementale

J’ai longuement analysé les sessions FullStory (un outil permettant d’observer les sessions de chaque utilisateur) pour identifier les erreurs de navigation, les points de friction, les confusions récurrentes dans les flows (notamment création de test et navigation dans la banque de questions).

3. Challenges : complexité fonctionnelle et hétérogénéité des publics

✍️ Création de test : clarifier la logique

La création de test est la première étape clé dans l’usage de CoderPad : c’est ici que le recruteur définit à qui s’adresse l’évaluation (poste, niveau, langue…), afin que le système sélectionne automatiquement les bonnes questions, avec la difficulté, la durée et le format adaptés. Une fois le test créé, les candidats sont invités à le passer, et leurs résultats analysés.

Le flux reposait initialement sur une mécanique complexe : l’utilisateur devait choisir manuellement, via deux longs menus déroulants, des domaines, des compétences et/ou des rôles à évaluer. Ces choix déclenchaient l’ajout automatique de questions associées. Mais cette logique s’est révélée confuse, notamment pour les profils RH, souvent éloignés des réalités techniques.

Le flux avant de débuter sur le projet, et son fonctionnement à deux entrées.

Guidés par les observations FullStory et nos échanges avec les utilisateurs, nous avons inversé l’approche : nous avons proposé de partir du métier visé (ex. “Frontend developer”), puis de suggérer automatiquement les compétences pertinentes liées.

Pour alimenter cette nouvelle logique, nous avons initié une étude quantitative en analysant notre base de données afin d’identifier les combinaisons métier/compétences les plus fréquentes. Cette cartographie nous a permis de concevoir un système de suggestions intelligent, plus simple à appréhender, et plus efficace.

Résultat de l’étude quantitative cartographiant les différents métiers de développeurs à des compétences à tester.

Lors de la mise en place du système de suggestions de compétences, un défi inattendu a émergé côté développement : l’affichage dynamique des 'skills'. Lorsque plusieurs compétences sont ajoutées, certaines doivent passer de la première à la deuxième ligne de façon fluide, sans à-coup ni clignotement, ce qui demandait une animation bien pensée.

Pour éviter toute ambiguïté dans l’implémentation, j’ai utilisé Jitter, un outil d’animation UI, afin de prototyper précisément le comportement attendu. Cette approche a permis aux développeurs d’avoir des repères clairs (délais, transitions, easing), directement transposables en code. Ce micro-détail UX a contribué à la fluidité perçue du parcours et à la sensation de qualité.

📚 Banque de questions : concevoir une interface à la croisée des besoins tech et RH

La banque de questions est l’un des piliers de CoderPad : elle rassemble plus de 4 000 questions et exercices de code conçus par des experts, que les candidats rencontrent directement dans l’IDE pendant leurs tests techniques. Pourtant, son accès était jusqu’alors complexe, enfoui à plusieurs niveaux dans le flux de création de test. Un frein fort pour les utilisateurs, notamment durant la période d’essai gratuit où le prospect a besoin d'être vite convaincu.

Deux types d’utilisateurs s’opposaient

• Les profils techniques attendaient un moteur de recherche puissant et une interface leur permettant de filtrer avec précision.

• Les profils RH, moins familiers des notions de langage ou de complexité, avaient besoin de simplicité, de guidage et d’un accès immédiat au contenu.

Pour répondre à ces deux attentes, j’ai prototypé une interface claire et intuitive, centrée autour d’un tableau visuel enrichi de filtres clé-en-main et de filtres avancés (type, durée, difficulté, domaine, source, etc.). Aussi, chaque question peut être prévisualisée en un clic, facilitant la navigation et l’évaluation du contenu.

ireframe retenue pour répondre aux besoins de recherche dans la banque de questions.

💻 IDE : concilier refonte visuelle, accessibilité et performance

Le passage en dark mode a été plus qu’un simple changement cosmétique. J’ai mené un travail approfondi sur la construction d’un système de couleurs structuré, en m’appuyant sur le concept d’élévation, introduit notamment par Google dans Material Design.

L’idée : plus un élément est “élevé” dans la hiérarchie visuelle, plus il est exposé à la lumière… et donc plus sa couleur est claire. Cette approche m’a permis d’apporter de la profondeur au dark mode tout en préservant la lisibilité et l’accessibilité.

Schéma illustrant le principe d’élévation utilisé dans mon travail

Chaque teinte du thème sombre a ensuite été soigneusement associée à sa version claire, afin de mutualiser les variables de design dans le système existant. Cela permet une maintenance plus fluide et une cohérence parfaite entre les deux modes. La méthode que j’ai suivie s’appuie sur une approche reconnue en design UX ; cet article explique bien les grands principes que j’ai appliqués.

Image tirée de l’article de Pete Woodhouse, expliquant la méthode d’association entre le thème clair et le thème sombre.

4. Solutions

✍️ Création de test

L'ancien flux a été remplacé par un nouveau découpé en étapes claires, progressives, et pédagogiques :

1. Choix du métier à tester (ex. Front-end, Data, etc.)

2. Suggestions intelligentes de compétences associées (issues de notre analyse quantitative)

3. Personnalisation fine des paramètres du test

Le parcours est désormais guidé, avec des textes explicatifs adaptés aux utilisateurs non-tech, et une UX qui anticipe les besoins.

📚 Banque de questions

L’ancien accès complexe à la banque de questions a été remplacé par une interface moderne, et riche en fonctionnalités :

• Tableau visuel clair, trieurs et filtres avancés (type, durée, difficulté, domaine, source…)

• Preview du contenu des questions en 1 clic

• Mise en avant des questions premium, pensés comme levier de conversion payante

Cette page est rapidement devenue un vrai argument de vente pour l’équipe Sales, mettant en lumière la richesse du contenu proposé par CoderPad.

💻 IDE

Le nouvel IDE a été revu en profondeur :

• Nouveau thème sombre activé par défaut, respectant les préférences des développeurs

• Choix du langage visible dès le premier écran, sans chercher dans des sous-menus

• Nouveaux paramètres rendus accessibles et explicites

• Interface plus moderne et accessible

Cette refonte a non seulement amélioré la satisfaction utilisateur, mais elle a aussi permis de conclure un partenariat avec LinkedIn, intégrant l’IDE dans leurs modules LinkedIn Learning.

L'IDE avant.

L'IDE après.

Conclusion : un design au service du produit ET du business

En menant cette refonte, j’ai amélioré l’accessibilité des fonctionnalités clés de CoderPad, raccourci les parcours critiques, et renforcé l’attrait du produit à la fois pour les clients finaux et pour les équipes internes. Mon travail a directement contribué à des conversions, à des deals, et à la notoriété du produit.