Introduction Contexte Problématique Processus de conception Recherche utilisateur Expérience utilisateur Conception et ergonomie Interface utilisateur Solution Apprentissages

Filiz – Simplifier les processus contractuels pour les écoles

Contexte

Avec plusieurs milliers de contrats d’alternance signés chaque année, l’objectif de Filiz est de proposer une solution qui aide les écoles et les centres de formation d’apprentis (CFA) à simplifier les processus contractuels.

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

Mockup de l'application Filiz sur la page contrat.

Contexte

L’essor de l’alternance sur le marché de l’emploi.

Une nette progression 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 de départ concernant le contrat d’alternance

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.

Problématique

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

Méthodologie

Processus de conception

L’objectif des premiers mois pour la startup était concevoir un Produit Minimum Viable afin de trouver rapidement notre adéquation produit/marché. Plus largement, le processus de conception s’inscrit dans une démarche lean.

ÉTAPE 1

Recherche

ÉTAPE 2

Définition

ÉTAPE 3

Conception

ÉTAPE 4

Évaluation

Recherche utilisateur

Une entrevue du métier et des processus contractuels.

Méthodes de recherches

Avec le peu d’expérience dont nous disposions concernant les processus contractuels, nous avons entrepris des recherches exploratoires articulées autour de 2 activités :

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

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

Ce que nous avons appris du métier et du rôle de l’école

Une charge mentale excessive des chargé∙es de relations entreprises dû à la pluralité et à la quantité de tâches réalisées.

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 au personas

Suite à notre entretien, nous avons créé les personas des acteurs impliqués dans le processus contractuel avec une attention particulière pour le∙la chargé∙e de relations entreprise.

Sylvie Dufour

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

Chargée de relations entreprise

Biographie

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

Expérience utilisateur

Simplifier un processus éminemment complexe.

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

D’un processus peu structuré aux responsabilités éparses qui varient selon les écoles, nous avons cherché à rationaliser le processus contractuel en partant de son origine ; le formulaire de l’administration publique 10103*14.

Trouver une structure au milieu du chaos

Pour rationaliser le processus, nous avons dressé un inventaire des champs du formulaire afin de les organiser entre eux et leur donner une structure sous forme de parcours cohérents entre eux.

Distribuer les responsabilités entre les acteurs

À partir des parcours que nous avons créé, nous avons déterminé les responsabilités individuelles. De cette répartition, le CFA est déchargé d’une responsabilité qui lui était souvent assignée : celle de remplir toutes les informations dont elle a connaissance.

L’école comme le chef d’orchestre du processus

En somme, le CFA conserve son rôle d’orchestrateur et dispose maintenant d’outils qui lui permettent de suivre et gérer le processus à l'échelle.

Nous avons décomposé le processus en étapes successives et asynchrones en utilisant le principe de divulgation par étapes. Ce principe a pour effet de réduire la fréquence à l’erreur en segmentant et distribuant l’effort cognitif nécessaire pour créer un contrat.

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 constituent le socle de l’application à partir desquelles le processus contractuel a été repensé.

Définir les parcours utilisateur

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 et forme un ensemble cohérents entre eux en fonction des dépendances définis plus tôt.

Conception & ergonomie

Construire le squelette de l’application.

Une architecture qui reprend les schémas de SaaS

Après avoir créé différents parcours, nous avons conçu plusieurs wireframes très tôt avec les cofondateurs pour définir la structure et les principaux patterns d’interaction de l’application.

Pour son architecture, l’application utilise un schéma commun de SaaS comprenant une navigation latérale qui contient les fonctionnalités et un menu de navigation supérieur.

Listes – un répertoire qui permet de monitorer l'école

Les listes sont des tables de données qui contiennent toutes les entrées créées par l’école (formations, étudiants, contrats). Cette vue permet d’afficher des métadonnées essentielles qui permettent à l’école d’avoir une vue d’ensemble et de monitorer son organisation.

Mise en page des formulaires – dilemme entre esthétique et fonctionnel

En partant du principe que les formulaires qui constituent le cœur de l’expérience produit, nous avons réalisé plusieurs variations pour envisager différentes mises en page avant de prendre une décision.

La première itération que nous avons réalisé reposait sur une illustration qui isolait le formulaire du produit en mettant l’accent sur l’aspect visuel. Bien cette itération présente ses avantages, nous avons testé une seconde variation en l’intégrant au produit.

Après plusieurs retours interne, nous avons choisi cette dernière pour ses avantages à la fois fonctionnel et technique qui consiste à reposer sur une grille de mise en page plus riche et dynamique en plus de réduire le coût de développement.

Non sélectionnée

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.

sélectionnée

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.

Formulaire – orienter vers la progression

Les formulaires comprennent deux parties : l'étapier qui permet d'afficher la progression à l'intérieur du formulaire en donnant un état sur l'avancée et le statut, et le contenu qui comprend un titre, des champs de saisie et les actions principales du formulaire.

Interface utilisateur

Une interface à l’image de la marque.

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 qui intégre les principes de Material Design. La bibliothèque de composants que nous avons utilisé contient plusieurs dizaines de composants hautement 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 à partir de la charte graphique.

Grille de mise en page – préparer le terrain d’une application réactive

Nous avons utilisé une grille de 12 colonnes qui permet de concevoir une interface réactive. Les éléments occupe tout ou partie des colonnes disponibles et s’adaptent en fonction de la taille de l’écran.

Une interface conçue au pixel

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, comme la loi de proximité ou de la région commune.

Apprentissages

Ce que j'ai appris au cours de mon alternance

Concevoir de 0 → 1

J’ai eu l'occasion de voir les prémisces d'un produit de son berceau à son industrialisation. J'ai réalisé que la réussite est le fruit d’une collaboration étroite avec les équipes et d’adaptation face à ses apprentissages.

Maîtriser les outils

Pendant près d'un an, j'ai travaillé essentiellement avec Figma que j'ai très vite pris en main. J'ai utilisé de nombreuses fonctionnalités pour gagner du temps, simplifier et améliorer la collaboration avec les devs.

Agilité version startup

En travaillant dans un milieu incertain et qui évolue rapidement, j'ai appris à faire face à cette incertitude et à être davantage résilient face aux défis qui se présentaient au cours de cette alternance.

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