Progiciel design
Product design
Design System
Atomic Design
Design Guidelines
Variables Dark & Light
Ateliers
Co-conception
Contexte
L’APEC, acteur majeur de l’emploi des cadres, utilise un progiciel interne complexe regroupant plusieurs outils métier. Ma mission se déroule dans le contexte de décommissionnement du CRM Salesforce. L’objectif de l’APEC est de construire tout les produits digitaux nécessaire à son fonctionnement sur un progiciel interne intitulé Production de Service : PDS.
Etat des lieux et périmètre d'action
À mon arrivée sur le projet Agenda, je rejoins l’équipe en tant que UX Designer. Le projet accuse déjà trois mois de retard.
La phase de discovery a été menée par un précédent designer, dont j’hérite les livrables (experience maps, verbatims, cadrage).
Cependant, aucun environnement design n’est en place : l’espace Figma est vide, aucune librairie UI n’existe, et la charte graphique, bien que complète, reste calquée sur le print sans réelle adaptation au digital.
- Le manque de méthodologie design et de guidelines impacte la qualité et la maintenabilité du produit -
Objectifs premiers
Livrer rapidement des maquettes exploitables tout en structurant une base design pérenne
- Débloquer la production du projet Agenda.
- En parallèle créer une librairie UI réutilisable et scalable pour les futurs produits
- Apporter une cohérence visuelle et fonctionnelle à l’échelle du progiciel.
Approche
1 - Diagnostic & cadrage
- Audit des écrans existants, identification des incohérences.
- Cadrage avec la DSI et les équipes métier pour aligner besoins et contraintes techniques.
2 - Création d’une librairie UI
- Mise en place d’une librairie UI basé sur l’Atomic Design.
- Création de variables dynamiques pour gérer les modes light/dark.
- Normalisation des composants : champs, formulaires, boutons, états.
3 - Conception des modules clés
- Agenda : gestion multi-fuseaux, plages collaboratives, ateliers clients.
- Demandes : création et suivi de tickets post-entretien.
- Relation Client, Proposition Active, Éditeur de Compétences : modules complémentaires pour centraliser les interactions et données clients.
4 - Structuration de la culture design
- Documentation des composants et règles d’usage.
- Sensibilisation des équipes métier à la démarche centrée utilisateur.
Librairie UI & Atomic design
Partant d’un fichier Figma vierge, je conçois d’abord les composants nécessaires au projet Agenda (text fields, dropdowns, checkboxes, toggles, etc.).
États de composants et documentation
Je structure l’ensemble selon les principes de l’Atomic Design, et crée un système de variables dynamiques permettant une adaptation fluide entre les modes dark et light, tout en garantissant l’accessibilité.
En parallèle de la conception des premières interfaces, je pose les bases d’une librairie UI évolutive, qui sera progressivement adoptée sur les projets suivants.
Ce travail de fond a permis d’industrialiser la production d’interfaces et de renforcer la cohérence graphique à l’échelle du progiciel.
De l'atome à la molécule, les organismes se forment.
C'est ici que les templates naissent.
Projet Agenda
L’Agenda permet aux collaborateurs de gérer leurs rendez-vous selon différents contextes (particuliers, entreprises, ateliers, fuseaux horaires).
Parmi les besoins clés :
- multi-fuseaux horaires
- création de rendez-vous paramétrables avec les besoins collaborateurs
- partage et modification de plages entre collaborateurs
- gestion d’ateliers publiés sur Apec.fr
- association de documents et demandes aux plages horaires.
Rapidité et efficacité
Le défi principal : concevoir une interface dense, non responsive, compatible avec un système vieillissant sous Angular, tout en respectant les règles métiers.
Faute de temps, les maquettes sont produites sur la base des livrables de discovery et des retours du métier, sans ateliers formels.
Conception mobile en fin de livraison
Après plusieurs mois, une version mobile “lite” est envisagée, centrée sur la consultation des rendez-vous.
Suite à un benchmark, nous adoptons une expérience proche de Microsoft Teams, reconnue pour son ergonomie efficace et familière.
Projet Demandes
Le projet demande permet aux collaborateurs de créer des “tickets” à la suite d’entretiens, appels ou autre contacts avec des clients ayant des demandes spécifiques aux quels les collaborateurs initiaux n’ont pas pu répondre. Ces demandes sont ensuite triés dans des listes selon des informations clés remplies à leur création. Ces listes sont ensuite gérés par des managers qui attribuent ces demandes à des collaborateurs soit sur des rendez-vous, ateliers ou autres activités.
Les parcours à produire :
- La création, visualisation, modification et suppression des demandes.
- L’organisation et la gestion des demandes par des listes (Vues)
- La création et modification des listes (Vues) via un Orchestrateur
Clarté & hiérarchie à travers la densité
Le premier challenge du projet demande à été d’apporter un peu de clarté et de hiérarchie de l’information dans les interfaces pour les utilisateurs.
Projet Relation client
Le projet relation client est une demande venu de la direction de l’apec dans le besoin de tracer les conversations entre les collaborateurs et les clients. les échange se faisant principalement sur teams et outlook l’apec souhaite pouvoir tracer les évolutions dans l’accompagnement de ses clients même si ces derniers sont suivis par différents collaborateur.
Le besoin du projet :
- Pouvoir récupérer un email dans outlook et l’intégrer au progiciel
- Pouvoir tracer un appel effectué ou reçu par un collaborateur
- Pouvoir consulter les échanges qui ont été fait auprès d’un client
- Associer des emails ou des appels concernant des demandes
Projet Proposition Active
Le projet proposition active est né du besoin de mise en relation des conseillers pour particuliers et des conseillers en entreprise.
Que ces dernier puisse proposer plus facilement des candidats correspondant à des offres ou des recherches récurrentes d’entreprise et inversement.
Le besoin du projet:
- Pouvoir sélectionner une offre présente dans la base de donnée Apec.
- Pouvoir proposer jusqu’à 5 candidats pour cette offre
- Pouvoir sélectionner un candidat et proposer une offre lui correspondant (parcours “inverse”)
- Avoir le choix d’envoyer ou non un email au conseiller client/entreprise, au représentant de l’entreprise à l’apec et aux candidat concernés.
- Pouvoir suivre l’avancé de ces proposition dans un tableau et faire évoluer leur état dans ce même tableau.
- Pouvoir clôturer un proposition active avec plusieurs motifs différents
Projet Editeur de compétences
Projet plus exploratoire, l’Éditeur de compétences a pour but d’analyser les tendances du marché de l’emploi à partir des offres collectées sur plusieurs années.
Le besoin du projet:
- Recherche avancée via un orchestrateur complexe (filtres multiples).
- Recoupement et organisation de données selon critères principaux/secondaires.
- Export vers Excel, Word ou PDF via un presse-papier structuré.
C’est le seul projet où j’ai pu co-animer des ateliers de co-conception avec les équipes métiers.
Ce projet a permis d’introduire une démarche design plus complète, combinant recherche utilisateur, ateliers, prototypage et test de flux complexes.
Impact global
Mon intervention sur l’ensemble de ces projets a permis de :
- Structurer l’écosystème design du progiciel APEC (librairie UI, guidelines).
- Améliorer la cohérence visuelle et fonctionnelle sur plusieurs modules.
- Accélérer la livraison des projets tout en posant les bases d’une culture design à long terme.