← Retour
Mockup en squelette du produit Filiz

Filiz – Simplifier les processus contractuels

Plateforme de gestion des processus contractuels des contrats d’alternances et conventions de stage.

Étude de cas
UX Design
UI Design

Rôle & tâches

UX/UI Designer (Apprenti) – Recherche UX, design UX et design UI

Contexte

  • Alternance
  • Conception et d'un produit SaaS/B2B en lean startup

Durée & statut

Sept. 2021 – Sept. 2022(13 mois)
Lancé en Octobre 2022

Équipe

2 Co-fondateurs (ingénieur + cheffe de projet)
2 Développeurs
1 Designer (moi)

Résumé (TL;DR)

Filiz est une startup qui simplifie les processus contractuels pour les écoles et les entreprises en proposant une plateforme qui dématérialise la création, la signature et la gestion électronique des contrats d’alternance et des conventions de stage.

J’ai travaillé au cours de l’année 2022 en collaboration avec les co-fondateurs sur la conception de la première version du produit qui a été lancé à l’automne 2022.

La solution a été largement accueilli et adopté par plusieurs écoles et leurs pôles relation entreprise cumulant ainsi plus de +10 000 contrats gérés pour une dizaine d’école en 12 mois.

L’évolution des contrats d’alternance

Au cours de l’année 2020, plusieurs mesures conduites par le Ministère du Travail ont permis de favoriser le développement de l’activité chez les jeunes. Sur l’année 2021, 38 % des contrats d’apprentissage en plus ont été signé par rapport à l’année précédente constituant près de 733 000 contrats signés.

En plein essor de l’alternance, de nombreuses écoles et CFA (Centre de Formation d’Apprentis) ont bénéficié de ces mesures et ont constaté une hausse de leur nombre d’alternants et donc de leur volume de contrats à traiter.

Le rôle de Filiz

Filiz est une startup qui se positionne comme un acteur permettant de simplifier les processus de contractualisation des contrats d’alternance et des conventions de stage pour les écoles et de faciliter l’obtention des aides financières pour les entreprises.

Comment pourrions-nous simplifier le processus de contractualisation des contrats d'alternance et des conventions de stage ?

Une plateforme qui simplifie le processus de contractualisation

La plateforme Filiz gère l’ensemble du processus contractuel en conviant l’école, l’étudiant et son entreprise autour de la même table. Elle facilite la création et la gestion du cycle de vie des contrats pour les écoles.

Image de l'application Filiz sur le parcours de création d'un contrat.Image d'une fenêtre du produit Filiz demandant les modalités du contrat.
80 %*
de temps gagné sur la création d'un contrat d'apprentissage

*estimation du temps gagné par rapport à une gestion du contrat sans outil externe

Processus de conception

En plein lancement d’activité, notre objectif principal était de concevoir un MVP (Produit Minimum Viable) afin de valider nos idées et de se positionner sur le marché dans un premier temps.

Pour concevoir la première version du produit, nous avons travaillé principalement en lean startup avec un procédé décliné en 4 étapes utilisant le principe de convergence/divergence incluant plusieurs phases d’allers/retours.

Découvrir

Icône de loupe.

Recherche utilisateur, analyse du flux de travail, synthèse et identification des opportunités.

Définir

Icône d'une arborescence.

Cadrage et définition stratégique du Produit Minimum Viable et des fonctionnalités clés.

Concevoir

Icône d'un crayon et d'une règle.

Conception du produit par itérations. Mise en place du design system et d’une lib. d’illustrations.

Prototyper

Icône d'une ampoule lumineuse.

Prototypage de scénarios d’usage et test interne pour vérifier la viabilité de la solution.

Hypothèse de départ

Pour cadrer la première version du produit, nous avons réalisé un atelier basé sur le modèle Hypothesis Driven Development qui a permis de définir nos principales hypothèses et la façon de les vérifier. L’hypothèse suivante définit le point de départ du produit à laquelle cette étude de cas s’attache à répondre.

