Retour au portfolio

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.

N° 03 · 2024
ClientWepartum
RôlePM + Designer
Durée14 mois
StackFigma · React · Fraunces
Direction Alan Fruits · Sept états · Voix de Constance

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.

Aubergine · encre & CTA
Blush · empathie
Olive · validation
Peach · attente
Lilac · découverte
14:15
•••
C Constance
Bonjour Thomas

Votre simulation
est prête

Votre conseillère a calculé les coûts nets par mode de garde pour votre famille

Voir ma simulation
Simulation indicative
~380€Assistante mat.
~290€Garde partagée
~520€Auxiliaire
Ma check list
Activer le CESU préfinance
Renseigner le conjoint
Confirmer les préférences Hors app
Home
14:17
•••
Retour
Simulation

Simulation démo ·
Assistante mat.

Assistante maternelle
Données de démo : simulation illustrative.
380.00€ coût total
/ mois
840.67€ net après
impôt
-520.00€ CMG
Tranche 1
Résumé
Heures / semaine40.0h
Salaire horaire net4.85€
Salaire mensuel net840.67€
Aide CMG (Tranche 1)-520.00€
15:46
•••
C Constance

Vos candidates

3 profils · Sélection Constance
Tous AM Garde partagée Auxiliaire
SM
Sophie M. ♥ Coup de cœur
AM

« Sophie a une belle énergie et propose des activités créatives cha… »

4,90€/h 12 min à pied
NK
Nadia K. ♥ Coup de cœur
Auxiliaire

« Nadia est très professionnelle et s'adapte facilement au rythme des fa… »

11,50€/h 20 min transport
Comparer (3)
Explorer
2024
Client · Wepartum
14 m
PM + Designer
07
États de parcours
46
Écrans dérivés
Le brief

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.

01 · Audit

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.

02 · Cadrage

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.

Parent-salarié
Qualifie · choisit · valide
RH employeur
Finance · suit l'usage · recharge
Conseillère
Écoute · recommande · relance
Assistante maternelle
Accueille · garde · rassure
Pajemploi
Déclare · rémunère · archive
01Qualification
02RDV Constance
03Docs
04Recherche
05Sélection
06Démarches
07Terminé
03 · Moteur de simulation

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.

Composants joués

Sept états, vrais écrans, vraies données

Étape · progression
Étape 4 / 7 · Présélection
Profil candidate
ML
Moufida L. Assistante maternelle · 7 min à pied « Douce et structurée, elle adore les sorties au parc. »
5,23 €/h Dispo sept. 2026
♥ Coup de cœur
Annonce du moment
Aujourd'hui
Vos profils sont arrivés

Constance a sélectionné 4 candidates dans votre périmètre. Vous pouvez en voir 2 cette semaine.

Simulation financière
~ 380 € par mois · AM
~ 290 € garde partagée
~ 520 € auxiliaire
Tâches générées
Renseigner la situation fiscale in-app · auto
Appeler Moufida L. sous 24-48h hors-app · à cocher
Informer la prestataire de la décision critique · confirmer
Voix de Constance
Votre conseillère Constance Dumont « J'ai 4 profils pour toi, dispos qui matchent. On en voit 2 cette semaine ? »
Action principale
Conversation
Clara, j'ai 4 profils pour toi. Moufida est à 400 m, 12 ans d'expérience.
Top, je peux la voir jeudi soir ?
Je lui propose, je te confirme dans l'heure.
Fig. 01 · Composants joués par le moteur ⏷ Vrais composants, vraies données, rejoués pour chaque état.
04 · Design

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.

05 · Résultats

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.

Annexe · design system

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 Couleurs · typo · spacing · radii · shadows

Palette signature

aubergine — encre signature#4F1C5C
aubergineInk#2D0E35
bone — canvas#F7F3EF
boneDeep#F0E6E0
cream — surfaces#FFFFFF

Fruits — états du parcours

blush — coup de cœur#FFD4D1 · ink #7A1E2F
olive — validation#BAC66D · ink #2C3715
peach — admin & attente#FFB366 · ink #4A2A08
lilac — onboarding#D4B8E0 · ink #4F1C5C

Texte & lignes

text#1A0F20
textSoft#5C4A62
textMute#7A5585
line / lineStrongrgba(79,28,92, .08–.12)

Typographie

Fraunces (serif) pour les displays · Inter / système pour le texte courant. Letter-spacing très négatif sur les displays — signature DA.

