Mockup de l'application Filiz.
Filiz

Simplifier les processus contractuels

Application web (SaaS) permettant de simplifier les processus contractuels et la gestion électronique des documents pour les CFA.

Problème

Plusieurs centaines de milliers de contrats d’alternance sont signés tous les ans sur à partir d’un formulaire encore très archaïque sur lequel repose l’ensemble du processus contractuel.

Solution

Rationaliser le processus contractuel en proposant une solution digitale qui invite toutes les parties prenantes autour de la même table pour signer le contrat d’alternance.

Rôle

UX/UI Designer

Période

Jan. 2022 - Sept. 2022
(9 mois)

Équipe

2 Co-fondateurs
1 Développeur
1 Designer (moi)

Mockup de l'application Filiz sur la page contrat.

L’opportunité sur laquelle la startup s’est construite

L'essor du contrat d'alternance sur le marché de l'emploi

L’alternance à connu un essor important au cours des dernières années principalement dû aux mesures conduites par le Ministère du Travail en 2019. Une nette progression du nombre de contrats d’alternance signés par rapport aux années précédentes a été observé en 2020 comptabilisant un record du nombre de contrats signés.

+40 %

de contrats en plus signés par rapport à l’année précédente

495 000

contrats d’apprentissage signés sur l’année 2020

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’alternances

Complexe et fastidieux

Le contrat d’alternance doit être rempli et signé par plusieurs personnes rendant le processus particulièrement complexe.

Peu digitalisé

Le processus repose sur un formulaire papier et encore très peu digitalisé au sein des CFA.

Suivi opaque

Le suivi du contrat auprès de chaque acteur est très difficile pour l’école, l’entreprise ou l’étudiant.

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

Processus de conception

L’objectif des premiers mois pour la startup était concevoir un MVP (Produit Minimum Viable) pour trouver son PMF. Le processus de conception s’inscrit plus largement dans une démarche lean adopté par l’entreprise.

ÉTAPE 1
Recherche
ÉTAPE 2
Définition
ÉTAPE 3
Conception
ÉTAPE 4
Évaluation

Une entrevue du métier et des processus administratifs

Méthodes de recherches utilisées

Pour acquérir une compréhension du métier et comprendre le processus contractuel, nous avons entrepris des recherches exploratoires articulées autour de 2 activités :

Entretien utilisateur
Analyse du processus
Insights

Ce que notre entretien nous a appris

Une charge mentale excessive

Les chargé∙es de relations entreprises réalisent de nombreuses tâches et gèrent plusieurs contrats au quotidien créant une charge mentale importante pour eux.

Des tâches parfois très chronophages

Plusieurs tâches leurs sont répétitives et chronophages. Certaines tâches ne sont pas internalisées ou digitalisées obligeant les chargé∙es de relations entreprise à utiliser des solutions ad hoc.

Absence de suivi en temps réel

Les CFA tentent de rationaliser le processus mais le suivi du processus en temps réel demeure difficile.

Risque financier pour le CFA et l'entreprise

Le CFA ne dispose d’aucune visibilité sur le montant subventionné par l’OPCO. L’entreprise n’a pas non plus d’informations sur le subventionnement du salaire de l’apprenti.

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

Persona

Transformer nos insights en persona

Nous avons créé une première version des personas de nos utilisateurs et plus particulièrement ici, celui d'une chargée de relation entreprise avec plusieurs années d'expérience.

Sylvie Dufour

Âge : 38 ans
Localisation : Nantes
Statut : Mariée

Chargée de relations entreprise
Présentation de Sylvie

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 dans le contrat

Simplifier un processus éminemment complexe

Workflow

Réimaginer la façon de créer un contrat

L’un des principaux défis consistait à repenser la façon de contractualiser en se basant sur le formulaire papier (Cerfa) fournit par l’État.

01
Rationaliser un processus papier

Après avoir fait l’inventaire des pré-requis contractuel, nous avons créé plusieurs parcours composés de plusieurs étapes.

02
Répartir les responsabilités entre les acteurs

À partir de ces parcours, on peut déterminer les responsabilités de chacun dans le processus contractuel. Cette répartition décharge le CFA d’une responsabilité qui lui était souvent assignée : celle de remplir toutes les informations dont elle avait la connaissance.

03
Le CFA : orchestrateur du processus

Chargé d’initier le processus contractuel, le CFA gère les accès de chaque acteur tout en disposant d’une vision d’ensemble sur le processus.