Nous pensons que nous pouvons atteindre la satisfaction client si le.la chargé.e de relations entreprises résout son besoin de gagner du temps en ayant une plateforme qui digitalise et automatise la génération des contrats d’alternance et des conventions de stage.
Critères de validation
  • Satisfaction du processus jusqu’à la réception de la facture
  • Une demi-heure pour réaliser un contrat
Métrique
  • Satisfaction client
  • Temps sur l'application
Étoile polaire (North Star)

Temps total passé par contrats < 30 mins

Recherches initiales

Point de départ de nos recherches

Pour acquérir une compréhension plus profonde de nos utilisateurs et du processus de contractualisation, nous avons entrepris des recherches exploratoires articulées autour de 2 activités :

Entretien utilisateur (n=1)

Entretien utilisateur semi-directif avec une école pour comprendre le contexte métier

Analyse du flux de travail

Identifier les tâches et les interactions de l’ensemble du processus de contractualisation

Entretien utilisateur

Comprendre le rôle des chargés administratif

Nous avons réalisé un entretien utilisateur semi-directif avec une chargée de relations entreprises d’une école de quelques centaines d’étudiants. Cet entretien a permis de découvrir le rôle du pôle relation entreprise, les tâches métier et d’identifier les problèmes sous-jacents liés au processus et au métier.

Insights de notre entretien

Plusieurs outils digitaux ou non qui ne sont pas toujours internalisés sont utilisés pour différentes tâches administratives

La multiplication des relances auprès de l’entreprise et de l’étudiant deviennent chronophage pour les chargé.es de relations entreprises

L’école informe chaque entreprise des spécificités et des règles liées à la rémunération pour les assister dans le remplissage de leur partie du contrat

Le contrat est sujet aux erreurs de la part de l’étudiant, de l’entreprise ou de l’école

L’école n’a pas de visibilité sur le montant de subventionnement de la formation par l’OPCO (Opérateur de Compétences) ce qui constitue un risque financier pour certaines écoles

Personas

Archétypes de nos utilisateurs

Pour représenter nos utilisateurs, nous avons créé des archetypes des principales parties prenantes du contrat. Ces personas cherchent à retranscrire les motivations et points de friction identifiés au cours de notre entretien et de nos échanges avec d’autres entreprises.

Illustration d'une femme qui souris avec un pull violet.
Sylvie Dufour
Chargée de relations entreprises
38 ans | Nantes, FR
Organisée
Méthodique
Diligente

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

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 petites tâches répétitives
  • Apporter des retours d’expérience pour améliorer les processus administratifs
Frustrations
  • Multiplier les allers/retours auprès de l’étudiant et de l’entreprise pour faire avancer le contrat
  • Constater des erreurs ou un contrat incomplet
Illustration d'un homme avec un col roulé souriant.
Gilles Langlois
Chef d'une PME d'isolation thermique
42 ans | Mulhouse, FR
Occupé
Rationnel

Gilles a monté sa société d’isolation thermique pour les bâtiments et s’est spécialisé dans les machines qui soufflent la laine de verre. Chaque année, il embauche un apprenti du lycée où il a été diplômé.

Motivations
  • Gagner du temps dans le remplissage du contrat
  • Connaître les aides financières disponibles à l’embauche d'un apprenti
  • Suivre l’avancé du contrat signé auprès de l’OPCO (Opérateur de Compétences)
Frustrations
  • S’inscrire sur plusieurs plateformes pour réaliser des tâches administratives
  • Faire un suivi des paiements qu’il doit recevoir
Analyse du flux de travail

Comprendre et cartographier le processus contractuel

Nos recherches ont permis de cartographier l’ensemble du processus contractuel sous la forme d’un workflow relativement complexe. Celui-ci a permis d’identifier l’ensemble des tâches, les principaux jalons et de comprendre les responsabilités individuelles dans le processus contractuel.

Principes de conception

Les challenges de conception

