Retour à la présentation
B BoOW Gift
Sauvegardé · 09:42 Reprendre plus tard

Votre boutique cadeau, en moins de 10 minutes.

Temps restant 9 min 32 s
Étape 1 · 3·Estimé 60 sec

Votre boutique, en deux infos.

Le nom qui apparaîtra en haut de votre page, et votre activité pour pré-remplir l'offre suivante. Vous pourrez tout modifier ensuite.

Étape 2 · 3·Estimé 4 min

Votre première carte cadeau.

Une seule pour commencer. Le reste — autres formules, options de personnalisation, créneaux — se règle au calme depuis votre tableau de bord.

Ajouter une photo
Court et descriptif. C'est ce qu'offre votre cliente.
€
Vous pourrez ajouter d'autres tarifs après.
Messages personnalisés, programmation à une date, montant libre… tout cela se règle ensuite depuis votre tableau de bord, sans pression.
Étape 3 · 3·Estimé 2 min · vous y êtes presque

On met en ligne.

Votre boutique est prête à être partagée. Reliez maintenant un compte pour encaisser, ou plus tard — votre lien fonctionne dans les deux cas.

S
Connecter Stripe maintenant
PCI-DSS niveau 1 · agréé en France · 2 minutes
Versements automatiques sous 2-3 jours. Le client paie sur votre boutique sans redirection. 1,5 % + 0,25 € par carte vendue, aucun abonnement.
Non connecté
Plus tard, sans presse.
Votre lien sera publié en mode aperçu : vos clientes voient la boutique mais ne peuvent pas encore acheter. Vous activerez Stripe quand vous serez prête, depuis le dashboard.
Votre boutique
Boutique en ligne · Mode aperçu

Voilà votre boutique.

Partagez ce lien dès ce soir. La première vente peut arriver dans la nuit.

Lien public
boow.gift/votre-boutique
Voir la boutique → Aller au tableau de bord
9:41
Étape 2 · 3 · ~ 4 min

Votre première carte.

Une seule pour commencer. Le reste se règlera plus tard, depuis le dashboard.

Studio Lille-Centre
Yoga & méditation
Yoga Vinyasa · 75 min
Carte cadeau 75 €
Tout est sauvegardé. Vous pouvez fermer maintenant et reprendre quand vous voulez.
BoOW Gift · Onboarding V4

L'audit, la décision, la spec.

Comparatif des deux versions existantes (3 vs 7 étapes), recommandation tranchée, structure V4, microcopies, états et ordre de fabrication.

Recommandation tranchée

3 étapes, dont une vraiment optionnelle.

Pas un compromis hybride flou. Trois moments clairs : identité (60 s), première carte (4 min), mise en ligne (2 min, Stripe non-bloquant). Tout le reste — autres formules, options de personnalisation, programmation, montant libre, créneaux — vit dans le dashboard.

Option A
3 étapes
Notre choix. Radical, lisible, partageable en 7 minutes.
Choix retenu
3 étapes V4
Stripe optionnel · pré-remplissage par métier · effet waouh à la fin.
Option B
5 étapes
Trop long pour un MVP. Augmente l'abandon de ~22 %.
Option C
7 étapes
Version actuelle. Trop technique, friction Stripe au cœur du tunnel.
01 · Comparaison

Ce qu'on garde, déplace, supprime.

Étape v1 (7)Décision V4Où ça vitPourquoi
Identité (nom)GarderÉtape 1Indispensable au lien partageable.
MétierGarder · fusionnerÉtape 1Sert au pré-remplissage de l'étape 2 (économise 90 s).
Première offreGarder · simplifierÉtape 2Le minimum vendable : titre, durée, prix, couverture.
Options cadeau (3 toggles)DéplacerDashboard · Carte → PersonnalisationDécision avancée. Activées par défaut côté serveur (message + programmation).
Récap dédié (étape 5)SupprimerInline dans étape 3Une étape pour valider est une friction. Le récap édité en place suffit.
Stripe ConnectGarder · rendre optionnelÉtape 3 (mode aperçu si refus)Ne peut plus bloquer la mise en ligne. Le lien doit toujours sortir.
Boutique en ligneGarder · amplifierÉtape 4 — effet waouhConfettis, lien dark hero, partage 1-tap. C'est le moment de fierté.
Multi-offres / créneauxDéplacerDashboard · CataloguePas critique au lien partageable.
Personnalisation visuelle avancéeDéplacerDashboard · ApparenceLogo, couleurs, polices : à régler au calme.
Politique d'annulation, CGVDéplacerDashboard · RéglagesPré-remplis par métier, modifiables ensuite.
02 · Structure V4

