TOCKR • Parcours client B2C

Recherche d'horloger → devis accepté → rendez-vous de dépôt

Livrable UX mobile-first

Concevoir toute l'expérience client réparation de montre.

Une séquence complète de 6 écrans : recherche géolocalisée, matching horlogers, fiche atelier, demande de devis, lecture du devis, puis réservation du dépôt en atelier.

écrans wireframés

blocs livrables

100%

mobile-first

Vue synthèse du parcours

Page d'accueil / recherche

Décrire le problème et lancer la recherche géolocalisée en moins de 30 secondes.

Carte des horlogers

Comparer rapidement plusieurs ateliers à proximité avec les infos qui déclenchent la confiance.

Fiche horloger

Valider le choix de l'atelier grâce au profil, aux preuves et aux disponibilités.

Formulaire de devis en ligne

Collecter toutes les informations utiles au diagnostic sans créer de friction.

Page devis reçu

Faire comprendre instantanément la proposition et déclencher l'action de décision.

Confirmation de RDV dépôt

Transformer l'acceptation en créneau confirmé, sans appel ni aller-retour manuel.

Cadrage du parcours

Principes UX à garder constants sur les 6 écrans

Le client doit toujours comprendre où il en est, ce qu'il doit fournir maintenant, et ce qu'il obtiendra ensuite. Le ton doit rassurer, matérialiser la confiance atelier, et limiter les sorties de parcours.

Confiance d'abord

Avis vérifiés, badges, délais et fourchettes de prix visibles très tôt dans le funnel.

Pré-remplissage maximal

Le problème, l'atelier sélectionné et les informations montre suivent le client sans ressaisie.

Décision guidée

Chaque écran pousse une seule action principale: rechercher, comparer, demander un devis, accepter, réserver.

Wireframes

6 écrans mobile-first du parcours client

Chaque wireframe ci-dessous décrit l'objectif de l'écran, les données manipulées, les composants visibles et une structure de contenu exploitable immédiatement pour un prototype haute fidélité.

Wireframe mobile 01

Page d'accueil / recherche

Décrire le problème et lancer la recherche géolocalisée en moins de 30 secondes.

Tockr mobile01/06

Wireframe mobile 01

Trouver un horloger adapté à votre montre

[ Header logo + aide ]

[ Texte libre : Ma montre retarde de 20 min/jour… ]

[ Bouton : Utiliser ma position ]

[ OU Ville / code postal ]

[ Rayon 10 km v ]

[ CTA primaire : Voir les horlogers ]

[ Réassurance : devis gratuit • horlogers vérifiés ]

Données entrantes

description_problemegeolocationvillecode_postal

Données sortantes

search_sessioncoords_normaliseesrayon_defaut

Composants clés

• Champ texte libre
• CTA GPS
• Champ ville/CP
• Sélecteur rayon
• CTA Rechercher

Note UX

Le champ problème pré-remplit les écrans suivants et alimente le scoring des spécialités.

Wireframe mobile 02

Carte des horlogers

Comparer rapidement plusieurs ateliers à proximité avec les infos qui déclenchent la confiance.

Tockr mobile02/06

Wireframe mobile 02

3 horlogers compatibles autour de vous

[ Barre filtres horizontale : Rolex • Automatique • < 3 semaines ]

[ Mini-carte avec markers ]

[ Card atelier photo ]

Note 4,9 • 1,8 km

Spécialités : Omega, Rolex, mouvements auto

Délai estimé : 10-15 jours

Fourchette : 180€ - 320€

[ Voir la fiche ] [ Demander un devis ]

Données entrantes

results[]distance_kmnote_moyennespecialitesdelai_estimeprix_min/max

Données sortantes

selected_watchmaker_idfiltres_actifsordre_tri

Composants clés

• Carte sticky
• Cards ateliers
• Filtres chips
• Tri
• CTA fiche / devis

Note UX

La carte et la liste restent synchronisées; chaque card expose un rationnel de matching lisible.

Wireframe mobile 03

Fiche horloger

Valider le choix de l'atelier grâce au profil, aux preuves et aux disponibilités.

Tockr mobile03/06

Wireframe mobile 03

Atelier Breguet & Fils

[ Photo atelier + note + badge Vérifié ]

[ Certifications COSC • WOSTEP ]

[ Bloc spécialités : Patek / Rolex / vintage ]

[ Galerie réparations réalisées ]

[ Avis vérifiés — cartes swipe ]

[ Disponibilités dépôt : mar 10:00, mer 14:30 ]

[ CTA primaire : Demander un devis ]

Données entrantes

watchmaker_profilecertifications[]verified_reviews[]repair_gallery[]availability_slots[]

Données sortantes

selected_service_typequote_intentpreferred_slot_hint

Composants clés

• Hero atelier
• Badges certifications
• Avis vérifiés
• Galerie avant/après
• Disponibilités
• CTA devis

Note UX

Les disponibilités sont visibles tôt pour rassurer, sans bloquer avant l'émission du devis.

Wireframe mobile 04

Formulaire de devis en ligne

Collecter toutes les informations utiles au diagnostic sans créer de friction.

Tockr mobile04/06

Wireframe mobile 04

Demande de devis — étape 2 sur 3

[ Stepper : Montre • Prestation • Récap ]

[ Marque ] [ Modèle ]

[ N° de série ]