La solution reposait sur quelques principes formalisés par les co-fondateurs de façon informelle à l’origine du projet.

👥 Un travail collaboratif

Créer une expérience collaborative conviant toutes les parties prenantes autour de la table.

📋  Facile à prendre en main

Simplifier le processus contractuel et rendre la prise en main facile et intuitive.

🧚  Un produit plus humain

Rendre le produit désirable en créant une connexion émotionnelle positive et mémorable.

Architecture de l'information

La colonne vertébrale du produit

Le produit s’articule autour de 6 fonctionnalités qui permettent de couvrir l’ensemble du processus contractuel. Ces fonctionnalités déclinent le processus en plusieurs étapes et permettent à l’école un contrôle fin et une gestion à grande échelle des contrats.

Arborescence et navigation

L’arborescence suivante représente les fonctionnalités et leurs liens de parenté. Chaque contrat est rattaché à une entreprise, elle même rattachée à un étudiant qui fait parti d’une promotion des formations proposées par l’école.

Schéma d'une arborescence sur 6 niveaux réprésentant l'architecture produit.
Image
Arborescence produit

L’arborescence se matérialise sous la forme de la navigation du produit qui permet d’accéder aux fonctionnalités. Les premiers mois ont permis de définir au fur et à mesure les fonctionnalités embarquées par itérations.

Notre première itération incluait une fonctionnalité liée aux rôles et permissions des chargé.es de relations entreprises de l’école qui a été écarté pour le MVP.
La seconde itération fusionnait le contrat à l’étudiant avant qu’on ne dissocie le contrat de l’étudiant ce qui nous a amené à la troisième itération.

Trois itérations de la navigation latérale du produit.
Image
Navigation latérale du produit
Parcours utilisateurs (user flow)

Décomposer le processus en plus petites tâches

Chaque fonctionnalité dispose d’un parcours de création qui permet de collecter des informations sur le contrat et de définir un ensemble de règles qui devra être respecté dans la continuité de la création du contrat.

Les parcours de création se déclinent en plusieurs étapes appliquant le principe de divulgation par étapes afin de segmenter l’objectif en plus petites tâches. Ceci a pour objectif de maximiser l’attention sur la tâche et de réduire la charge mentale ayant pour conséquence de réduire le taux d’erreur.

Première étape, créer son école

La première étape consiste à créer l’école chargée d’opérer les contrats de ses étudiants. Après l’inscription, l’utilisateur est invité a créer son école à partir de son n° de SIRET avant d’arriver sur son tableau de bord.

Schéma du parcours utilisateur de la création d'une école. L'utilisateur commence depuis la page d'inscription, passe par un formulaire pour créer une école et termine sur le tableau de bord.
Image
Parcours de création d'une école

Création et administrer se formations

La formation constitue le premier niveau de l’arborescence et s’agit de la première étape dans le processus contractuel. Depuis la liste de formations, l’utilisateur pourra créer ou visualiser une formation existante. Les promotions et les étudiants reposent sur ce même modèle de gestion.

Schéma d'un parcours utilisateur permettant de gérer ou créer une formation. L'utilisateur commence depuis la liste des formations et peut choisir de créer, visualiser ou éditer/supprimer une formation.
Image
Parcours de gestion d’une formation

Enfin, créer un contrat d'alternance (flux simplifié)

Une fois que la formation et la promotion sont créés, l’école peut créer un étudiant ce qui aura pour effet de créer automatiquement son contrat.

À cette étape, chaque partie prenante sera invité sur la plateforme à tour de rôle pour compléter les parties du contrat qui lui correspondent.

Une fois le contrat complété par chaque partie prenantes, le CFA doit relire le CERFA avant de le générer afin de demander la signature de chacun.

Schéma simplifié présentant le parcours de génération du CERFA et toutes les étapes ou les parties prenantes sont impliqués dans le processus.
Image
Flux de création du contrat
Maquettes fonctionnelles (wireframes)

