easyPAE
Une application web pour en finir avec la convention de stage en PDF
Comment concevoir une application web pensée pour 8 rôles utilisateurs différents, sur une problématique réelle — et livrer un Figma exploitable par des développeurs en formation ?
Focus Projet · easyPAE — Application web collaborative
Client
Logiciels
Catégories
- UX Research
- Design UI
- Maquettage/Prototypage
- Travail d'équipe
Ce projet m'a appris que designer en équipe, c'est d'abord s'aligner sur une vision commune avant de toucher à Figma — et que la vraie complexité d'une application multi-rôles se cache dans les jonctions entre les parcours, pas dans les écrans individuels.
Processus de conception : D'une fiche PDF à une app collaborative
Concept
Dans le cadre d’un projet collectif CDA × CDUI, notre équipe de 7 designers a pris en charge une problématique concrète : la gestion des conventions de stage à l’AFPA reposait entièrement sur une fiche PDF à compléter manuellement, transmise par email ou Teams.
Résultat : des oublis, des erreurs de saisie, de nombreux allers-retours entre les acteurs et une charge administrative lourde pour tout le monde. L’enjeu de notre intervention : concevoir une application web collaborative pour centraliser, automatiser et sécuriser ce processus de bout en bout.
La complexité du projet tenait à l’hétérogénéité des utilisateurs. Chaque rôle dispose de droits, de besoins et de responsabilités spécifiques dans le circuit de validation de la convention. Nous avons construit un persona détaillé pour chacun.
- Swimlane : modélisation du flux de validation complet — de la création du compte Super Admin jusqu’à la signature finale par la direction, en passant par les 5 acteurs intermédiaires.
- Visual Site Map : architecture de l’information structurée autour du dashboard central, avec des nœuds différenciés selon le rôle (Formation, Stagiaire, Mes documents, Notifications, Astuces).
- Mind maps & User flows : pour chaque persona, définition des user stories, use cases et user tasks — puis traduction en user flows annotés (création de compte, remplissage du formulaire, suivi, signature, téléchargement).
Design
L’identité visuelle d’easyPAE devait refléter deux valeurs clés : la clarté institutionnelle (l’application s’inscrit dans un cadre administratif) et la facilité d’usage (les utilisateurs ne sont pas tous à l’aise avec le numérique).
- Logo : symbole composé de 4 formes organiques, évoquant la mise en relation des acteurs — simple, mémorable, déclinable.
- Palette : bleu primaire (#2563EB) — confiance et clarté institutionnelle, blanc, gris neutre. Les couleurs secondaires codifient les statuts : vert pour la validation, ambre pour les alertes, rouge pour les blocages.
- Typographie : sans-serif lisible à toutes tailles, hiérarchie claire en 4 niveaux. Aucune fantaisie — l’efficacité prime.
Chaque rôle dispose de son propre dashboard adapté à ses responsabilités, tout en partageant les mêmes composants de base. La cohérence visuelle est assurée par un design system partagé entre les 7 designers.
- Responsive : chaque écran décliné en version mobile et desktop — l’application cible des utilisateurs en situation de mobilité (stagiaires) comme à leur bureau (formateurs, direction).
- Composants partagés : navigation bottom bar (mobile), sidebar (desktop), cards de formations, indicateur de progression en 3 étapes, historique de suivi chronologique.
- Statuts visuels : système de couleurs codifiées pour l’avancement des dossiers — barres de progression, badges, icônes d’état — lisible d’un coup d’œil pour tous les profils d’administration.
Réalisation
Le livrable final de ce projet était un fichier Figma complet, structuré et annoté — transmis directement à une équipe de Concepteurs Développeurs d’Applications (CDA) en formation, qui ont pris en charge l’intégration technique.
- Organisation de l’équipe : répartition des personas entre les 7 designers — chacune responsable d’un ou plusieurs profils utilisateurs, de la user story jusqu’au prototype Figma.
- Cohérence transversale : mise en place d’un design system commun (couleurs, typographies, espacements, composants) pour garantir l’homogénéité malgré le travail en parallèle.
- Passation développeurs : annotations Figma, documentation des comportements interactifs (formulaires multi-étapes, notifications, génération PDF automatique), nomenclature des calques normalisée pour faciliter l’intégration.
- Scénarios critiques couverts : création de compte, remplissage du formulaire à 3 étapes (stagiaire → entreprise → validation), circuit de signatures multi-acteurs, génération et téléchargement du PDF final, gestion des rôles et droits par le Super Admin.
Ce que ce projet m'a appris
- Designer en équipe à 7, ça s’organise : la coordination entre designers est un vrai métier. Aligner les décisions de design avant de produire, c’est ce qui rend un livrable cohérent.
- La complexité des droits utilisateurs : concevoir une interface multi-rôles m’a appris à penser en termes de permissions, de vues conditionnelles et de flux partagés — une compétence clé pour les applications métier.
- Livrer pour des développeurs, pas pour un client : la rigueur de la passation — annotations, nomenclature, comportements documentés — change la qualité du résultat final. Un fichier Figma propre, c’est autant du travail d’UX que de design.
- La vraie valeur de la recherche utilisateur : avec 8 profils différents, impossible d’improviser les parcours. Les swimlanes et user flows n’étaient pas des livrables décoratifs — ils ont directement dicté la structure de l’interface.