[ Upload photos face / dos / mouvement ]

[ Zone texte : symptôme détaillé ]

[ Cartes prestation : Révision / Réparation / Bracelet / Verre ]

[ CTA : Continuer ]

Données entrantes

watch_brandwatch_modelserial_numberphotos[]problem_descriptionservice_type

Données sortantes

quote_requestattachmentssummary_payload

Composants clés

• Stepper 3 étapes
• Inputs marque/modèle
• Upload photos
• Sélecteur prestation
• Récapitulatif
• CTA envoyer

Note UX

Le récapitulatif final assemble montre, prestation, horloger cible et consentement client avant envoi.

Wireframe mobile 05

Page devis reçu

Faire comprendre instantanément la proposition et déclencher l'action de décision.

Tockr mobile05/06

Wireframe mobile 05

Votre devis est prêt

[ Bandeau statut : reçu aujourd'hui ]

[ Carte prix principale : 286€ TTC ]

[ Lignes : révision complète / remplacement joint ]

[ Délai estimé : 12 jours ouvrés ]

[ Conditions + garantie ]

[ Boutons : Accepter | Refuser ]

[ Lien secondaire : Poser une question ]

Données entrantes

quoteline_items[]price_httaxesprice_ttcturnaroundtermsmessages_thread

Données sortantes

quote_decisionquestion_messageappointment_booking_intent

Composants clés

• Résumé devis
• Lignes prestations
• Bloc prix HT/TTC
• Conditions
• CTA accepter/refuser/question

Note UX

La messagerie contextuelle doit éviter de quitter le flux principal avant décision.

Wireframe mobile 06

Confirmation de RDV dépôt

Transformer l'acceptation en créneau confirmé, sans appel ni aller-retour manuel.

Tockr mobile06/06

Wireframe mobile 06

Choisir mon créneau de dépôt

[ Résumé devis accepté ]

[ Calendrier semaine ]

[ Liste créneaux : jeu 09:30 / 11:00 / 15:30 ]

[ Infos dépôt : adresse atelier, pièces à apporter ]

[ CTA : Confirmer le rendez-vous ]

[ Écran succès : email + SMS envoyés ]

Données entrantes

accepted_quote_idavailability_calendarslot_policycustomer_contact

Données sortantes

appointment_idconfirmed_slotconfirmation_notifications

Composants clés

• Calendrier mobile
• Créneaux disponibles
• Récap dépôt
• CTA confirmer
• Bloc confirmation

Note UX

Après confirmation, la page doit fournir les consignes de dépôt et le prochain point de contact.

Flux de données

Comment les informations circulent entre les écrans

Le parcours doit conserver le contexte de recherche de bout en bout. Chaque étape enrichit le dossier client et prépare la suivante, sans perte d'information ni ressaisie inutile.

1. Recherche → matching

Le client saisit son problème et sa localisation. Le système normalise l'adresse, calcule les coordonnées, enrichit la recherche avec un rayon par défaut et déclenche la requête de matching.

problem_descriptionlocation_inputcoordsradius_km

2. Matching → fiche horloger

L'API retourne une liste ordonnée d'horlogers avec score, distance, spécialités, délai et prix estimatif. Le clic sur une card hydrate la fiche détaillée et garde le contexte de recherche.

search_session_idwatchmaker_idmatching_scorefilters

3. Fiche horloger → devis

Le choix de l'atelier ouvre un devis ciblé. Les données publiques de l'horloger sont jointes au dossier de demande pour pré-remplir l'atelier, le type de prestations disponibles et les premiers créneaux.

watchmaker_profileservice_catalogslot_preview

4. Formulaire → demande de devis

Le client renseigne la montre, les photos et la prestation. Le frontend prépare un payload unique avec pièces jointes, résumé et consentement, puis crée la demande côté serveur.

watch_detailsattachmentsservice_typeproblem_detailscustomer_contact

5. Devis reçu → décision

Quand l'horloger répond, la page devis affiche le détail financier, les délais et les conditions. Les actions accepter, refuser ou poser une question alimentent le statut du devis et le thread conversationnel.

quote_idstatusline_itemsdecisionquestion_message

6. Acceptation → rendez-vous

Une fois accepté, le devis déverrouille le calendrier de dépôt. Le créneau retenu crée un rendez-vous, bloque la disponibilité chez l'horloger et envoie les confirmations client + atelier.

accepted_quote_idslot_idappointment_idnotification_status

UI kit requis

Liste des composants UI nécessaires

Cette base couvre le MVP UX demandé. Elle permet ensuite de passer en design system ou en prototype interactif sans redéfinir les primitives.

01Champ de recherche problème (textarea auto-grow)

02Module géolocalisation GPS + fallback ville/CP

03Sélecteur de rayon et chips filtres

04Carte interactive + markers horlogers

05Card résultat horloger (photo, note, badges, délai, prix)

06Bloc score/matching explicable

07Hero fiche atelier + badges certifications

08Carrousel avis vérifiés

09Galerie réparations réalisées

10Module disponibilités / prochains créneaux

11Stepper mobile pour demande de devis

12Upload multi-photos avec aperçu

13Cartes de sélection de prestation

14Récapitulatif devis + conditions

15CTA groupés accepter / refuser / poser une question

16Panneau messagerie contextuelle

17Calendrier de dépôt + liste de slots

18Écran de confirmation RDV + rappels logistiques