Définir la structure et les schémas d'interactions

Avant de commencer le maquettage haute fidélité, les co-fondateurs souhaitaient réaliser une première itération du produit. J’ai conçu des maquettes de basse fidélité d’écrans clés afin de définir la structure et les principaux schémas d’interactions en y appliquant nos principes de conception.

Maquette filaire présentant la navigation latérale et le menu de navigation.
Image
Navigation produit
Maquette filaire présentant la structure d'une table et les décisions de conception.
Image
Maquette filaire d'une table
Maquette filaire présentant la structure d'un formulaire et les décisions de conception.
Image
Maquette filaire d'un formulaire
Itérations

Explorations du design des formulaires

En sachant que les formulaires représentent une part importante du travail et sont au cœur de l’UX, nous avons réalisé plusieurs itérations pour étudier différentes options. Bien qu’elles ne reposent pas sur des usages concrets, elles ont permis d’étudier différentes intentions avant de choisir l’option qui nous semblait la plus appropriée.

Formulaire isolé
Maquette filaire miniature d'un formulaire prenant 2/3 de l'écran et avec une illustration sur l'autre tier à droite.

Le contenu est aligné à gauche et occupe 2/3 de l’écran → reprend notre sens de lecture

L’illustration est contextuelle → place l’emphase involontairement sur une zone non importante

Le formulaire est isolé → pleine concentration sur la tâche mais aucun point de sortie

Formulaire intégré
Maquette filaire miniature d'un formulaire intégré au produit prenant tout la largeur disponible.

Le contenu occupe toute la largeur disponible → permet une pleine concentration sur la tâche

Le formulaire est disposé sur une grille → offre diverses possibilités de mise en page

Le formulaire est intégré → la navigation est accessible  est permet d’accéder aux autres fonctionnalités

Pour l’ensemble des formulaires, nous avons choisi de les intégrer au produit afin de conserver l’accès à la navigation et de garder une mise en page similaire. Cette solution tire également profit de la grille de mise page qui permet d’afficher des informations contextuelles vis-à-vis du formulaire en cas de nécessité.

Design System

Mise en place de la librairie de composants

Pour créer le design system Filiz nous avons utilisé la bibliothèque de composants Material UI qui reprend les principes de Material Design. Après l’installation, j’ai travaillé dans sur la mise à jour et l’évolution des tokens (couleurs, typographies) et des propriétés de style sur la base de charte graphique qui a été fournie au préalable.

Planche de travail présentant l'évolution des boutons de Material Design jusqu'au design system de Filiz. Plusieurs typologies de boutons (primaire, secondaire, terciaire) avec leur état (défaut, survol, pressé) apparaissent sur la planche.
Image
Évolution composant bouton
Mise en page

Créer un format consistant pour les formulaires

Pour la création de page, j’ai utilisé un système de grille et d’espacements en base 8 pour créer un format consistant, réplicable et qui puisse être mis à l’échelle. J’ai utilisé la fonctionnalité d’auto-layout et les contraintes de Figma pour concevoir des composants et des pages réactives.

Maquette d'un formulaire avec les spécifications d'espacement et de mise en page.
Image
Spécifications et structure d’un formulaire
Maquette d'un formulaire avec le système de grille affiché.
Image
Grille de mise en page d’un formulaire
Mise en page

Des tables faciles à mettre à l'échelle

Un autre challenge consistait à créer des tables faciles à lire et dont le contenu soit flexible. Avec des jeux de données, nous avons étudié différents scénarios pour cerner les cas spécifiques (noms composés, composant dans la cellule) et créer des tables suffisamment flexibles et facile à mettre à l’échelle.

Maquette d'une table avec les spécifications et les règles de mise en page.
Image
Spécification et structure d’une table

✏️ Projet en rédaction…

Merci pour votre intérêt et d'avoir scrollé aussi bas.
Si mon travail vous intéresse, vous pouvez me contacter pour en discuter.

← Retour aux projets