Introduction Espace du problème Problématique Processus de conception Recherche utilisateur Expérience utilisateur Conception & ergonomie Interface utilisateur Prototypes Résultats & apprentissages

Simplifier les processus contractuels pour les CFA

Étude de cas de la conception du SaaS chez

Résumé

Filiz conçoit et développe une solution SaaS destinée aux centres de formation d’apprentis (CFA) et aux écoles afin de simplifier les processus contractuels et faciliter la gestion administrative des contrats d’alternance.

J’ai rejoint la startup en alternance peu après sa création afin de travailler sur la première version de la plateforme, en collaboration étroite avec les cofondateurs.

Lancée à l’automne 2022, la solution a été adoptée par une dizaine d'écoles à travers l’Hexagone permettant de gérer plus de 10 000 contrats d’alternance par an.

Rôle

UX/UI Designer

Période & statut

Jan. - Sept. 2022 (9 mois)
Déployé (Q3 2022)

Équipe

2 Co-fondateurs
1 Développeur
1 Designer – Moi

Espace du problème

L'alternance en plein essor sur le marché de l'emploi.

Record du nombre de contrats d’apprentissage avec un fort potentiel de croissance

Graphique : Évolution du nombre de contrats d’apprentissage dans le secteur privé

Sources : Vie publique et Communiqué de presse du Ministère du travail de la santé et des solidarités

Un contrat qui présente des difficultés

Les contrats d’alternances impliquent trois acteurs différents rendant le processus contractuel complexe

Le processus contractuel est obsolète et archaïque car il repose sur un formulaire papier des services publiques

Le suivi demeure opaque et présente des incertitudes sur le financement de la formation en raison de l’approbation de l’OPCO

Difficile à lire, à comprendre et à compléter...

pour l’employeur, le CFA, l’apprenti ou le salarié

Contrat d'apprentissage et de professionnalisation.

Comment simplifier le processus contractuel pour les centres de formation d'apprentis ?

Procédé

Un défi côté design

L’objectif des premiers mois était de concevoir le Produit Minimum Viable pour trouver l’adéquation produit/marché. Le processus conception s’inscrit plus largement dans une démarche lean adoptée par l’entreprise.

ÉTAPE 1

Recherche

ÉTAPE 2

Définition

ÉTAPE 3

Conception

Recherche utilisateur

Une entrevue du métier et des processus contractuels.

Activités de recherches

En début de projet, nous avons réalisé des recherches exploratoires pour comprendre le processus contractuel et les rôles qui gravitent autour au moyen de deux activités de recherche :

Un entretien utilisateur auprès d’une chargé de relation entreprise d’une école

Une analyse du processus suite au recrutement d’un alternant dans l’entreprise

Ce que nous avons appris de notre entretien

Une charge mentale excessive des chargé∙es de relations entreprises dû à la quantité de tâches du quotidien.

Des tâches répétitives et chronophages sans valeur ajoutée.

Un manque d’outils adaptés et parfois pas digitalisés obligeant l'utilisation de solutions ad’hoc.

Une faible visibilité de l'avancé du contrat en raison des rôles et des tâches distribués auprès des acteurs.

Un risque financier pour les CFA qui ne sont pas sûrs de la capacité de certaines entreprises à assumer le coût de la formation.

Source : Questionnaire entretien utilisateur (confidentiel) / Échantillon : 1 employé

Des insights aux personas

De nos entretiens sont nés les personas dont nous avons dressé une première version afin de retranscrire les motivations et frustrations qu’il∙elles rencontrent tout au long du processus contractuel.

Sylvie D.

38, Chargée de relations entreprise

En poste depuis près de six ans, l’expérience de Sylvie lui permet d’avoir un œil expert sur l’ensemble des démarches administratives.

Motivations

Se libérer du temps pour des tâches où son expertise est un véritable atout pour l’école
Gagner en efficacité sur des tâches répétitives

Frustrations

Devoir relancer l’étudiant ou l’entreprise pour savoir où en est le contrat
Constater des erreurs dans le contrat

Gilles L.

42, Chef d’une PME d’isolation thermique

Après ses études, Gilles a monté sa société d’isolation thermique pour les bâtiments. Aujourd'hui il vend ses machines sur le territoire national.

Motivations

Gagner du temps dans le remplissage du contrat
Obtenir des aides financières à l’embauche

Frustrations

Faire un suivi des paiements qu’il doit recevoir
S’inscrire sur une nouvelle plateforme pour gérer le contrat d’alternance

Expérience utilisateur

Simplifier un processus éminemment complexe.

Repenser le processus contractuel

D’un processus peu structuré aux responsabilités éparses qui varient selon les écoles, nous avons cherché à rationaliser le processus contractuel en partant du formulaire fourni par l’administration publique.

De l'inventaire aux parcours

Nous avons dressé l’inventaire des champs requis pour construire des parcours digitaux qui forment une structure cohérente.

Répartir les responsabilités

À partir de ces parcours, nous avons déterminé les responsabilités de chacun en y impliquant activement désormais l’entreprise et l’étudiant.

De cette répartition sont nées de nouvelles tâches permettant de décharger l’école de responsabilités qui lui étaient souvent assignées.

L’école en chef d’orchestre

L’école conserve un rôle d’orchestrateur du processus et dispose d’outils qui lui assure le suivi et la gestion des contrats à grande échelle.

Un processus rationalisé

