Chargement des ressources...
IntroductionEspace du problèmeProblématiqueProcessus de conceptionRecherche utilisateurExpérience utilisateurConception & ergonomieInterface utilisateurRésultatsApprentissages
Présentation

Simplifier les processus contractuels pour les CFA

Étude de cas de la conception de 0 → 1 du SaaS chez Filiz
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 concevoir la première version de la plateforme, de son expérience à la mise en place du design system en collaboration avec les cofondateurs.

Lancée à l’automne 2022, la solution a été adoptée par +10 écoles en 12 mois permettant de générer un CA à 6 chiffres.

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.

Un 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

Notre constat concernant les contrats d’alternance

Les contrats d’alternances impliquent trois acteurs différents ce qui rend ce processus particulièrement 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 par l’OPCO.

Les contrats d’alternance sont particulièrement difficiles à lire et à compléter pour les entreprises et les étudiants

Contrat d'apprentissage et de professionnalisation.
Problématique
Procédé

Un processus qui s'inscrit dans une démarche lean

L’objectif pour la startup était de concevoir un MVP (Produit Minimum Viable) pour trouver l’adéquation produit/marché. Le processus conception s’inscrit plus largement dans une démarche lean.

É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

Pour comprendre le processus métier et identifier les points de frictions du processus contractuel, nous avons entrepris des recherches exploratoires articulés autour de deux activités :

Un entretien utilisateur auprès d’une chargé de relation entreprise d’une école de l'enseignement supérieur privé. (n=1)
Une analyse du processus suite à l’embauche d’un alternant et deux stagiaires dans l’entreprise.

Un processus protéiforme

L’embauche d’un apprenti et de stagiaires ont permis aux co-fondateurs d’analyser le processus contractuel. En l’état, on retient que ce processus reste très protéiforme et varie selon les écoles qui tentent de le rationaliser par des pratiques internes.

Le rôle prépondérant du CFA

Suite à notre entretien avec un CFA, nous avons collectés plusieurs insights sur le métier de chargé de relation entreprise.

Une charge mentale excessive des chargé∙es de relations entreprises dû à la complexité du processus, la quantité de tâches du quotidien, leur planification et suivi.

De nombreuses tâches s’avèrent répétitives et chronophages pour les chargé∙es de relations entreprises.

Le manque d’outils adaptés obligent l'utilisation de solutions ad’hoc pour les chargé∙es de relations entreprises.

L’absence de visibilité de l’avancé du contrat crée des incertitudes en raison des rôles et des responsabilités éparses.

Des insights aux personas

Suite à notre entretien, nous avons dressé la première version des archetypes produit servant comme d’un référentiel durant le processus de conception.

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

Rationaliser un processus 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.

1

De l'inventaire aux parcours

En partant du contrat papier, nous avons dressé l’inventaire des champs requis pour rationaliser chaque informations sous formes de parcours.

2

Un processus qui implique l'entreprise et l'étudiant

Ces parcours permettent à l'application de fonctionner en reposant sur un socle de fonctionnalités que nous avons définit au terme des premiers mois.

De ces parcours sont nés les responsabilités individuelles en y impliquant activement désormais l’entreprise et l’étudiant. Une décision qui fait suite aux insights collectés lors de notre entretien, permettant de décharger l’école de responsabilités qui lui étaient souvent assignées, à tort.

3

L’école comme chef d’orchestre

L’école conserve un rôle pilote du processus et dispose d’outils qui lui assurent un suivi et contrôle fin des contrats à grande échelle.

La colonne vertébrale du processus

En bref, l’application s’articule autour de 6 fonctionnalités qui constituent le socle fonctionnel du processus tel que repensé suite aux itérations réalisés.

Un processus par étapes

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 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 (menu latéral, navigation supérieure) sur une application qui leur est inconnue.

Tables – permettre une vue d’ensemble et un contrôle fin

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

Nous avons exploré plusieurs mises en page du formulaire qui constituent le cœur de l'expérience produit. De mises en page visuelles à des itérations plus fonctionnelles, elles nous ont permis d'explorer les possibles à moindre coût en réduisant les coûts de développement.

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 une librairie de composants.

La librairie MUI que nous avons utilisé met à disposition plusieurs dizaines de composants pré-construits qui intègrent les principes de Material Design.

En quelques minutes, nous avons pu mettre à jour des centaines de composants grâce aux design tokens à disposition.

Le look and feel de Material

Les composants de la librairie reproduisent les effets et sensations de Material en y intégrant 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'informer le statut sur la tâche et encourager l'accomplissement de la tâche.

Résilient et tolérant à l'erreur

En sollicitant particulièrement la mémoire de travail, les formulaires sont sujet à l’erreur et c’est pourquoi nous avons conçue l’application pour prévenir et minimiser l’erreur humaine.

La boucle de vérification à la soumission et le formatage forcé permettent de réduire la fréquence et l'introduction d'erreurs dans le contrat.

Illustrations produit – rendre l'abstrait plus tangible

Pour rendre le produit plus convivial à l’usage, nous avons utilisé une librairie d’illustrations de style isométrique. Étant modulables, on peut créer des compositions qui représentent des concepts administratif abstraits.

Set d'illustrations de concepts administratifs.
Résultats

Un outil qui change la façon de contractualiser.

420

centres de formation en 2025

120 000

contrats d’alternance à son actif

80 %

du temps gagné sur le processus métier

Rétrospective

Ce que j’ai appris au cours de mon alternance.

Principaux apprentissages

Concevoir de 0 → 1
J’ai eu l'occasion travailler sur le début du cycle de vie produit en participant à toutes ses étapes jusqu'à sa mise sur le marché.
Embrasser l'incertitude
Travailler en startup apprend à se remettre en question et à favoriser l'agilité en mettant en place des pratiques qui favorisent la flexibilité.
Maîtriser les outils
J'ai essentiellement travaillé sur Figma au cours de l’année ce qui m’a permis de maitriser l’outil en cherchant à optimiser mon workflow pour réduire l’effort de design et collaborer efficacement avec les dévs.

Projet suivant :

SNCF Connect
Product Design

Encourager l'usage des mobilité durables

Intégration des micromobilités aux côtés de l’offre de train réalisé lors d'un hackathon.

Merci pour votre intérêt !

←  Retour aux projets
← Retour