====== Dossier UX/UI complet ====== ===== Objectif ===== Ce document constitue la référence UX/UI du produit. Il permet : * La création des wireframes * La réalisation des maquettes Figma * La construction du Design System * Le prototypage complet * Les tests utilisateurs * La préparation du développement Frontend ---- ====== Principes UX ====== ===== Objectifs ===== * Simplicité * Rapidité * Lisibilité * Responsive * Accessibilité * Conversion maximale ---- ===== Utilisateurs ===== ^ Profil ^ Objectif principal ^ | Client | Rechercher et réserver | | Propriétaire | Consulter revenus et réservations | | Gestionnaire | Administrer les biens | | Commercial | Convertir les prospects | | Administrateur | Superviser l'activité | ---- ====== Architecture de l'information ====== Accueil ├── Recherche │ ├── Fiche Bien │ ├── Réservation │ ├── Paiement │ └── Confirmation Client ├── Dashboard ├── Profil ├── Réservations ├── Contrats └── Paiements Propriétaire ├── Dashboard ├── Biens ├── Revenus ├── Contrats └── Messages Back Office ├── Dashboard ├── Biens ├── Réservations ├── Clients ├── CRM ├── Paiements └── Administration ---- ====== Wireframes Front Office ====== ===== Écran FO-001 : Accueil ===== Objectif : Recherche rapide d'un bien. ---- ===== Structure ===== +--------------------------------------------------+ | LOGO CONNEXION INSCRIPTION | +--------------------------------------------------+ | | | HERO SEARCH ENGINE | | | | [Ville___________________] | | [Date arrivée___________] | | [Date départ____________] | | [Voyageurs______________] | | | | [ RECHERCHER ] | | | +--------------------------------------------------+ | Destinations populaires | +--------------------------------------------------+ | Cartes biens | +--------------------------------------------------+ | Témoignages | +--------------------------------------------------+ | Footer | +--------------------------------------------------+ ---- ===== Écran FO-002 : Recherche ===== Objectif : Filtrer et comparer. ---- ===== Structure ===== +---------------------------------------------------+ FILTRES [Ville] [Prix] [Capacité] [Equipements] ---------------------------------------------------- RÉSULTATS +------------+ +------------+ +------------+ | Photo | | Photo | | Photo | | Bien | | Bien | | Bien | | Prix | | Prix | | Prix | +------------+ +------------+ +------------+ ---------------------------------------------------- CARTE INTERACTIVE ---------------------------------------------------- ---- ===== Écran FO-003 : Fiche Bien ===== +----------------------------------------------------+ GALERIE PHOTOS ------------------------------------------------------ Titre Adresse Prix ------------------------------------------------------ Description ------------------------------------------------------ Equipements ------------------------------------------------------ Calendrier ------------------------------------------------------ Carte ------------------------------------------------------ [ RÉSERVER ] ------------------------------------------------------ ---- ===== Écran FO-004 : Tunnel Réservation ===== Étape 1 Choix des dates [Calendrier] [Continuer] ---- Étape 2 Informations locataire Nom Prénom Téléphone Email [Continuer] ---- Étape 3 Récapitulatif Montant Taxes Total [Payer] ---- Étape 4 Signature électronique [Signer] ---- Étape 5 Réservation confirmée Numéro réservation Télécharger contrat Télécharger facture ---- ====== Wireframes Client ====== ===== Écran CL-001 : Dashboard ===== +--------------------------------------------+ Bonjour John ------------------------------------------------ Réservations Contrats Paiements Messages ------------------------------------------------ Dernières activités ------------------------------------------------ ---- ===== Écran CL-002 : Réservations ===== +--------------------------------------------+ Mes réservations ------------------------------------------------ #12345 Bien Dates Statut ------------------------------------------------ ---- ====== Wireframes Propriétaire ====== ===== Écran OW-001 : Dashboard ===== +------------------------------------------------+ Revenus du mois ------------------------------------------------ Nombre de réservations ------------------------------------------------ Taux d'occupation ------------------------------------------------ Derniers paiements ------------------------------------------------+ ---- ===== Écran OW-002 : Mes Biens ===== +------------------------------------------------+ Bien 1 Bien 2 Bien 3 ------------------------------------------------+ ---- ===== Écran OW-003 : Revenus ===== +------------------------------------------------+ Graphique revenus ------------------------------------------------ Tableau revenus ------------------------------------------------ Export PDF Export Excel ------------------------------------------------+ ---- ====== Wireframes Back Office ====== ===== Écran BO-001 : Dashboard ===== +--------------------------------------------------+ KPI ---------------------------------------------------- CA Occupation Réservations Contrats ---------------------------------------------------- Graphiques ---------------------------------------------------- ---- ===== Écran BO-002 : Gestion Biens ===== +--------------------------------------------------+ [Créer un bien] ---------------------------------------------------- Tableau Référence Titre Statut Actions ---------------------------------------------------- ---- ===== Écran BO-003 : Fiche Bien ===== Informations générales Adresse Photos Disponibilités Tarifs Historique Documents ---- ===== Écran BO-004 : Réservations ===== Filtres ------------------------------------------------ Tableau réservations ------------------------------------------------ Actions : Confirmer Annuler Générer contrat ---- ===== Écran BO-005 : CRM ===== KANBAN Prospect ↓ Qualifié ↓ Visite ↓ Négociation ↓ Client ---- ====== Design System ====== ===== Couleurs ===== ==== Primaire ===== Primary-50 Primary-100 Primary-200 Primary-300 Primary-400 Primary-500 Primary-600 Primary-700 Primary-800 Primary-900 ---- ==== États ===== Success Warning Danger Info ---- ===== Typographie ===== Display H1 H2 H3 H4 Body Small Caption ---- ===== Espacements ===== 4 8 12 16 24 32 48 64 96 ---- ====== Bibliothèque de composants ====== ===== Atomes ===== Button Input Textarea Checkbox Radio Badge Avatar Icon ---- ===== Molécules ===== SearchBar PropertyCard ReservationCard InvoiceCard UserCard ---- ===== Organismes ===== Header Sidebar Footer PropertyGrid ReservationTable RevenueChart CRMKanban ---- ====== Design Tokens ====== ===== Border Radius ===== radius-sm radius-md radius-lg radius-xl ---- ===== Ombres ===== shadow-sm shadow-md shadow-lg shadow-xl ---- ====== Responsive ====== ===== Breakpoints ===== Mobile 0 - 767 Tablet 768 - 1279 Desktop 1280+ ---- ====== Prototype Figma ====== ===== Pages ===== 00 Foundations 01 Components 02 Front Office 03 Client Area 04 Owner Area 05 Back Office 06 Administration 07 Prototypes ---- ====== Parcours utilisateur ====== ===== Réservation ===== Accueil ↓ Recherche ↓ Fiche Bien ↓ Réservation ↓ Paiement ↓ Signature ↓ Confirmation ---- ===== Gestionnaire ===== Dashboard ↓ Biens ↓ Réservation ↓ Contrat ↓ Paiement ↓ Facture ---- ====== Tests UX ====== ===== Scénarios ===== * Recherche d'un bien * Création d'un compte * Réservation complète * Paiement * Signature contrat * Consultation revenus propriétaire * Création bien back-office ---- ====== Livrables Figma ====== * Wireframes basse fidélité * Maquettes haute fidélité * Bibliothèque de composants * Design Tokens * Prototype interactif * Documentation UX * Documentation UI ---- ====== Estimation ====== ^ Livrable ^ Charge ^ | Wireframes | 10 jours | | Design System | 5 jours | | Maquettes FO | 10 jours | | Maquettes Extranet | 5 jours | | Maquettes BO | 10 jours | | Prototype | 5 jours | Total : * 45 jours UX/UI ---- ====== Étape suivante ====== Le dossier de conception est désormais suffisamment complet pour lancer un développement. Les livrables restants à produire pour atteindre un niveau "industrialisation" sont : * Sprint 0 détaillé * Roadmap Scrum Sprint 1 → Sprint 20 * Convention de développement * Stratégie Git * Pipeline CI/CD * Stratégie de tests * Observabilité (Logs, Metrics, Traces) * Dossier d'exploitation * Dossier SaaS Multi-tenant * Plan de migration vers microservices Le prochain livrable recommandé est : **Dossier d'industrialisation (DevOps + CI/CD + GitFlow + Monitoring + Exploitation)** afin de rendre le projet immédiatement exécutable par une équipe de développement professionnelle.