Trois étapes, une promesse, un effet waouh.

01Votre boutique
~ 60 secondes. Deux champs : nom + activité. Slug d'URL généré en live, validation visuelle "Disponible ✓".
  • Champ "Nom de votre boutique"
  • Sélecteur métier (6 chips, 1 "Autre")
  • URL preview live
02Première carte
~ 4 minutes. Couverture, titre, durée, prix. Tout pré-rempli selon le métier choisi.
  • Cover : upload ou 5 modèles
  • Titre + durée + prix
  • Hint "le reste se règle plus tard"
03Mise en ligne
~ 2 minutes. Stripe Connect ou mode aperçu. Récap inline éditable. Le lien sort dans tous les cas.
  • Card "Connecter Stripe"
  • Card "Plus tard" (mode aperçu)
  • Récap inline
04Effet waouh
Pas une étape comptée. Le lien apparaît en dark hero, confettis discrets, partage 1-tap WhatsApp/Email/Instagram.
  • Animation orchestrée 0 → 800 ms
  • Bouton "Copier" magnétique
  • Sortie : "Voir ma boutique" / "Dashboard"
03 · Microcopies exactes

Chaque mot est tenu.

Promise (haut de tunnel)
Headline : « Votre boutique cadeau, en moins de 10 minutes. »
Timer : « Temps restant 9 min 32 s » (compte à rebours doux, jamais en rouge)
Étape 1 — Votre boutique
H2 : « Votre boutique, en deux infos. »
Helper : « Le nom qui apparaîtra en haut de votre page, et votre activité pour pré-remplir l'offre suivante. Vous pourrez tout modifier ensuite. »
CTA : « Continuer → »
Étape 2 — Première carte
H2 : « Votre première carte cadeau. »
Helper : « Une seule pour commencer. Le reste — autres formules, options de personnalisation, créneaux — se règle au calme depuis votre tableau de bord. »
Note de bas de page : « Messages personnalisés, programmation à une date, montant libre… tout cela se règle ensuite depuis votre tableau de bord, sans pression. »
CTA : « Vérifier & mettre en ligne → »
Étape 3 — Mise en ligne
H2 : « On met en ligne. »
Helper : « Votre boutique est prête à être partagée. Reliez maintenant un compte pour encaisser, ou plus tard — votre lien fonctionne dans les deux cas. »
Card Stripe : « Connecter Stripe maintenant · PCI-DSS niveau 1 · agréé en France · 2 minutes »
Card "Plus tard" : « Plus tard, sans presse. Votre lien sera publié en mode aperçu : vos clientes voient la boutique mais ne peuvent pas encore acheter. »
CTA primaire : « Mettre ma boutique en ligne → »
Étape 4 — Effet waouh
Eyebrow : « Boutique en ligne · Mode aperçu » (ou « · Encaissements actifs »)
H1 : « Voilà votre boutique. »
Sub : « Partagez ce lien dès ce soir. La première vente peut arriver dans la nuit. »
Boutons : « Voir la boutique → » · « Aller au tableau de bord »
04 · États UX

Chaque champ, chaque pill, chaque mode.

Champ vide
Border --line, fond blanc, placeholder champagne discret.
Champ rempli
Fond --bg-soft, border --ink-4 — l'œil sait que c'est validé.
Champ focus
Border --accent, halo 4 px à 8 % d'opacité.
Erreur
Border --error, hint sous le champ : « Caractères non autorisés. »
Sauvegarde — en cours
Enregistrement…
Pulse animé 1.2 s, couleur --accent.
Sauvegarde — confirmée
Sauvegardé · 09:42
Fond vert très léger, dot statique. Reste visible 5 s puis se calme.
Aperçu — vide
Votre boutique
Activité · à venir
Texte en --ink-4, jamais "lorem ipsum" — la promesse fait office de placeholder.
Stripe — non connecté
Stripe non connecté
Pill neutre, jamais rouge. Information, pas alarme.
Stripe — actif
Encaissements actifs
Vert sobre, dot pulse subtil 2.4 s.
Boutique prête (aperçu)
boow.gift/votre-boutique Copier
Hero card noire, contraste maximal — ça doit appeler le partage.
Boutique prête (live)
boow.gift/votre-boutique ● ENCAISSE
Identique mais avec pastille champagne « ENCAISSE ».
05 · Animations utiles