La particularité de l’application est qu’elle décompose le contrat en étapes successives et asynchrones appliquant le principe de divulgation par étapes. Cela permet de réduire la fréquence à l’erreur en segmentant et distribuant l’effort cognitif nécessaire pour créer un contrat.

Architecture de l'information

La colonne vertébrale de l’application

L’application s’articule autour de 6 fonctionnalités qui dissocient les rôles de chacun. Ces fonctionnalités constitue le socle de l’application reposant sur le processus contractuel. Cela permet au CFA de gérer et piloter des contrats à grande échelle et de monitorer son organisation.

Parcours utilisateurs

Décomposer l’expérience en parcours utilisateurs

Chaque parcours contient donc plusieurs pages qui hiérarchisent les informations demandées sous forme de champs de saisie. Ces parcours sont accessibles depuis une liste.

Transformer une expérience abstraite en interface tangible

Wireframes

Le squelette de l’application

Les premiers wireframes que nous avons conçu nous ont permis d’explorer plusieurs mises en page à moindre coût avant de définir la structure de l’application.

01
Architecture produit

L’architecture du produit reprend un schéma commun de SaaS avec une navigation latérale contenant les fonctionnalités produit et un menu de navigation avec les actions utilisateur.

02
Listes d'entrées

Les listes sont des tables de données contenant les entrées créé par le CFA (formations, promotions, étudiants). Chaque entrée contient des métadonnées qui permettent à l’école d’avoir une vue d’ensemble et de monitorer l’organisation.

03
Parcours de création

Les parcours de création disposent d’une mise en page similaire : un étapier qui informe sur le statut puis le contenu du formulaire avec un titre, une description, les inputs et boutons d’action.

Itérerations de conception des formulaires

Nous avons réalisé plusieurs variations des formulaires pour étudier les mises en page possibles. Après avoir réalisé plusieurs itérations, nous avons choisi d’intégrer les formulaires au produit pour permettre l’accès au menu de fonctionnalités et de profiter d’une mise en page plus riche et dynamique basé sur une grille.

Itération 1

L’image (à droite) occupe un tier de la page sans apporter de plus value à l’interface.

Le formulaire est aligné à gauche pouvant devenir une mise en page peu ergonomique dans certaines configurations.

✅  Itération 2

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

Le contenu occupe toute la largeur disponible ce qui permet une pleine concentration sur la tâche.

La dernière couche qui donne vie au produit

Design System

Une librairie de composants pour gagner en agilité

Pour réduire réduire l’effort de conception UI, nous avons choisi d’utiliser une librairie de composants pré-construite qui intégre les principes directeurs de Material Design. La bibliothèque de composants que nous avons utilisé contient plusieurs dizaines de composants personnalisables.

Le premier jalon de la mise en place du design system consistait à configurer les design tokens qui permettent de mettre à jour les propriétés de styles à travers toute la bibliothèque.

Grille & mise en page

Préparer le terrain d’une application web réactive

Le produit repose sur une grille de 12 colonnes qui permet de créer une interface responsive. Chaque élément occupe tout ou partie de ce nombre de colonnes disponibles et s’adapte en fonction de la taille de l’écran.

Spécifications

Rationaliser l'interface utilisateur

L’interface a été conçue en utilisant une grille à 8 points. Ce système permet d’uniformiser, d’harmoniser et de standardiser l’UI en créant des interfaces précises et réactives au pixel grâce à des multiples divisibles.

À partir de cette grille, on peut créer des organismes qui utilisent des composants en y appliquant les principes de la théorie Gestalt, en particulier ici la loi de proximité et de la région commune.

Ce que j’ai appris grâce à cette expérience

Concevoir de 0 → 1

J’ai découvert que concevoir en partant de rien représentait un vrai défi et que le chemin vers la solution n’est jamais linéaire mais plutôt une succession d’ajustements qui permettent d’aboutir à une solution.

Concevoir avec une intention

Cette première expérience m’a appris que le design est le résultat d’intentions. J’ai appris à expliquer les choix et les décisions derrière mon travail pour recevoir des critiques constructives.

Agilité version startup

L’entreprise a fait face à de nombreux aléas au cours de mon alternance qui rythment la vie de startup. Cela m’a appris à développer mes capacités d’adaptation et d’être agile.

Merci pour votre intérêt !

Si mon travail vous intéresse, n'hésitez pas à faire un tour sur un de mes autres projets.

←  Retour aux projets