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.
DESIGN SYSTEM
SYSTEME GRID - UI KIT - VARIABLES & TOKENS - COMPOSANTS
Le besoin
Il s’agit d’un dashboard métier conçu pour des agents de voyage, pensé pour structurer et rendre lisibles des flux de données complexes.
Le projet repose sur un design system scalable, construit selon une approche d’atomic design. Les styles et composants sont centralisés via des primitives et des design tokens dans Figma, garantissant cohérence, évolutivité et facilité de maintenance.
(01)
Typographie
Un système typographique clair, basé sur des design tokens, permet d’assurer une hiérarchie lisible et une utilisation cohérente des titres et des textes dans toute l’interface.
BC NOVATICA
Fonderie
Adobe font
Usage
H1
H2
H3
H4
body
Graisse
bold
semi-bold
medium
regular
italic
H1
Weight : Medium ; Size : 40 ; Line height : 48 ; Letter ; vertical trime : font size
H2
Weight : Medium ; Size : 32 ; Line height : 38.4 ; Letter ; vertical trime : font size
H3
Weight : Medium; Size : 24 ; Line height : 28.8 ; Letter ; vertical trime : font size
H4
Weight : Regular ; Size : 20 ; Line height : 24 ; Letter ; vertical trime : font size
Body light
Size : 16 vertical trime : font size
Body regular
Size : 16 vertical trime : font size
Body medium
Size : 16 vertical trime : font size
Body semi-bold
Size : 16 vertical trime : font size
Body regular
Size : 16 vertical trime : font size
Body regular italic
Size : 16 vertical trime : font size
Body light italic
Size : 16 vertical trime : font size
Atomic design
Le design system est structuré autour de primitives et de design tokens. Les primitives définissent les fondations du système (couleurs, typographies, espacements, tailles), tandis que les tokens les traduisent en valeurs sémantiques utilisées exclusivement dans les composants, selon une logique d’atomic design.
(02)
Espacement
Le design system est structuré autour de primitives et de design tokens. Les primitives définissent les fondations du système (couleurs, typographies, espacements, tailles), tandis que les tokens les traduisent en valeurs sémantiques utilisées exclusivement dans les composants, selon une logique d’atomic design.
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
(03)
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
(04)
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 pink - 200
#FFFFE9
Brandcolor pink - 400
#FEFE87
Brandcolor pink - 600
#FCFC04
Brandcolor pink - 800
#646403
Brandcolor blue - 200
#FFFFE9
Brandcolor blue- 400
#FEFE87
Brandcolor blue - 600
#FCFC04
Brandcolor blue - 800
#646403
Couleurs tokens
Texte
color-txt-primary
color-txt-secondary
color-txt-tertiary
color-txt-quaternary
color-txt-desable
color-txt-feedback- warning
color-txt-feedback-sucess
color-txt-feedback-info
color-txt-feedback-error
color-txt-desable
color-txt-tag-txt1
color-txt-tag-txt2
color-txt-tag-txt3
color-txt-feedback-error
color-txt-desable
Outline
color-outline-primary
color-outline-secondary
color-outline-tertiary
color-outline-desable
outline-desable
color-outline- warning
color-outline-sucess
color-outline-info
color-outline-error
color-txt-desable
color-outline-button-default
color-outline-button-desable
color-outline-button-secondary-hover
color-outline-button-secondary-actif
color-txt-desable
(05)
Icones
(06)
Grilles
J’ai ainsi développé TravelPartner dans une logique Desktop-first, en ciblant une résolution minimale de 1200 pixels de large. Ce choix s’appuie sur les usages concrets observés en agence, où les professionnels naviguent au quotidien sur des écrans de taille moyenne à grande. Il m’a donc semblé inutile de prévoir une version tablette ou mobile.
Mes objectifs ergonomiques : offrir un confort de lecture optimal et une navigation fluide, en particulier sur les interfaces à forte densité d’information. Concevoir une interface capable de gérer simultanément plusieurs blocs fonctionnels (devis, carnets de voyage, fiches clients), sans surcharge ni perte de lisibilité. Garantir une disposition claire et hiérarchisée des contenus, adaptée aux écrans larges, pour maximiser l’efficacité des agents dans leur environnement de travail.
8 colonnes / 64 pixels de marge / 32 pixels de gouttières.
(07)
Masters composants
Les master components servent de fondation au design system : ils centralisent la structure et les règles des composants. Les composants déployés dans les interfaces sont des instances liées à ces masters, permettant de propager les mises à jour sans rupture et d’assurer une cohérence globale du produit.
Boutons
primary
secondary
default
TEXTE DU BOUTON
TEXTE DU BOUTON
hover
TEXTE DU BOUTON
TEXTE DU BOUTON
pressed
TEXTE DU BOUTON
TEXTE DU BOUTON
desable
TEXTE DU BOUTON
TEXTE DU BOUTON
Zone de texte
Input / text field
default
Titre du champs
de
00h
à
00h
Réponse du champs
hover
Titre du champs
de
00h
à
00h
Réponse du champs
pressed
Titre du champs
de
00h
à
00h
/
desable
Titre du champs
de
00h
à
00h
Réponse du champs
Input / text area
desable
Titre du champs
de
00h
à
00h
Réponse du champs
default
Titre du champs
de
00h
à
00h
Réponse du champs
hover
Titre du champs
de
00h
à
00h
Réponse du champs
pressed
Titre du champs
de
00h
à
00h
/
Calendrier
Chevron
S-default
S-hover
S-pressed
S-desable
M-default
M-hover
M-pressed
M-desable
Date picker
S-default
1
S-hover
1
S-pressed
1
S-desable
1
M-default
1
M-hover
1
M-pressed
1
M-desable
1
Year dropdown
default
2025
hover
2025
actif
2025
S-desable
2025
Calendar
S
Janvier
2025
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
M
Janvier
2025
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
Tag
Date
Destination
Numéro de
production
S
Label 1
Label 2
Label 1
Label 2
Label 1
Label 2
M
Label 1
Label 2
Label 1
Label 2
Label 1
Label 2
Messages
information
Label droite
error
Label droite
warning
Label droite
success
Label droite
Cards
primary
Transport
Document
secondary
Maquettes & prototypes
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
vignes studio graphique
vignes studio graphique
vignes studio graphique
vignes studio graphique
vignes studio graphique
Ensemble, transformons vos idées en projets cohérents, utiles aux utilisateurs et alignés avec vos enjeux.
Tous droits réservés à Vignes Studio Graphique, 2026
Developpé par Vignes Studio Graphique