Contexte & problème utilisateur
Contexte & objectifs business
L'AS BARBER est un salon de coiffure et barbier au Mesnil-Saint-Denis. Le site actuel pose une promesse simple : coupe, barbe, soin ou formule complète, avec une réservation en ligne et un acompte de 15 EUR pour confirmer le rendez-vous.
L'enjeu n'était donc pas de créer une simple vitrine. Le site devait faire trois choses en même temps : donner envie d'entrer dans l'univers du salon, rendre les prestations lisibles, et convertir rapidement vers une prise de rendez-vous sans ambiguïté.
Recherche utilisateur
J'ai analysé la maquette existante comme un parcours de service : le visiteur arrive souvent avec une intention courte, sur mobile, entre deux moments de la journée. Il veut vérifier le style, le prix, la disponibilité et la localisation avant de s'engager.
Personas & insights
Persona 01 · Client pressé
Il sait qu'il veut une coupe ou une barbe. Il a besoin d'un accès direct aux prestations, aux prix et aux créneaux sans parcourir toute la page.
Persona 02 · Nouveau client
Il cherche des preuves : ambiance du salon, adresse, horaires, avis implicite via les images, clarté de la politique d'annulation et paiement sécurisé.
Persona 03 · Client routine
Il revient régulièrement et veut réserver vite avec le même barbier, le même type de prestation et un récapitulatif clair avant paiement.
Implication UX
La réservation doit être le cœur du site, pas une section cachée. Les preuves locales et les informations pratiques doivent soutenir le CTA, sans ralentir l'action.
Ce que le site actuel raconte
Le langage visuel est déjà très marqué : noir, bois, doré, cartes sombres, boutons arrondis, photos du salon et interface de paiement. La force du projet vient de ce mélange entre atmosphère de barber shop et logique de produit digital.
Problèmes UX identifiés
Problem statement
Les utilisateurs veulent réserver rapidement, mais ils ont besoin de comprendre ce qu'ils paient, qui va les recevoir, quand le créneau est disponible, et ce que devient leur acompte en cas d'annulation.
1. Beaucoup de décisions en peu de temps
Prestation, barbier, date, heure, informations personnelles, paiement : le parcours doit découper la charge mentale pour éviter l'abandon.
2. Acompte sensible
Demander 15 EUR avant le rendez-vous est cohérent côté business, mais l'interface doit expliquer la politique d'annulation au bon moment.
3. Catalogue dense
Coiffure, barber, technique, épilation, soins : les filtres doivent aider à scanner, pas transformer la page en liste trop longue.
4. Boutique secondaire
La vente de produits avec Stripe et retrait au salon est utile, mais elle doit rester complémentaire à l'objectif principal : prendre rendez-vous.
Résultats & learnings
Impact attendu
Ces résultats sont formulés comme hypothèses UX à partir de l'analyse de la maquette finale, du parcours de réservation et des heuristiques de conversion locale.
Le principal apprentissage : pour un commerce local, le beau ne suffit pas. Le design devient utile quand il transforme la confiance du salon en actions simples : choisir, réserver, payer, venir.
Wireframes, user flow & itérations
Structuration du parcours
La maquette fonctionne comme un tunnel guidé. Chaque étape valide une seule décision et alimente un récapitulatif latéral, ce qui permet à l'utilisateur de comprendre ce qu'il construit avant de payer.
Filtrer, comparer le prix, comprendre la durée.
Choisir Matteo ou Audrey selon son besoin.
Voir un calendrier et des créneaux disponibles.
Renseigner nom, téléphone et message utile.
Confirmer avec un acompte de 15 EUR via Stripe.
Itérations clés
Itération 01 · Réservation prioritaire
Le CTA principal part du hero et pointe vers le tunnel, car c'est l'action business la plus importante.
Itération 02 · Récapitulatif vivant
Le résumé du rendez-vous se met à jour avec chaque choix pour éviter l'effet "formulaire sans retour".
Itération 03 · Politique visible
L'acompte et l'annulation sont expliqués avant le paiement, pas après une erreur ou une hésitation.
Itération 04 · Boutique en second niveau
Les produits enrichissent le site, mais la structure garde la réservation comme fil conducteur.
Solution finale & choix UX
Design UI haute fidélité & micro-interactions
La solution finale se construit autour d'un contraste clair : une ambiance barber shop immersive pour donner envie, et des composants très lisibles pour permettre la réservation. Les cartes, filtres, étapes et boutons sont volontairement simples.
Pourquoi un hero très direct ?
Parce que le visiteur n'a pas besoin d'une grande promesse abstraite. Il doit comprendre le lieu, l'ambiance et l'action disponible : réserver maintenant.
Pourquoi un paiement intégré ?
Parce que l'acompte protège le planning du salon. L'enjeu UX est de rendre ce paiement normal, expliqué et sécurisé.
Design system
Le système graphique repose sur une palette charbon, brun bois et doré chaud, avec une typographie expressive pour la marque et une typographie neutre pour les informations. Le résultat doit rester masculin, soigné, mais jamais intimidant.
Maquette finale L'AS BARBER
Liens intégrés à la case study
Le site final rassemble les blocs essentiels : prestations filtrées, réservation en cinq étapes, galerie du salon, boutique avec paiement Stripe, retrait au salon, contact, horaires et carte Google Maps.
