Case Study 04 · UX/UI Design · Plateforme métier

L'AS BARBER

Digitalisation complète d'un salon de barbier premium.

10 min de lecture

Projet client mené de bout en bout comme UX/UI Designer et développeur Front-end freelance : site vitrine, plateforme de réservation, dashboard interne, disponibilités en temps réel et acompte Stripe.

Aperçu hero de la maquette L'AS BARBER avec l'univers visuel du salon et le parcours de réservation.
Un écosystème digital complet conçu pour réserver rapidement, piloter le planning et suivre les paiements sur mobile comme sur desktop.

Contexte et brief

L'AS Barber : digitalisation complète d'un salon de barbier premium

RôleUX/UI Designer et développeur Front-end freelance
Année2025 à 2026
StatutProjet client mis en ligne puis fermé par la cliente

L'AS Barber est un salon de barbier haut de gamme situé au Mesnil-Saint-Denis, tenu par Matteo et Audrey. Avant le projet, la prise de rendez-vous se faisait exclusivement par téléphone. Cette organisation entraînait une perte de clients, une gestion complexe du planning et une image digitale sous-exploitée par rapport à la qualité du service en salon.

Objectif : créer un écosystème digital professionnel comprenant un site vitrine, une plateforme de réservation en ligne et un dashboard de gestion interne, tout en conservant l'identité artisanale et chaleureuse du salon.

Liens : les plateformes lasbarber.com et reservation.lasbarber.com ne sont plus actives. Les captures d'écran de production sont conservées dans cette case study.

Projet clientUX/UI DesignFront-endMobile firstStripeCloudflare

Problèmes identifiés

Un service premium freiné par une gestion entièrement manuelle

Réservation téléphonique

Un parcours à forte friction qui pouvait provoquer des abandons et des pertes de clientèle.

Disponibilités invisibles

Les clients ne pouvaient pas consulter en temps réel les créneaux de Matteo et Audrey.

Planning manuel

La gestion quotidienne augmentait les risques d'erreur et de double réservation.

Absence d'acompte

Sans paiement préalable, le salon restait exposé aux rendez-vous non honorés.

Image digitale faible

La présence en ligne ne reflétait pas le positionnement premium ni le savoir-faire du salon.

Solution apportée

Trois briques interconnectées

J'ai conçu et développé un écosystème complet afin de relier acquisition, réservation, paiement et gestion quotidienne.

lasbarber.comSite vitrine one-page
RéservationPlateforme publique dédiée
DashboardAgenda, planning et paiements

Processus

Du besoin métier à la mise en production

1Recherche UX

Entretiens avec Matteo et Audrey pour comprendre le quotidien, les contraintes et les irritants du salon.

2Personas et user flows

Structuration des parcours client et administrateur avant la conception des écrans.

3Direction artistique

Création d'un univers chaleureux et masculin inspiré du bois, du cuir et de l'or sombre.

4Prototypage Figma

Conception mobile first, composants réutilisables et validation progressive des étapes.

5Développement

Mise en ligne, Stripe, base de données et logique de disponibilités en temps réel.

Le site vitrine

Présenter le savoir-faire avant de déclencher la réservation

Hero immersif

Une entrée visuelle forte mettant en valeur l'art du barbier et le positionnement premium.

Prestations lisibles

Des services présentés clairement avec leurs photos, tarifs et bénéfices.

Galerie d'ambiance

Des images du salon pour rassurer, humaniser l'expérience et installer l'univers de marque.

Identité chaleureuse

Un design cohérent avec les matières et les codes visuels du lieu physique.

La plateforme de réservation

Un parcours fluide en cinq étapes

1Prestation

Choisir le service principal et comprendre immédiatement son prix et sa durée.

2Barbier

Sélectionner Matteo ou Audrey selon le style recherché et les disponibilités.

3Date et horaire

Afficher uniquement les créneaux compatibles avec la durée de la prestation.

4Informations client

Recueillir les données indispensables sans alourdir le tunnel.

5Acompte Stripe

Sécuriser le rendez-vous avec un paiement intégré et clairement expliqué.

Points forts : expérience mobile first, réassurance permanente et règles d'annulation présentées dès le début.

Le dashboard de gestion interne

L'outil le plus complet du projet

Agenda intelligentVues jour, semaine et mois avec filtres par barbier et par statut.
Gestion des disponibilitésCréneaux, pauses, congés et fermetures ponctuelles administrables depuis la même interface.
Suivi des rendez-vousStatuts confirmé, non venu et annulé pour garder une vision fiable de l'activité.
Chiffre d'affairesSuivi en temps réel des prestations et des acomptes conservés.
Ajout rapideCréation manuelle de rendez-vous avec prise en charge de plusieurs prestations.

Résultats

Un produit complet livré et exploité dans un contexte réel

Mise en ligne réussieUn système complet et opérationnel utilisé pendant plusieurs mois.
Réservation professionnelleUn parcours fluide reliant prestation, disponibilités, informations et paiement.
Gestion moderniséeUn dashboard permettant de piloter planning, statuts et paiements.
Livraison end-to-endUne démonstration concrète de ma capacité à passer du brief à la mise en production.
Note : la cliente a finalement choisi de fermer les plateformes pour revenir à une gestion plus traditionnelle. Cette expérience reste l'une des plus riches de mon parcours, car elle m'a permis de travailler sur un produit end-to-end dans un contexte réel.

Ce que j'ai appris

Ce que je ferais différemment

Maintenance

Mieux anticiper les besoins de maintenance et de formation du client dès le cadrage.

Accompagnement

Proposer dès le départ une phase post-livraison plus longue et plus structurée.

Mesure de valeur

Renforcer les statistiques et le suivi analytique pour rendre les bénéfices du produit plus visibles.

Captures d'écran

Les interfaces conservées après la fermeture des plateformes

Les sites publics ne sont plus actifs. Ces captures documentent le site vitrine et le parcours de réservation réellement mis en production.

HTMLCSSJavaScriptCloudflare PagesFunctionsD1KVStripe