Ce document constitue la référence UX/UI du produit.
Il permet :
| 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é |
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
Objectif :
Recherche rapide d'un bien.
+--------------------------------------------------+ | LOGO CONNEXION INSCRIPTION | +--------------------------------------------------+ | | | HERO SEARCH ENGINE | | | | [Ville___________________] | | [Date arrivée___________] | | [Date départ____________] | | [Voyageurs______________] | | | | [ RECHERCHER ] | | | +--------------------------------------------------+ | Destinations populaires | +--------------------------------------------------+ | Cartes biens | +--------------------------------------------------+ | Témoignages | +--------------------------------------------------+ | Footer | +--------------------------------------------------+
Objectif :
Filtrer et comparer.
+---------------------------------------------------+ FILTRES [Ville] [Prix] [Capacité] [Equipements] ---------------------------------------------------- RÉSULTATS +------------+ +------------+ +------------+ | Photo | | Photo | | Photo | | Bien | | Bien | | Bien | | Prix | | Prix | | Prix | +------------+ +------------+ +------------+ ---------------------------------------------------- CARTE INTERACTIVE ----------------------------------------------------
+----------------------------------------------------+ GALERIE PHOTOS ------------------------------------------------------ Titre Adresse Prix ------------------------------------------------------ Description ------------------------------------------------------ Equipements ------------------------------------------------------ Calendrier ------------------------------------------------------ Carte ------------------------------------------------------ [ RÉSERVER ] ------------------------------------------------------
É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
+--------------------------------------------+ Bonjour John ------------------------------------------------ Réservations Contrats Paiements Messages ------------------------------------------------ Dernières activités ------------------------------------------------
+--------------------------------------------+ Mes réservations ------------------------------------------------ #12345 Bien Dates Statut ------------------------------------------------
+------------------------------------------------+ Revenus du mois ------------------------------------------------ Nombre de réservations ------------------------------------------------ Taux d'occupation ------------------------------------------------ Derniers paiements ------------------------------------------------+
+------------------------------------------------+ Bien 1 Bien 2 Bien 3 ------------------------------------------------+
+------------------------------------------------+ Graphique revenus ------------------------------------------------ Tableau revenus ------------------------------------------------ Export PDF Export Excel ------------------------------------------------+
+--------------------------------------------------+ KPI ---------------------------------------------------- CA Occupation Réservations Contrats ---------------------------------------------------- Graphiques ----------------------------------------------------
+--------------------------------------------------+ [Créer un bien] ---------------------------------------------------- Tableau Référence Titre Statut Actions ----------------------------------------------------
Informations générales Adresse Photos Disponibilités Tarifs Historique Documents
Filtres ------------------------------------------------ Tableau réservations ------------------------------------------------ Actions : Confirmer Annuler Générer contrat
KANBAN Prospect ↓ Qualifié ↓ Visite ↓ Négociation ↓ Client
Primary-50 Primary-100 Primary-200 Primary-300 Primary-400 Primary-500 Primary-600 Primary-700 Primary-800 Primary-900
Success Warning Danger Info
Display H1 H2 H3 H4 Body Small Caption
4 8 12 16 24 32 48 64 96
Button Input Textarea Checkbox Radio Badge Avatar Icon
SearchBar PropertyCard ReservationCard InvoiceCard UserCard
Header Sidebar Footer PropertyGrid ReservationTable RevenueChart CRMKanban
radius-sm radius-md radius-lg radius-xl
shadow-sm shadow-md shadow-lg shadow-xl
Mobile 0 - 767 Tablet 768 - 1279 Desktop 1280+
00 Foundations 01 Components 02 Front Office 03 Client Area 04 Owner Area 05 Back Office 06 Administration 07 Prototypes
Accueil ↓ Recherche ↓ Fiche Bien ↓ Réservation ↓ Paiement ↓ Signature ↓ Confirmation
Dashboard ↓ Biens ↓ Réservation ↓ Contrat ↓ Paiement ↓ Facture
| 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 :
Le dossier de conception est désormais suffisamment complet pour lancer un développement.
Les livrables restants à produire pour atteindre un niveau “industrialisation” sont :
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.