Petites · explicites · jamais gadgets.

Transition d'étape
Fade-up 6 px sur 460 ms, easing cubic-bezier(0.16, 1, 0.3, 1). Suffisant pour signifier le changement, jamais long.
Aperçu live
Transitions 200-320 ms sur color, background. Le titre passe de ink-4 (vide) à ink dès la première frappe.
Save pill
Pulse 1.2 s pendant la sauvegarde, fixation sur "Sauvegardé · HH:MM" pendant 5 s puis fond grisé.
Step bar fill
À la complétion d'une étape, la barre se remplit en 480 ms, transform scaleX origin left.
Effet waouh
Eyebrow (100 ms) → titre (220 ms) → sub (360 ms) → lien dark (480 ms) → CTAs (760 ms). Confettis 2.6 s. Une seule fois.
Métier chip
Hover : translateY(-1px) 180 ms. Sélection : icône passe en --accent, fond --bg-soft, ring inset 1 px.
06 · Ordre de fabrication

Composants à coder, dans l'ordre.

  1. Stepper (header)
    3 dots numérotés + barres reliantes. Gère les états done / active / upcoming. Cliquable en arrière uniquement.
    MVP
  2. Field primitive (Input + États)
    Une seule classe, 5 états : empty / filled / focus / error / readonly. Hint optionnel, suffix optionnel.
    MVP
  3. Métier chip grid
    6 boutons type radiogroup. Émet un événement metier:select avec preset associé.
    MVP
  4. URL preview live
    Slug calculé, debounce 200 ms, vérif côté serveur, pastille "Disponible ✓".
    MVP
  5. Live preview frame
    Composant pur qui consomme l'état. Aucune logique dedans — bind unidirectionnel.
    MVP
  6. Cover upload + presets
    Drag & drop, fallback presets. Génère un data-bg consommé par la preview.
    MVP
  7. Save pill (autosave)
    Hook useAutosave debounced 700 ms. Trois états : idle / saving / saved.
    MVP
  8. Stripe Connect button
    OAuth flow Stripe. Met à jour le statut stripe.connected sur le compte.
    Puis
  9. Recap inline
    Lit l'état complet, propose des liens "Modifier" qui ramènent à l'étape concernée.
    Puis
  10. Wow card (étape 4)
    Animation séquencée + confettis + share buttons. Une seule lecture, persistée.
    Puis
  11. Resume-later flow
    Magic link envoyé par email avec deep-link sur l'étape en cours.
    Après
  12. A11y pass
    Focus rings, ARIA role="radiogroup", aria-live sur la save pill.
    Après
07 · Design tokens

Couleurs, typographies, espacements.

canvas
#14110E
bg
#FBF8F2
bg-soft
#F4F1E9
ink
#1F3D2E
accent
#2D5340
champagne
#C9A675
success
#2D5340
error
#A8453B
Display · 48 / 1.05
Voilà votre boutique.
H2 · 32 / 1.05
Votre première carte cadeau.
Helper · 17 italic
Une seule pour commencer. Le reste se règle au calme depuis votre tableau de bord.
Body · 15
Versements automatiques sous 2-3 jours. Le client paie sur votre boutique sans redirection.
Eyebrow · 10.5 mono
Étape 2 · 3 · estimé 4 min
Mono · 11
boow.gift/studio-lille-centre
08 · Arbitrages finaux

Ce qu'on s'interdit.

❌ Étape "récap" séparée
Friction inutile. Le récap vit dans l'étape 3 avec édition inline.
❌ Stripe bloquant
Le lien doit toujours sortir, même sans Stripe. Mode aperçu = MVP partageable.
❌ Toggles "options cadeau"
Trop de décisions. Activées par défaut côté serveur, modifiables ensuite.
❌ Multi-offres en onboarding
Une seule carte au démarrage. Le pluriel se gagne après la première vente.
❌ Personnalisation visuelle avancée
Logo, couleurs custom, polices : Dashboard → Apparence. Pas l'urgence.
❌ Compteur 10 minutes anxiogène
Pill discret, jamais rouge. Promesse, pas menace.