displayXl42 / 44 · -1.89
Félicitations
display34 / 38 · -1.5
Vos profils sont arrivés
h132 / 36 · -1.28
Démarches administratives
h222 / 26 · -0.66
Votre simulation est prête
h317 / 24 · -0.34
Moufida L. — Assistante maternelle
sectionHead13 / 16 · -0.2
À FAIRE CETTE SEMAINE
quote16 / 24 · italic
« Une nounou douce, structurée, qui adore les sorties au parc. »
body15 / 23
Préparez votre RDV Découverte avec Marine en complétant les pièces demandées avant jeudi.
bodyStrong15 / 22 · 600
Compléter mon profil famille
caption13 / 18
Tarifs précis communiqués par les prestataires.
meta12 / 16 · 500
Hier, 14:32
label11 / 16 · uppercase
ÉTAPE 3 / 7 · DOCUMENTS
statValue24 / 28 · tabular
~ 380 €

Spacing — grille 4px

Rythme strict basé sur 4. Plus généreux que la v1 — l'air est un composant.

xs
4 px
sm
8 px
md
12 px
lg
16 px
xl
20 px
2xl
24 px
3xl
32 px
4xl
40 px
5xl
48 px
6xl
64 px

Radii

Direction D : radii généreux. Cards 18, CTA 16, bulles chat 22 (avec coin parlant 6 asymétrique).

4
xs
8
sm
12
md
16
cta
18
card
20
lg
22
xl · bubble
24
2xl
full
pills · avatars

Shadows — aubergine-tinted

Jamais de noir. Toutes les ombres sont teintées aubergine pour cohabiter avec le canvas warm bone.

card

0 2 8 · .06
Card élevée

cta

0 6 20 · .08

bottomNav

0 8 24 · .08
Accueil
Explorer
Messages
Famille
02 Atoms 12 primitives

TextV2

primitive

Wrapper texte avec variantes typographiques + couleurs fruits. Toute la typo passe par lui.

aubergine · h2
text · body — corps de texte standard
blushInk · caption
label · uppercase tracking 0.6

Avatar

5 sizes · 5 badges

Initiales en Fraunces sur fond fruit. Badges online (olive), heart (blush), star (peach), ring (bone).

ML
JS
CD
AM
RA
ML
CD
JS

Icon

lucide · 4 sizes

Wrapper Lucide. Stroke 1.8, couleur aubergine par défaut.

sm 16 · md 20 · lg 24 · xl 32

StepBadge

aubergine 8%

Pill aubergine très légère pour signaler l'étape courante du parcours dans le Hero.

Étape 1 / 7 · Découverte Étape 3 / 7 · Documents Étape 4 / 7 · Présélection

StatPill

2 sizes · fruits

Métrique Fraunces tabular sur fond fruit. Utilisé pour la simu financière, les stats famille.

~ 380 €
PAR MOIS · AM
~ 290 €
GARDE PARTAGÉE
~ 520 €
AUXILIAIRE

Progress

7 pips

7 pillules d'étape. Done = aubergine, current = blush + dot, upcoming = boneDeep.

Étape 3 / 7 · Documents en cours
Étape 7 / 7 · Récapitulatif

ProgressRing

SVG animé

Anneau SVG avec stroke aubergine. Track boneDeep, label centré.

30%
75%
100%

StatusChip

8 statuts

Pill statut candidat. Couleur fruit signe l'état (nouveau, vu, coup de cœur, urgent…).

Nouveau Vu ♥ Coup de cœur Urgent
Contactée Proposée Acceptée Refusée

FilterChip

toggle

Bouton filtre togglable. Selected = aubergine + scale 1.05 (spring).

Tous Assistante mat. Garde partagée Auxiliaire

PillCta

signature D

CTA principal Direction D — pill avec cercle ink inversé à droite. 2 sizes × tous les fruits.

Skeleton

loading

Placeholder boneDeep avec shimmer fade opacity. Aucune ombre, juste de la respiration.

Blob

ornement SVG

Forme organique signature. 3 paths × tous les fruits. Opacity 0.65 par défaut.

03 Molecules 13 compositions

Card

3 variants

Conteneur générique. elevated (cream + shadow), outlined (border 1px), flat (boneDeep).

Elevated · cream + shadow aubergine
Outlined · cream + border 1px line
Flat · boneDeep, no shadow no border

TaskItem

3 types · done/undone

Tâche avec checkbox animée + type (in-app olive · hors-app peach · critical blush) + chevron optionnel.

Renseigner la situation fiscale
● IN-APP · auto
Appeler Moufida L. sous 24-48h
● HORS-APP · à cocher· Reçu hier
Uploader l'avis d'imposition N-2
● IN-APP · auto
Informer la prestataire de la décision
● CRITIQUE · confirmer

ProfileCard

candidate

Carte profil prestataire. Initiales sur fond fruit, nom Fraunces, quote conseillère, pills info, status overlay.

