Dossiers collaborateurs, onboarding et flux opérationnels connectés.
NyxPeople est né de HRnet, l’un de mes projets chez OpenClassrooms. Il fonctionnait, mais restait proche d’un exercice CRUD conventionnel.
J’ai laissé la version étudiante intacte pour reconstruire le concept avec un périmètre maîtrisé, en reliant chaque parcours de bout en bout.
- Rôle
- Product design + front-end
- Stack
- React · TypeScript · MSW
Trois usages suffisaient.
Multiplier les écrans n’aurait pas rendu le projet plus crédible. J’ai restreint le périmètre à trois missions clés en écartant la paie, le recrutement et la gestion des congés.
Vue d’ensemble
Voir ce qui demande attentionPréparation, nouveaux arrivants et tâches en attente en un seul endroit.
Collaborateurs
Rechercher et gérer les profilsUn annuaire robuste taillé pour des centaines de fiches.
Onboarding
Préparer la première semaineSix étapes pratiques directement reliées au dossier collaborateur.
400 collaborateurs, pas un tableur.
- 400+
- fiches fictives
- 3
- missions produit connectées
- URL
- état d’annuaire persistant
Ce que révèlent 400 fiches.
C’est dans l’annuaire que le produit fait ses preuves. L’état quotidien est persistant, visible et partageable au lieu de disparaître à chaque navigation.
Densité
Plus de 400 profils mettent à l’épreuve la hiérarchie visuelle au lieu de masquer les faiblesses.
Mémoire
Recherche, filtres, tri et pagination sont inscrits dans l’URL.
Continuité
Ouvrez un profil, revenez en arrière ou rafraîchissez : l’annuaire reste exactement là où vous l’avez laissé.
Une fiche devient un flux de travail, pas un écran isolé.
Un dossier unique transmet l’identité et les détails du poste à travers la modification et six étapes concrètes d’onboarding.
Profil
Identité, poste et préparation à l’onboarding restent reliés dans une même fiche.
Création & édition
Les mêmes données structurées alimentent la création comme la modification.
Onboarding
Six étapes concrètes d’onboarding restent attachées au dossier collaborateur.
Profil
Identité, poste et préparation à l’onboarding restent reliés dans une même fiche.
Profil collaborateur reliant identité, détails du poste et préparation à l’onboardingCréation & édition
Les mêmes données structurées alimentent la création comme la modification.
Formulaire collaborateur avec validation et champs de poste structurésOnboarding
Six étapes concrètes d’onboarding restent attachées au dossier collaborateur.
Checklist d’onboarding en six étapes reliée au dossier collaborateurLe backend est simulé. Le front-end ne l’est pas.
MSW fournit une frontière d’API typée. Les données locales sont versionnées et validées ; les requêtes peuvent échouer, les échecs de mutation sont gérés et les réponses obsolètes sont ignorées.
Ce que j’ai gardé, ce que j’ai testé.
J’ai repris la gestion des fiches collaborateurs de HRnet et limité la refonte à la vue d’ensemble, à l’annuaire et à l’onboarding. J’ai ensuite testé les filtres, la modification d’une fiche, le rechargement de la page et les cas d’erreur.
- 01
Choisir les missions
Limiter le périmètre à la vue d’ensemble, aux collaborateurs et à l’onboarding.
- 02
Relier la fiche
Faire suivre une même personne de l’annuaire au profil, à l’édition et à l’onboarding.
- 03
Fiabiliser l’état
Rendre les filtres partageables, les données versionnées et les mutations récupérables.
- 04
Vérifier le produit
Tester l’interface avec des tests automatisés, la CI et des essais dans le navigateur.
La fiche reste la même partout.
Avec plus de 400 fiches fictives, on peut chercher dans l’annuaire, recharger la page et retrouver sa sélection. Les modifications se répercutent aussi sur le profil et la liste d’intégration.
Dans la vue d’ensemble, les nouveaux arrivants et les tâches en attente passent avant les chiffres. La typographie et les espacements rendent cette priorité lisible.
- 146
- tests unitaires + intégration
- 26
- scénarios Playwright
- CI
- GitHub Actions
- VERCEL
- Déploiement