Le processus se décompose en étapes successives et asynchrones qui utilise le principe de divulgation par étapes. Ceci à pour effet de réduire la fréquence à l’erreur en segmentant et distribuant l’effort cognitif.

La colonne vertébrale du processus

L’application s’articule autour de 6 fonctionnalités qui constituent le socle fonctionnel du processus tel que repensé.

La logique derrière chaque fonctionnalité

Chaque parcours contient plusieurs pages qui contiennent des champs de saisie hiérarchisés. Ces parcours disposent de leurs propres logiques même si l’ensemble suivent le schéma suivant.

Conception & ergonomie

Construire le squelette de l’application.

Une mise en page classique de SaaS

La structure du produit reprend un schéma classique de SaaS comprenant une navigation latérale et un menu de navigation.

Cette structure tire parti des modèles mentaux existants des utilisateurs qui leurs permettent de réutiliser leurs repères sur une application qui leur est inconnue.

Tables – répertorier et visualiser

Dans sa première version, nous avons choisi d’utiliser des tables de données pour afficher les entrées. Elle affichent des métadonnées qui permettent à l’école d’avoir une vue d’ensemble et de monitorer son organisation.

Formulaires – un compromis fonctionnel

La première itération des formulaires que nous avons réalisé reposait sur un visuel en isolant le formulaire de l'application. La seconde itération reposait sur une grille intégrée à l'application.

Après plusieurs retours internes, nous avons choisi la deuxième itération pour ses avantages fonctionnels et techniques : une grille qui permet une mise en page enrichie tout en minimisant le coût de développement.

Isolé

Axé visuel

L’illustration permet de rendre le formulaire plus visuel en renforçant l’image de marque.

Le formulaire est aligné à gauche ce qui peut affecter l’ergonomie dans certaines configurations.

Intégré

Axé fonctionnel

Le formulaire est disposé sur une grille qui offre des possibilités de mise en page riches.

Le contenu occupe toute la largeur disponible favorisant une pleine concentration sur la tâche.

Formulaires – faciliter la lisibilité et scannabilité

Les pages de formulaires contiennent toutes un étapier qui affiche le statut et la progression à l’intérieur ainsi que ses champs de saisie organisés et hiérarchisés par thème.

La mise en page du formulaire vise à faciliter la lecture transversale permettant de réduire l'effort en complétion ou en relecture.

Interface utilisateur

Une interface à l’image de la marque.

Mettre en place un design system robuste

Pour réduire réduire l’effort de conception et minimiser la dette UI, nous avons choisi d’utiliser la librairie de composants React MUI. Cette librairie met à disposition plusieurs dizaines de composants pré-construits qui intègrent les principes de design de Material Design.

Après avoir mis à jour les design tokens, nous avons utilisé la librairie de composants pour construire des wireframes de haute fidelité.

Le look and feel de Material

Les composants de la librairie reproduisent les effets et sensations de Material en plus d’intégrer l’accessibilité.

Une interface précise et réactive

L’interface a été conçue en base 8 permettant d’uniformiser, d’harmoniser et de standardiser l’UI en créant des interfaces précises et réactives au pixel.

Étapier – encourager à la progression

L’étapier fournit une indication claire de la progression au sein du formulaire. Son rôle consiste à graduer la progression afin d’encourager l’utilisateur à accomplir sa tâche.

Table – un moyen de monitorer son organisation

Les tables permettent de voir un ensemble de données.

Résilient et tolérant à l'erreur

Les parcours sollicitent particulièrement la mémoire à court terme des utilisateurs rendant les formulaires sujet à l’erreur. L’application a été conçue pour prévenir et minimiser l’erreur humaine.

Elle utilise un mécanisme de vérification permettant d’empêcher de passer à l’étape suivante si l’un des champs contient une erreur (formatage ou nombre de caractères). Dans le cas d’une erreur, un indice s’affiche à proximité du champs pour aider l’usager à résoudre l’erreur.

Illustration – schématiser des concepts abstraits

Pour rendre le produit plus convivial à l’usage, nous avons utilisé une librairie d’illustrations aux couleurs de la marque. Leur caractère modulable permet de créer des compositions qui illustrent des concepts administratifs abstraits par l’usage de métaphores.

Set d'illustrations de concepts administratifs.

Prototypes

Un outil qui change la façon de contractualiser.

Onboarding simplifié

Le premier point de contact avec l'utilisateur se veut simple et intuitif en étant une démonstration de l'expérience produit. À partir du numéro de SIRET, l'application se charge de récupérer les informations de l'école à partir du base de données ouvertes limitant l'effort nécessaire.

Autres animations de présentation à venir

Résultats & apprentissages

Largement adopté, tout autant apprécié.

420

centres de formation en 2025

120 000

contrats d’alternance à son actif

80 %

du temps gagné sur le processus métier

Ce que j’ai appris au cours de mon alternance

J’ai eu l'occasion de travailler sur un produit de sa stratégie jusqu’à sa conception en passant par les nombreux jalons qui rythme le début du cycle de vie produit.

Au cours de mon alternance, j’ai eu l’occasion de découvrir et d’appliquer de nombreux principes de la méthodologie agile de l’adaptation au changement à l’itération rapide dans un environnement qui évolue rapidement.

Pendant près d'un an, j'ai travaillé essentiellement avec Figma ce qui m’a permis de prendre en main l'outil et ses fonctionnalités pour optimiser mon workflow et mieux collaborer avec les développeurs.

Merci pour votre intérêt !

← Retour aux projets