Featzy

Featzy est une application pour simplifier l’organisation des sorties au restaurant : réservation en groupe, partage des paiements et précommande collaborative.

Projet école : Lyon - 2025 / 2026

Processus

Outils

Durée

Rôle

Analyse de la demande

Contexte du projet

Projet Bachelor Design Graphique réalisé en équipe de six, avec des pôles design, marketing et développement. L’objectif : concevoir une application web complète de A à Z, du concept au prototype livré aux devs.

Problème initial / besoin

Organiser un repas à plusieurs c’est rarement simple de trouver un resto qui convient à tout le monde, réserver pour un grand groupe, et gérer l’addition à la fin. Featzy résout ces trois problèmes dans une seule interface, accessible sur mobile et desktop.

Enjeux du projet

Concevoir une expérience fluide pour la réservation en groupe
Intégrer le partage d’addition directement dans le parcours utilisateur
Maintenir une cohérence design/dev sur l’ensemble des supports (mobile, desktop, plateforme restaurateur)

Public-cible

Jeunes actifs et professionnels (25-45 ans) qui sortent régulièrement au resto entre amis ou collègues. Et côté pro : les petits restaurateurs qui veulent digitaliser leurs réservations.

Objectifs visés

Proposer un parcours de réservation pensé pour les groupes
Rendre le partage d’addition natif dans l’expérience
Livrer un design system cohérent et prêt à intégrer

Conception

Intention créative

L’identité visuelle avait déjà été définie par Prudence, mon travail était de la faire vivre dans l’interface. Prendre ses choix de couleurs, de typos et d’univers graphique, et les transformer en un UI concret, cohérent et utilisable sur tous les supports.

Fil rouge du projet

Le partage est au cœur de tout. Chaque décision UX a été pensée pour que l’expérience collective soit fluide, pas frustrante.

Choix graphiques

Base : identité visuelle définie par Prudence (DA) : couleurs, typographies, univers graphique
Mon rôle : transposition de cette DA en variables UI via TweakCN (couleurs, tokens, thème), puis intégration dans Figma pour les maquettes
Composants adaptés : boutons, filtres, cartes restaurant, barre de recherche, tous calés sur le design system généré
Références visuelles : reprises de la charte graphique Featzy pour garder une cohérence entre l’identité de marque et l’interface

Réalisation

Étapes de création

1. Recherche utilisateurs : questionnaires Google Forms (habitudes de réservation, comportements en groupe, usages concurrents, attentes paiement partagé) + questionnaire dédié aux restaurateurs + A/B testing sur les interfaces

2. Benchmark UX : analyse de TheFork, ZenChef, OpenTable, Tripadvisor, identification des friction points et opportunités

3. Personas & User Journey : 3 personas construits à partir des résultats + User Journey Maps pour les parcours clés puis User Flows conçus en réponse directe à ces journeys (réservation groupe, création de compte, gestion des réservations, suppression de compte et d’autres)

4. Wireframes : basse fidélité sur Figma pour toutes les pages (mobile + desktop)

5. Design system : configuration du thème via TweakCN (couleurs, variables, tokens), export pour le dev, composants reproduits dans Figma à partir de la documentation ShadCN

7. Maquettes haute fidélité : tous les écrans : app mobile utilisateur, version desktop, plateforme restaurateur

7. Handoff : export thème TweakCN + assets PNG/SVG + inspecteur Figma pour l’équipe dev

8. Prototype interactif : parcours simulés complet dans Figma (Mobile + Desktop + Plateforme)

8. Évolution UI suite questionnaire A/B Testing

Outils utilisés

Figma

Wireframes, maquettes, design system, prototype interactif, collaboration et handoff dev

FigJam

Ateliers de réflexion UX, arborescence, organisation des parcours

TweakCN

Configuration du thème de couleurs (variables, tokens) aux couleurs Featzy, exporté à Jessica pour intégration dev et réutilisé dans Figma pour les composants

ShadCN

Documentation consultée pour reproduire et structurer les composants UI directement dans Figma, en cohérence avec ce que les devs allaient intégrer côté code

Google Forms

Questionnaires utilisateurs et restaurateurs pour orienter les choix UX/UI

Contraintes respectées

Projet en équipe avec rôles définis (design, marketing, dev)
App pensée pour mobile et desktop (responsive, grille 375px à 1440px)
Cohérence à maintenir entre design et dev tout au long du projet
Contrastes couleurs vérifiés (ratio WCAG AA)

Livraison

Contraintes respectées

Prototype Figma haute fidélité (mobile, desktop, plateforme restaurateur)
Design system complet : composants, variables, thème TweakCN exporté
Assets PNG/SVG + exports maquettes haute résolution
PDF charte graphique
Handoff dev via inspecteur Figma

Résolution des problèmes initiaux

Le parcours de réservation est pensé de bout en bout pour les groupes
Le partage d’addition est intégré nativement dans le flow, pas en option
La méthode TweakCN → export → ShadCN → Figma a permis une vraie cohérence entre maquette et code, sans friction entre design et dev