De la refonte graphique
à la refonte
du parcours.
Refonte produit Wepartum, app B2B2C d'accompagnement parental. La mission démarre sur une refonte graphique. L'audit révèle un problème de structure, pas d'UI. Le périmètre s'élargit, sept états de parcours sont identifiés, un moteur de simulation est construit pour les valider, et Wepartum reprend l'architecture pour refondre son workflow technique côté production.
Remplacer les conventions B2B froides par une présence humaine continue.
Aubergine dominante, blobs organiques, typographie Fraunces, et un vocabulaire de fruits (blush, olive, peach, lilac) qui structure les moments du parcours. Une teinte par intention relationnelle.
Votre simulation
est prête
Votre conseillère a calculé les coûts nets par mode de garde pour votre famille
Simulation démo ·
Assistante mat.
/ mois
impôt
Tranche 1
Vos candidates
« Sophie a une belle énergie et propose des activités créatives cha… »
« Nadia est très professionnelle et s'adapte facilement au rythme des fa… »
Sortir de l'UI corporate des apps RH-santé.
Wepartum aide les parents salariés à trouver un mode de garde pour leur enfant, avec un cofinancement de leur employeur. L'app existante avait une esthétique d'assurance ou de RH, formulaire géant et froid, vocabulaire administratif.
Mandat initial : refonte graphique. Adoucir, humaniser, sortir du registre corporate. La direction artistique était claire, dans la lignée d'Alan Fruits, healthcare as hospitality. Couleurs vivantes, typo Fraunces, formes organiques, blobs, voix éditoriale chaleureuse.
J'ai accepté le mandat tel quel et j'ai commencé par un audit. C'est cet audit qui a fait basculer la mission.
L'UI froide était un symptôme.
Pendant l'audit, le constat se précise. Les écrans étaient effectivement froids et corporate, mais ce n'était pas la cause du problème. Le vrai sujet, c'était la structure des parcours.
L'app était pensée comme un back-office. Elle juxtaposait des écrans sans suivre la réalité du parcours vécu par un parent chez Wepartum. Les informations vitales à chaque étape n'étaient pas mises en avant, l'utilisateur devait chercher où il en était à chaque connexion, la friction s'accumulait.
Repeindre l'interface aurait traité la surface, pas le problème. J'ai remonté le constat à l'équipe Wepartum. On a convenu d'élargir le périmètre, de la refonte graphique à la refonte produit.
Sept états, un seul fil produit.
Cartographie complète du métier de Wepartum avant toute maquette. Cinq rôles à servir : parent salarié, RH employeur, conseillère, assistante maternelle, Pajemploi. Sept états de parcours, dans l'ordre vécu par le parent : qualification, RDV avec Constance, documents, recherche, sélection, démarches, terminé.
L'idée centrale : l'app doit être un compagnon de parcours, pas un back-office. À chaque état, elle affiche les informations vitales pour cette étape précise, ni plus ni moins. Le parent ne cherche pas, il avance. La friction baisse, la conversion s'accélère.
C'est une transcription fidèle du métier de Wepartum dans le produit. Les sept états ne sont pas des écrans inventés, ce sont les étapes réelles que Constance et son équipe accompagnent au quotidien.
Un moteur de simulation pour valider chaque état.
Avant tout développement côté production, j'ai construit un moteur de simulation. Un prototype interactif haute fidélité, codé avec Claude Code, alimenté par des données mockées. Il rejoue les sept états du parcours, leurs transitions, leurs cas limites.
Concrètement, l'équipe Wepartum pouvait cliquer sur la démo et tester, par exemple, ce que voit un parent qui revient sur l'app après son RDV avec Constance, ou comment l'app réagit quand l'utilisateur n'a pas complété ses documents. Chaque scénario rejouable, chaque état contrôlable.
Le moteur a servi à arbitrer en réunion sur du concret, pas sur des wireframes. Et surtout, Wepartum a repris cette structure pour refondre son workflow technique côté production. Le prototype n'est pas resté un livrable de validation, il est devenu un plan d'architecture.
46 écrans dérivés, tous issus de la même source de vérité. Zéro logique conditionnelle dans le rendu, le parcours pilote l'interface.
Sept états, vrais écrans, vraies données
Vos profils sont arrivés
Constance a sélectionné 4 candidates dans votre périmètre. Vous pouvez en voir 2 cette semaine.
Dire au parent où il en est, ce qu'il doit faire, et pré-mâcher la suite.
À chaque état du parcours, l'app répond à trois questions que se pose le parent : où j'en suis, qu'est-ce qui m'attend, et qu'est-ce qui est déjà fait pour moi.
L'écran d'accueil affiche en premier l'information vitale du moment. Une simulation prête à consulter, un RDV à confirmer, une candidate à rencontrer. Tout le reste passe en second plan. Le parent ne cherche pas dans un menu, l'app lui pousse l'action utile.
Le travail administratif est pré-mâché autant que possible. Les coûts par mode de garde sont calculés à l'avance. Le CESU préfinancé est activé d'un tap. Les profils des candidates arrivent déjà filtrés et triés par Constance, avec ses notes, et un coup de cœur quand elle en a un.
Le design system existe pour servir cette mécanique. Cinq couleurs sémantiques (aubergine pour les CTA, blush pour l'empathie, olive pour la validation, peach pour l'attente, lilac pour la découverte) qui donnent un statut au premier coup d'œil. Une voix éditoriale, celle de Constance, qui parle court et direct, sans jargon RH. Une typographie Fraunces pour adoucir le registre.
Mais l'enjeu n'a jamais été la couleur. L'enjeu, c'est qu'à 14h17 entre deux réunions, le parent ouvre l'app et sache en deux secondes ce qu'il doit faire.
Une app compagnon, pas un dossier à valider.
V2 livrée. App B2B2C qui suit le parent à chaque étape, sept états cartographiés, 46 écrans dérivés, un design system aubergine et tons fruits, une voix éditoriale incarnée par Constance.
Le moteur de simulation a permis de valider chaque parcours sur du concret avant la mise en production, et a servi de plan d'architecture pour la refonte du workflow technique côté Wepartum.
Là où la V1 se contentait de valider un dossier administratif, la V2 accompagne un parent dans une décision qui compte.
Design system Wepartum · Direction Alan Fruits
Tokens, atoms, molecules, organisms — la grammaire visuelle qui pilote le moteur de simulation et l'app en production.
01 Tokens
Palette signature
Fruits — états du parcours
Texte & lignes
Typographie
Fraunces (serif) pour les displays · Inter / système pour le texte courant. Letter-spacing très négatif sur les displays — signature DA.
Spacing — grille 4px
Rythme strict basé sur 4. Plus généreux que la v1 — l'air est un composant.
Radii
Direction D : radii généreux. Cards 18, CTA 16, bulles chat 22 (avec coin parlant 6 asymétrique).
Shadows — aubergine-tinted
Jamais de noir. Toutes les ombres sont teintées aubergine pour cohabiter avec le canvas warm bone.
card
0 2 8 · .06cta
0 6 20 · .08bottomNav
0 8 24 · .0802 Atoms
TextV2
primitiveWrapper texte avec variantes typographiques + couleurs fruits. Toute la typo passe par lui.
Avatar
5 sizes · 5 badgesInitiales en Fraunces sur fond fruit. Badges online (olive), heart (blush), star (peach), ring (bone).
Icon
lucide · 4 sizesWrapper Lucide. Stroke 1.8, couleur aubergine par défaut.
StepBadge
aubergine 8%Pill aubergine très légère pour signaler l'étape courante du parcours dans le Hero.
StatPill
2 sizes · fruitsMétrique Fraunces tabular sur fond fruit. Utilisé pour la simu financière, les stats famille.
Progress
7 pips7 pillules d'étape. Done = aubergine, current = blush + dot, upcoming = boneDeep.
ProgressRing
SVG animéAnneau SVG avec stroke aubergine. Track boneDeep, label centré.
StatusChip
8 statutsPill statut candidat. Couleur fruit signe l'état (nouveau, vu, coup de cœur, urgent…).
FilterChip
toggleBouton filtre togglable. Selected = aubergine + scale 1.05 (spring).
PillCta
signature DCTA principal Direction D — pill avec cercle ink inversé à droite. 2 sizes × tous les fruits.
Skeleton
loadingPlaceholder boneDeep avec shimmer fade opacity. Aucune ombre, juste de la respiration.
Blob
ornement SVGForme organique signature. 3 paths × tous les fruits. Opacity 0.65 par défaut.
03 Molecules
Card
3 variantsConteneur générique. elevated (cream + shadow), outlined (border 1px), flat (boneDeep).
TaskItem
3 types · done/undoneTâche avec checkbox animée + type (in-app olive · hors-app peach · critical blush) + chevron optionnel.
ProfileCard
candidateCarte profil prestataire. Initiales sur fond fruit, nom Fraunces, quote conseillère, pills info, status overlay.
RowInput
form rowChamp formulaire en ligne. Label gauche aubergine, valeur droite textSoft, validation cercle aubergine.
RowLink · Date · Time
tappableRangée tappable avec valeur formatée à droite + chevron. Date et Time = wrappers Intl.
OtpInput
6 boxesCode OTP 6 chiffres avec boxes séparés, focus border 2px aubergine, navigation auto.
SegmentedControl
N optionsSélecteur tab avec indicator cream animé sur fond boneDeep.
EmptyState
blob + icône + CTAÉtat vide signé : blob déco derrière + cercle icône fruit + texte + CTA optionnel.
MessageType
template à copierModèle de message à copier-coller pour contacter une prestataire. Fond boneDeep + dashed border.
AttachmentCard
file in chatFichier joint en chat. Couleur de l'icône inférée du type (PDF blush, XLSX olive, DOCX peach).
AttachmentPicker
3 sourcesSélecteur de pièce jointe — caméra, galerie, document.
ReplyPreview
chat replyAperçu du message auquel on répond. Accent 2px gauche aubergine, sender uppercase, X cancel.
SectionHead
section headerTitre de section gauche (Fraunces 13 bold) + meta droite (12 textMute).
04 Organisms
HeroBlock
accueil · état 4Bloc Hero accueil — blob déco + step badge + titre Fraunces -1.28 + corps + PillCta. Pas de card container, le contenu est sur le canvas.
Vos profils sont arrivés
Marine vous a sélectionné 5 candidates compatibles avec votre planning et votre budget.
MarineCard
conseillère shortcutBloc conseillère — avatar 52px aubergine, kicker uppercase, nom Fraunces, quote italic, bouton message rond.
ChatBubble · Thread
me / themBulles asymétriques — me aubergine/bone radius 22-22-6-22, them cream + border radius 22-22-22-6.
ChatInput
composerComposeur de message — bouton joindre + champ pill + bouton send aubergine.
TopBar
2 modesBarre haute. Mode dashboard : pill conseillère gauche + cloche droite. Mode page : back chevron + titre centré.
BottomNav
4 tabs · pill flottantePill cream flottante avec ombre bottomNav. Active = aubergine + label bone. Disabled grisé. Badge blush sur Messages.