Étude de cas · Voyage / Social · 2026
WePlan
Design system et application mobile pour organiser des voyages collaboratifs — de la recherche à la livraison des composants.
Product Design
Design System
Contexte
Créer un service de voyage collaboratif et son Design System
WePlan est un projet de design system réalisé dans le cadre d'un exercice de création d'un service numérique.
L'enjeu : concevoir une application mobile permettant à des groupes d'amis d'organiser leurs voyages ensemble, en centralisant planning, décisions et communication en un seul endroit.
Problématique
Comment organiser un voyage à plusieurs sans se perdre dans les outils ?
Organiser un voyage en groupe, c'est jongler entre WhatsApp, Google Docs, Airbnb, Tripadvisor… Des décisions qui se perdent, des oublis, et une frustration collective qui freine l'enthousiasme.
Problème 01
Trop d'outils dispersés
Les informations sont éparpillées entre de multiples applications sans cohérence.
Problème 02
Décisions difficiles à plusieurs
Concilier les avis de chacun sans outil dédié génère des conflits et de la confusion.
Problème 03
Oublis fréquents
Sans centralisation, les informations importantes se noient dans les fils de discussion.
Problème 04
Groupe WhatsApp désorganisé
Le canal de communication principal devient rapidement illisible et inefficace.
Pour qui
Groupe d'amis
Besoins
- Planifier rapidement un week-end ou des vacances
- Prendre des décisions collectives
- Partager toutes les infos dans un seul endroit
- S'inspirer et copier des voyages publics
Frustrations
- Discussions dispersées sur différentes applications
- Difficulté à concilier les emplois du temps de chacun
- Conflits ou confusions sur les décisions
Univers graphique
Des couleurs rassurantes et conviviales
Typographie
Elle transmet une impression de clarté, de fiabilité et de simplicité, tout en restant moderne et accessible à tous.
Choix de design
Des partis pris pour une expérience fluide en groupe
Bottom sheets
Les panneaux contextuels maintiennent l'utilisateur dans son flux sans rupture de navigation.
Voyages communautaires
Possibilité de récupérer les voyages ou activités de la communauté pour s'en inspirer.
Collaboration entre amis
Système d'invitation et de co-édition pensé pour la prise de décision collective.
Hiérarchisation de l'information
Structure visuelle claire pour que chaque membre du groupe trouve rapidement ce dont il a besoin.
Résultats de sondage
Visualisation en temps réel des votes pour faciliter la prise de décision collective.
Arrondis sur les éléments
Des formes douces qui renforcent la chaleur et la convivialité de l'application.
Fonctionnalités
S'inspirer de voyages existants pour construire le sien
La home centralise les suggestions de voyage de la communauté et les voyages à venir de l'utilisateur. Un feed d'inspiration directement intégré au flux de planification.
Une création de voyage fluide
En trois étapes guidées : informations du voyage, invitation des amis, visualisation du planning. L'utilisateur crée son voyage sans friction et embarque immédiatement son groupe.
Conçu pour permettre au groupe de décider ensemble
Les sondages sont intégrés directement dans le voyage. N'importe quel membre peut en créer un, les résultats sont visibles en temps réel et permettent de trancher collectivement.
Conçu pour structurer les activités en toute simplicité
L'ajout d'activités se fait via la base de données communautaire ou en mode personnalisé. Chaque activité est organisée jour par jour pour une visualisation plus claire.
Design System
Atoms : Typographie
Les tokens typographiques définissent l'ensemble des styles de texte, du titre en Bold 20 au corps Regular 14, pour une cohérence parfaite entre Figma et le code.
Tailles de police
Graisses
Molécules : Boutons
Une bibliothèque de boutons déclinés en trois tailles, quatre états (default, hover, pressed, disabled) et deux variantes d'icône : sans préfixe et avec préfixe.
Organismes : Cards
Les cartes de voyage existent en trois formats : large hero, medium liste et small thumbnail, chacune adaptée à son contexte d'affichage avec ses méta-données (date, participants, action principale).
Organismes : Bottom Sheet
Les bottom sheets constituent le pattern d'interaction central de WePlan. Déclinées en quatre variantes : détail activité, ajout activité, création sondage et vue voyage, elles maintiennent le contexte tout en permettant des actions profondes.
Apprentissages
Ce que ce projet m'a enseigné
Construire un design system de A à Z force à anticiper tous les états et toutes les variations avant de designer la moindre interface.
La méthodologie Atomic Design n'est pas seulement un outil de classification : c'est une façon de penser la composition qui change radicalement l'efficacité de l'équipe.
Les choix de design les plus impactants sont souvent les plus simples : une couleur primaire forte, un radius cohérent, et une typographie lisible suffisent à créer une identité reconnaissable.
Recherche UX
Product Design