PADEL DES COPAINS.
Mon Rôle
Webdesigner (Conception UX/UI)
Mes Outils
Figma, WordPress, Google Site Kit, Complianz
Les Clients
S. Halet & C. Thomazo
La Durée
Promo B3 Web Design
L'interface web comme unique réceptionniste digital.
Le projet Redon Padel des Copains consiste à concevoir l'interface numérique d'un complexe de Padel indoor autonome à Redon (3 terrains). La particularité majeure réside dans son autonomie totale : aucun personnel n'est présent sur place pour accueillir les clients.
L'interface web doit remplir les fonctions traditionnelles d'un accueil physique. Le design doit compenser l'absence humaine par une clarté absolue, notamment pour expliquer l'accès au bâtiment via un code sécurisé reçu par mail après réservation.
Le moteur de réservation, la gestion des comptes et le paiement sont externalisés via Doinsport. L'enjeu UX est d'assurer une transition visuelle fluide entre le site vitrine et l'outil externe pour éviter toute rupture de confiance ou confusion chez l'utilisateur.
Objectifs du Projet
Objectifs Qualitatifs (UX)
- Dissiper les doutes sur l'autonomie avec une section "Comment ça marche" dès la Home.
- Concevoir une interface rassurante avec des pages "Accès" et "Contact" claires.
- Réduire le nombre d'étapes du parcours de réservation pour éviter les blocages.
Objectifs Techniques & Accessibilité
- Concevoir une maquette Mobile complète (375px) avec des cibles d'au moins 44×44px.
- Optimiser les assets (format WebP) pour garantir la performance sous connexion 4G/5G.
- Respecter les contrastes de couleurs du RGAA pour une lisibilité en plein soleil sur le parking.
Anxiété liée à l'autonomie
L'explication claire de l'accès par code sécurisé (digicode) dès la Home doit rassurer les 54% d'utilisateurs exprimant un besoin de repères ou de support.
Mon processus de conception.
J'ai structuré mon travail en trois phases rigoureuses pour lier l'analyse des besoins à la formalisation visuelle.
À partir d'un sondage de 41 réponses, j'ai identifié les freins liés à l'autonomie et modélisé trois personas pour guider les choix graphiques et fonctionnels :
- Thomas (32 ans, l'Organisateur) : réserve sur mobile, a peur d'arriver devant une porte fermée. UX : Mobile-First, tutoriel "Comment ça marche" visible.
- Julien (29 ans, le Régulier) : cherche la performance et la rentabilité. UX : caractéristiques premium (WPT, LED) et abonnements mis en valeur.
- Marc (45 ans, le Manager B2B) : réserve sur ordinateur, gère les factures. UX : version Desktop soignée, formulaire de contact B2B simple et page Événements.
J'ai conçu une arborescence très horizontale (plate) pour simplifier l'accès sur mobile en un clic sans sous-menus déroulants complexes. L'architecture s'articule autour d'un menu simple : Accueil, Le Club, Tarifs, Événements, Accès, Contact, avec un bouton de Call-to-Action "Réserver" visuellement isolé dans le header (passerelle vers Doinsport).
J'ai décliné le logo et la charte graphique sur des composants web modernes sous Figma. La palette s'inspire de l'univers de Roland Garros (Vert terre battue, orange terreux, crème, gris foncé) avec une typographie de titre à forte lisibilité (Signika Negative) et des boutons larges adaptés au tactile.
Thomas, Julien & Marc
Nos choix d'interface répondent directement aux tensions spécifiques identifiées chez nos 3 utilisateurs types :
Thomas (L'Organisateur - Mobile)
Craint le bug du digicode. Réponse : Tutoriel "Comment ça marche" en 3 étapes visible dès l'accueil mobile.
Julien (Le Régulier - Fidélisation)
Cherche la qualité des terrains. Réponse : Spécificités premium (LED, moquette WPT, panorama) et abonnements mis en valeur.
Marc (Le Manager B2B - Desktop)
Besoins corporate (facturation, événements). Réponse : Version desktop ultra-soignée et formulaire simplifié.
Interfaces et Arbitrages de Conception.
1. Évolution de l'interface (Wireframes)
Avant de travailler le rendu haute fidélité, j'ai figé l'ossature fonctionnelle de chaque écran sur Figma (du zoning basse fidélité au wireframe calibré) pour vérifier la structure de la rassurance.
Arborescence du site
Zoning Accueil (Home)
Wireframe Accueil (Home)
2. L'intégration visuelle et le Kit UI
Maquette Home Desktop
Maquette Home Mobile
Menu Mobile (Fermé / Ouvert)
Arbitrages de Conception & Spécificités
Optimisation de la Home (Tarifs) :Lors des tests utilisateurs menés sur deux personnes de la cible, les retours ont montré que le prix était jugé "trop caché". Suite à cela, j'ai remonté la section Tarifs directement sous la section explicative "Comment ça marche". J'ai également mutualisé la mention "Raquettes et balles incluses" en un seul bloc central pour réduire la charge cognitive.
Épuration du Contact :Afin d'éviter les frictions chez les utilisateurs pressés, le formulaire a été nettoyé de ses sections inutiles. Le champ "Téléphone" a notamment été rendu facultatif.
Création des pages Club & Événements :Ajout de ces pages pour recréer virtuellement l'esprit "club-house" convivial de la marque et contrer la froideur potentielle d'un complexe 100% autonome.
Contribution technique sur WordPress :J'ai géré la passation technique en partageant les outils d'inspection Figma avec le développeur du groupe. J'ai également configuré le tracking Google Analytics (via Site Kit) pour suivre nos KPIs UX (clics CTA, taux de rebond) et le bandeau RGPD Complianz (100% conforme).
Arbitrages et tests utilisateurs (Section Tarifs)
Validation & Indicateurs.
Indicateurs de réussite opérationnels
Livrables Webdesign Validés
Fichier Figma nettoyé et organisé (Zonings, Wireframes, Maquettes Desktop & Mobile), UI Kit complet et documenté pour les futures évolutions.
Performance Média & Mobile-First
Pack d'assets optimisé livré au format WebP pour garantir un chargement fluide sur mobile en 4G/5G, avec respect des contrastes de couleurs du RGAA pour l'extérieur.
Suivi UX & RGPD Configuré
Configurations statistiques d'audience (Google Analytics via Site Kit) et bandeau de cookies (Complianz) associées aux comptes des clients sur WordPress.
La collaboration avec Christian Thomazo et Stéphane Halet a permis de valider l'ensemble de la maquette et du prototype interactif avant le développement. La passation de l'UI Kit Figma, du pack d'assets WebP et des outils de suivi configurés sur WordPress assure aux fondateurs une autonomie complète pour piloter leur visibilité locale.
Le Design est Solide quand la structure est invisible.
Travailler sur un projet collectif tout au long de l'année avec différents rôles (webmarketing, création, développement) m'a fait réaliser l'importance d'adapter mon travail UX/UI aux réalités de terrain des porteurs de projet et d'assurer une collaboration continue avec le développeur.
La principale difficulté a été de concevoir une rassurance forte pour compenser le manque de visuels réels des terrains indoor (alors en cours de construction), en misant sur l'explication pédagogique claire des infrastructures et de l'autonomie.