ML
Moufida L.
Assistante maternelle · 7 min à pied
« Douce et structurée, elle adore les sorties au parc. »
5,23 €/h Dispo sept. 2026
♥ Coup de cœur
JD
Julie D.
Garde partagée · 12 min
« Profil idéal pour une co-famille avec deux enfants en bas âge. »
9,77 €/h Dispo immédiate
Urgent

RowInput

form row

Champ formulaire en ligne. Label gauche aubergine, valeur droite textSoft, validation cercle aubergine.

Prénom
Email
Revenus N-2
€/mois

RowLink · Date · Time

tappable

Rangée tappable avec valeur formatée à droite + chevron. Date et Time = wrappers Intl.

OtpInput

6 boxes

Code OTP 6 chiffres avec boxes séparés, focus border 2px aubergine, navigation auto.

4
2
8
1

SegmentedControl

N options

Sélecteur tab avec indicator cream animé sur fond boneDeep.

Profil
Conditions
Prochaines étapes
Toutes
À faire
Terminées

EmptyState

blob + icône + CTA

État vide signé : blob déco derrière + cercle icône fruit + texte + CTA optionnel.

Vos profils arrivent bientôt
Nous activons l'Explorer après votre RDV Financier avec Marine.

MessageType

template à copier

Modèle de message à copier-coller pour contacter une prestataire. Fond boneDeep + dashed border.

MESSAGE TYPE · ASSISTANTE MATERNELLE
Copier
« Bonjour Madame, nous avons eu votre contact par Marine de Wepartum, concernant une place disponible pour septembre 2026. Pouvons-nous convenir d'un premier appel ? Merci pour votre retour. »

AttachmentCard

file in chat

Fichier joint en chat. Couleur de l'icône inférée du type (PDF blush, XLSX olive, DOCX peach).

PDF
Avis-imposition-2024.pdf
328 Ko · partagé par Marine
XLS
Simulation-financiere-mars.xlsx
42 Ko · partagé par Marine
DOC
Contrat-engagement.docx
156 Ko · à signer

AttachmentPicker

3 sources

Sélecteur de pièce jointe — caméra, galerie, document.

Caméra
Galerie
Document

ReplyPreview

chat reply

Aperçu du message auquel on répond. Accent 2px gauche aubergine, sender uppercase, X cancel.

MARINE · CONSEILLÈRE
N'oubliez pas l'avis d'imposition avant jeudi…

SectionHead

section header

Titre de section gauche (Fraunces 13 bold) + meta droite (12 textMute).

À FAIRE CETTE SEMAINE
3 tâches
VOS DOCUMENTS
Voir tout
CANDIDATES PROPOSÉES
5 profils
04 Organisms 6 blocs assemblés

HeroBlock

accueil · état 4

Bloc Hero accueil — blob déco + step badge + titre Fraunces -1.28 + corps + PillCta. Pas de card container, le contenu est sur le canvas.

Étape 4 / 7 · Présélection

Vos profils sont arrivés

Marine vous a sélectionné 5 candidates compatibles avec votre planning et votre budget.

MarineCard

conseillère shortcut

Bloc conseillère — avatar 52px aubergine, kicker uppercase, nom Fraunces, quote italic, bouton message rond.

RA
VOTRE CONSEILLÈRE
Marine, en ligne
« Disponible pour répondre à vos questions sur les profils. »

ChatBubble · Thread

me / them

Bulles asymétriques — me aubergine/bone radius 22-22-6-22, them cream + border radius 22-22-22-6.

RA
Bonjour Thomas, j'ai bien reçu votre avis d'imposition. On peut planifier le RDV Financier ?
Marine · 14:32
Avec plaisir, jeudi 14h ça vous convient ?
14:36 · ✓✓
RA
Parfait, je vous envoie l'invitation visio dans la foulée 🌿
Marine · 14:38

ChatInput

composer

Composeur de message — bouton joindre + champ pill + bouton send aubergine.

Écrire un message…

TopBar

2 modes

Barre haute. Mode dashboard : pill conseillère gauche + cloche droite. Mode page : back chevron + titre centré.

RA
Marine · RA
Profil de Moufida L.

BottomNav

4 tabs · pill flottante

Pill cream flottante avec ombre bottomNav. Active = aubergine + label bone. Disabled grisé. Badge blush sur Messages.

Accueil
Explorer
Messages
Famille
N° 04 · Projet suivant

Ateliers Forma

2024–25 · Naming · DA · Designer · Dev Agence archi/MOE Bordeaux.
Identité 360°, print, site Next.js 15.
Design system Wepartum · 4 catégories