From graphic redesign
to journey
redesign.
Product redesign for Wepartum, a B2B2C parental support app. The mission starts as a graphic redesign. The audit reveals a structural problem, not a UI one. The scope expands, seven journey states are identified, a simulation engine is built to validate them, and Wepartum reuses the architecture to refactor its production workflow.
Replace cold B2B conventions with a continuous human presence.
Aubergine dominant, organic blobs, Fraunces typography, and a fruit vocabulary (blush, olive, peach, lilac) that structures the moments of the journey. One shade per relational intent.
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… »
Move away from the corporate UI of HR-health apps.
Wepartum helps employee-parents find childcare for their children, with co-financing from their employer. The existing app had an insurance or HR aesthetic, a giant cold form, administrative vocabulary.
Initial brief : graphic redesign. Soften, humanize, get out of the corporate register. Art direction was clear, in line with Alan Fruits, healthcare as hospitality. Live colors, Fraunces typeface, organic shapes, blobs, a warm editorial voice.
I accepted the brief as it was and started with an audit. That audit reshaped the mission.
The cold UI was a symptom.
During the audit, the picture sharpened. The screens were indeed cold and corporate, but that was not the root cause. The real issue was the structure of the journeys.
The app was designed like a back-office. It stacked screens without following the actual journey of a parent inside Wepartum. Vital information for each step was not surfaced, the user had to figure out where they stood at every login, friction kept building up.
Repainting the UI would have treated the surface, not the cause. I raised the finding with the Wepartum team. We agreed to expand the scope, from graphic redesign to product redesign.
Seven states, one product flow.
Full mapping of Wepartum's business before any mockup. Five roles to serve : employee parent, HR employer, advisor, childminder, Pajemploi. Seven journey states, in the order the parent lives them : qualification, meeting with Constance, documents, search, selection, paperwork, done.
Core idea : the app should be a journey companion, not a back-office. At each state, it surfaces the vital information for that exact step, nothing more. The parent does not search, they move forward. Friction drops, conversion speeds up.
It is a faithful transcription of Wepartum's craft into the product. The seven states are not invented screens, they are the real stages that Constance and her team handle every day.
A simulation engine to validate every state.
Before any production development, I built a simulation engine. A high-fidelity interactive prototype, coded with Claude Code, powered by mock data. It plays back the seven states, their transitions, their edge cases.
Concretely, the Wepartum team could click through the demo and test, for instance, what a parent sees when returning after their meeting with Constance, or how the app reacts when documents are still incomplete. Every scenario replayable, every state controllable.
The engine served to arbitrate in meetings on concrete material, not wireframes. And more importantly, Wepartum reused that structure to refactor its production workflow. The prototype did not stay a validation deliverable, it became an architecture blueprint.
46 screens derived, all from the same source of truth. Zero conditional logic in the rendering, the journey drives the interface.
Seven states, real screens, real data
Your profiles are in
Constance picked 4 candidates within your perimeter. You can meet 2 this week.
Tell the parent where they stand, what to do next, and do as much of it for them as possible.
At each state of the journey, the app answers three questions the parent is asking : where I am, what's coming, and what has already been done for me.
The home screen surfaces the vital information of the moment first. A simulation ready to review, an appointment to confirm, a candidate to meet. Everything else recedes. The parent doesn't dig through a menu, the app pushes the useful action.
Administrative work is pre-chewed wherever possible. Costs per childcare type are calculated in advance. CESU pre-financing activates with one tap. Candidate profiles arrive pre-filtered and sorted by Constance, with her notes, and a favorite tag when she has one.
The design system exists to serve this mechanic. Five semantic colors (aubergine for CTAs, blush for empathy, olive for validation, peach for waiting, lilac for discovery) that give a status at a glance. An editorial voice, Constance's, that speaks short and direct, with no HR jargon. A Fraunces typeface to soften the register.
But color was never the point. The point is that at 2:17 PM between two meetings, the parent opens the app and knows in two seconds what to do.
A companion app, not a file to validate.
V2 delivered. A B2B2C app that follows the parent through every step, seven states mapped, 46 screens derived, an aubergine and fruit-named design system, an editorial voice carried by Constance.
The simulation engine allowed each journey to be validated on concrete material before production, and served as an architecture blueprint for the refactor of Wepartum's technical workflow.
Where the V1 just validated an administrative file, the V2 supports a parent through a decision that matters.
Wepartum design system · Alan Fruits direction
Tokens, atoms, molecules, organisms — the visual grammar that drives the simulation engine and the production app.
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.