WePlan
Créer un service de voyage collaboratif de A à Z
WePlan est un projet de design system réalisé dans le cadre d'un exercice de création d'un service numérique. L'équipe — Noa Barreau, Paul Barroux et Bruno Tanguy — a pris en charge l'intégralité de la démarche : du cadrage du besoin jusqu'à la livraison d'un prototype interactif et d'un système de design complet.
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.
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.
Trop d'outils dispersés
Les informations sont éparpillées entre de multiples applications sans cohérence.
Décisions difficiles à plusieurs
Concilier les avis de chacun sans outil dédié génère des conflits et de la confusion.
Oublis fréquents
Sans centralisation, les informations importantes se noient dans les fils de discussion.
Groupe WhatsApp désorganisé
Le canal de communication principal devient rapidement illisible et inefficace.
" WePlan centralise l'organisation d'un voyage en groupe, du planning aux décisions. "
Groupe d'amis
Besoins
- — Planifier rapidement un week-end
- — Prendre des décisions collectives facilement
- — Partager toutes les infos dans un seul endroit
- — S'inspirer
Frustrations
- — Discussions dispersées sur différentes applications
- — Difficulté à concilier les emplois du temps de chacun
- — Conflits ou confusions sur les décisions
Des couleurs rassurantes et conviviales
Couleurs primaires — #AD7100
Couleurs secondaires — #FFCA66 #EDEFF8
Typographies claire et moderne
Helvetica Neue
Elle transmet une impression de clarté, de fiabilité et de simplicité, tout en restant moderne et accessible à tous.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
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.
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é — lieux, transport, logement — est organisée jour par jour pour une visualisation claire du programme.
Parcours de création d'un voyage
Le prototype interactif Figma couvre l'intégralité du parcours utilisateur, de l'onboarding jusqu'à la gestion complète d'un voyage collaboratif.
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 et avec préfixe.
Organismes : Cards
Les cartes de voyage existent en trois formats — large hero, medium liste, 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, vue voyage — elles maintiennent le contexte tout en permettant des actions profondes.
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.