Le projet
Travel Partner est un logiciel (prototype) à destination des agents de voyage. Il permet de centraliser les documents clients et de créer des carnets de voyage digitaux, pensés pour les voyageurs finaux.
Le produit s’inscrit dans une logique B2B to B2C, comme un outil au service des équipes autant que de l’expérience client.
Ce projet est né d’un constat terrain, réalisé lors de mon alternance en agence de voyage. J’ai observé que de nombreux agents rencontrent des difficultés avec les outils digitaux et s’appuient encore sur des documents standards (Word, PDF), alors même que les clients attendent aujourd’hui des offres personnalisées et réellement sur-mesure.
Un second enjeu s’est rapidement imposé : l’impact environnemental. Les carnets de voyage sont encore très souvent imprimés puis envoyés par voie postale, malgré l’évolution des usages numériques.
Le besoin
Typographie
regular
italic
H1
Weight : Medium ; Size : 40 ; Line height : 48 ; Letter ; vertical trim : font size
H2
Weight : Medium ; Size : 32 ; Line height : 38.4 ; Letter ; vertical trim : font size
H3
Weight : Medium; Size : 24 ; Line height : 28.8 ; Letter ; vertical trim : font size
H4
Weight : Regular ; Size : 20 ; Line height : 24 ; Letter ; vertical trim : font size
Body light
Size : 16 vertical trim : font size
Body regular
Size : 16 vertical trim : font size
Body medium
Size : 16 vertical trim : font size
Body semi-bold
Size : 16 vertical trim : font size
Body regular
Size : 16 vertical trim : font size
Body regular italic
Size : 16 vertical trim : font size
Body light italic
Size : 16 vertical trim : font size
Atomic design
Espacement
Tokens : espacement XXS
Primitives : T1
4 px
0.25 rem
Tokens : espacement XS
Primitives : T2
8 px
0.5 rem
Tokens : espacement S
Primitives : T3
12 px
0.75 rem
Tokens : espacement M
Primitives : T4
16 px
1 rem
Tokens : espacement L
Primitives : T5
20 px
1.25 rem
Tokens : espacement XL
Primitives : T6
24 px
1.5 rem
Corner radius
Tokens : radius XS
Primitives : T1
4 px
0.25 rem
Tokens : radius S
Primitives : T2
8 px
0.5 rem
Tokens : radius M
Primitives : T4
16 px
1 rem
Tokens : radius L
Primitives : T5
20 px
1.25 rem
Couleurs
Couleurs primitives
Grey 200
#EDEEF1
Grey 400
#B7B8BA
Grey 600
#808184
Grey 600
#808184
Feedback red - 200
#FFF9F9
Feedback red - 400
#E04848
Feedback red - 600
#831212
Feedback red - 600
#831212
Feedback orange - 200
#FFFDF6
Feedback orange - 400
#FF8D1F
Feedback orange - 600
#B23808
Feedback orange - 600
#B23808
Feedback green - 200
#F5F8F1
Feedback green - 400
#84CC16
Feedback green - 600
#3F6212
Feedback green - 600
#3F6212
Feedback blue - 200
#FCFEFF
Feedback blue - 400
#0EA5E9
Feedback blue - 600
#0369A1
Feedback blue - 600
#0369A1
Brandcolor white - 200
#FEFEFF
Brandcolor white - 400
#FBFCFF
Brandcolor white - 600
#EDEEF1
Brandcolor white - 600
#EDEEF1
Brandcolor pink - 200
#FFCBEA
Brandcolor pink - 400
#F180BF
Brandcolor pink - 600
#BF0E63
Brandcolor pink - 800
#5D0316
Brandcolor yellow - 200
#FFFFE9
Brandcolor yellow - 400
#FEFE87
Brandcolor yellow - 600
#FCFC04
Brandcolor yellow - 800
#646403
Brandcolor blue - 200
#FFFFE9
Brandcolor blue- 400
#FEFE87
Brandcolor blue - 600
#FCFC04
Brandcolor blue - 800
#646403
Couleurs tokens
Texte
color-txt-secondary
color-txt-quaternary
color-txt-feedback- warning
color-txt-feedback-success
color-txt-feedback-info
color-txt-feedback-error
color-txt-tag-txt2
color-txt-tag-txt3
color-txt-desable
Outline
color-outline-primary
color-outline-secondary
color-outline-tertiary
color-outline-disabled
color-outline- warning
color-outline-success
color-outline-info
color-outline-error
color-outline-button-default
color-outline-button-disabled
color-outline-button-secondary-actif
Icônes
Grilles
8 colonnes / 64 pixels de marge / 32 pixels de gouttières.
Boutons
default
hover
pressed
desable
Zone de texte
default
Titre du champ
de
00h
à
00h
Réponse du champs
hover
pressed
disabled
disabled
default
hover
pressed
Tag
S
M
Messages
information
error
warning
success
Cards
Transport
Document
Les maquettes ont été construites à partir de la librairie de composants du design system, garantissant cohérence et rapidité d’itération. Trois hypothèses issues de la phase de recherche ont ensuite été explorées à travers la conception de trois prototypes distincts, afin de comparer différentes pistes de réponse aux besoins identifiés.
Maquettes
Prototypes
(08)
Résultats & impact
Compétences clés
Ce projet démontre ma capacité à concevoir une architecture de design scalable et maintenable, capable de supporter l'évolution d'un produit SaaS complexe.
design system
prototype & test
atomic design
figma library & components
B2B product design
user research & discovery
UX pour interfaces complexes
Résultats techniques :
Design system complet avec 20+ composants master.
Documentation précise des tokens et primitives.
3 prototypes testés based on user research.
Architecture permettant la scalabilité (agents ≠ voyageurs finaux).
Valeur commerciale :
Réduit le temps de conception des nouvelles features.
Garantit la cohérence de l'interface (multi-équipes).
Facilite la maintenance et l'évolution du produit.
Support both B2B (agents) et B2C (travelers).
Apprentissage :
Ce projet a renforcé ma compréhension de la conception d'interfaces complexes et de la nécessité de systems thinking dans la conception de produits scalables.