Back to portfolio

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.

N° 03 · 2024
ClientWepartum
RolePM + Designer
Duration14 months
StackFigma · React · Fraunces
Alan Fruits direction · Seven states · Constance's voice

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.

Aubergine · ink & CTA
Blush · empathy
Olive · validation
Peach · waiting
Lilac · discovery
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
Journey states
46
Screens derived
The brief

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.

01 · Audit

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.

02 · Mapping

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.

Employee parent
Qualifies · chooses · validates
HR employer
Funds · tracks usage · refills
Advisor
Listens · recommends · follows up
Childminder
Welcomes · cares · reassures
Pajemploi
Declares · pays · archives
01Qualification
02Meeting
03Documents
04Search
05Selection
06Paperwork
07Done
03 · Simulation engine

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.

Components played

Seven states, real screens, real data

Step · progress
Step 4 / 7 · Shortlist
Candidate profile
ML
Moufida L. Childminder · 7 min walk « Gentle and structured, she loves park outings. »
5,23 €/h Available Sept. 2026
♥ Favorite
Today's hero block
Today
Your profiles are in

Constance picked 4 candidates within your perimeter. You can meet 2 this week.

Financial simulation
~ 380 € per month · childminder
~ 290 € shared care
~ 520 € nanny
Tasks generated
Fill in tax situation in-app · auto
Call Moufida L. within 24-48h off-app · check back
Inform the candidate of the decision critical · confirm
Constance's voice
Your advisor Constance Dumont « I have 4 profiles for you, schedules that match. Want to meet 2 this week? »
Primary action
Conversation
Clara, I have 4 profiles for you. Moufida is 400 m away, 12 years of experience.
Great, can I meet her Thursday evening?
I'll ask her, I'll confirm within the hour.
Fig. 01 · Components played by the engine ⏷ Real components, real data, replayed for each state.
04 · Design

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.

05 · Results

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.

Annex · design system

Wepartum design system · Alan Fruits direction

Tokens, atoms, molecules, organisms — the visual grammar that drives the simulation engine and the production app.

01 Tokens Colors · type · 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 assembled blocks

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 · Next project

Ateliers Forma (FR)

2024–25 · Naming · Art direction · Designer · Dev Bordeaux architecture practice.
360° identity, print, Next.js 15 site.
Design system Wepartum · 4 categories