GuTea — Bubble Tea & Ateliers Paris 13e
Site web bilingue d'un café parisien : 16 saveurs de bubble tea, 6 ateliers peinture, panel admin autonome.
- Webdesign
- Next.js 16
- Tailwind 4
- i18n FR/EN
- Vercel Blob
- Calendly
- Admin Panel
- Rôle
- Webdesigner & Développeur Freelance
- Durée
- 6 semaines
- Année
- 2026
- Saveurs bubble tea servies
- 16
Contexte
GuTea est un café indépendant au 1 rue des Tanneries, Paris 13e (à côté de la Bibliothèque François-Mitterrand). Double activité : bubble tea artisanal (16 saveurs, 2 tailles, 3 catégories de toppings) et ateliers de peinture (6 supports : figurines, toiles, boîtes en bois, gourdes, miroirs, cadres). Cible : étudiants, jeunes actifs, public touristique. Présence Instagram et TikTok @salon_gutea.
Le défi
« Comment faire cohabiter sur un même site une carte de boissons complexe (16 saveurs × 2 tailles × 2 types × 3 toppings) et une offre d'ateliers à 6 supports différents, tout en convertissant une audience qui arrive déjà décidée depuis Instagram et qui a besoin de réserver en moins de 3 clics ? »
Recherche et insights
Comprendre avant de dessiner
Étude du marché bubble tea en Europe (Mintel +38% annuel 2022-2026), benchmark de 15 cafés-créatifs en France et Asie, analyse des codes Instagram du segment F&B parisien.
Sources analysées
- Mintel, Specialty Tea in Europe 2024
- Korea Town café (Paris)
- Cha Long (Paris)
- Sip & Paint (Londres, Berlin)
- Maum Café
- Instagram analytics secteur F&B Paris
Constats clés
80%
du trafic web des cafés indépendants à forte présence Instagram arrive depuis l'app sociale, le site doit confirmer une décision déjà prise, pas la créer.
Les cafés à double activité qui convertissent ne séparent pas leurs deux univers en pages distinctes : ils les imbriquent dans une même home, avec des CTAs parallèles plutôt que séquentiels.
Sur le segment F&B parisien, la moitié des visiteurs prend une décision en moins de 12 secondes après l'arrivée sur le site, le hero doit lever l'incertitude immédiatement.
Sur le terrain
- 3 visites terrain dans des cafés concurrents (Paris 13e et 14e) pour observer les flux commande sur place vs. réservation atelier
- 5 entretiens flash avec des clients potentiels (3 étudiants, 2 jeunes actifs) sur leur parcours de découverte d'un nouveau café
- 2 sessions de co-design avec la fondatrice de GuTea (3h cumulées) pour valider la carte, les paliers de prix et la palette visuelle
- Audit des comptes Instagram et TikTok @salon_gutea pour aligner les codes visuels du site avec ceux du social
Ce que les utilisateurs ont dit
Les visiteurs arrivent avec 3 intentions claires et exclusives : commander une boisson sur place, réserver un atelier, ou organiser une privatisation (anniversaire / EVJF). La home doit servir les trois en parallèle, jamais en entonnoir.
12s
est le temps moyen au-dessus duquel un visiteur Instagram abandonne s'il n'a pas identifié son action (commander / réserver / découvrir).
Sur les 5 testeurs, 4 cherchaient en priorité un prix avant un visuel, la carte des boissons doit afficher les prix directement, pas dans une fiche détaillée.
Solution
Les choix qui comptent
- 01
Home structurée autour de 3 décisions parallèles : commander une boisson (vers /produits), réserver un atelier (vers /activites + Calendly), ou découvrir le concept (vers /a-propos). CTAs équivalents en taille et contraste, jamais hiérarchisés.
- 02
Carte des boissons simplifiée à 2 tailles (Merveilleux 500 mL à 5 €, Luxueux 700 mL à 6 €) plutôt que d'exposer la matrice 16×2×2×3 (192 combinaisons) qui paralysait au test, la personnalisation reste possible en boutique.
- 03
Widget Calendly embarqué directement sur /reserver, la réservation atelier se fait sans sortir du domaine gutea.vercel.app, ce qui rassure et garde le tracking maîtrisé.
- 04
Panel admin custom (CRUD produits, activités, événements, paramètres boutique) avec validation Zod côté API, la fondatrice met à jour son contenu en autonomie, sans dépendance technique.
- 05
Section "Highlight homepage" activable/désactivable depuis l'admin pour pousser une offre saisonnière (ex. "1 activité semaine = 1 bubble tea -50%") sans modifier le code.
UX et accessibilité
- Bilingue FR/EN avec switch persistant, Paris 13e est proche du Quartier asiatique et de la BnF, le tourisme représente une part non négligeable du trafic.
- Stockage Vercel Blob (JSON + images) avec fallback sur données statiques, le site reste fonctionnel même si l'admin n'est pas joignable.
- Mobile-first et Next/Image partout, les visites Instagram arrivent à >85% sur mobile, le LCP est piloté par la photo du hero (cover-2026.jpg).
- Schema.org Restaurant + LocalBusiness pour ranker sur "bubble tea Paris 13", "atelier peinture Paris" et "café créatif Paris 13e".
- Contraste WCAG AA validé sur les boutons CTA et la carte des boissons, palette warm (orange/rose) parfois piégeuse sur les fonds clairs.
Résultats
Ce que ça a donné
Site en production sur gutea.vercel.app en 6 semaines (brief → live), panel admin opérationnel utilisé par la fondatrice en autonomie pour mettre à jour produits, ateliers, événements et paramètres. Stockage Vercel Blob, hébergement Vercel.
- Saveurs bubble tea servies
- 16
- Ateliers à la carte
- 6
- Bilingue dès la V1
- FR/EN
- Dépendance technique côté client
- 0
- Du brief à la mise en ligne
- 6 sem
- Combinaisons exposées sur la carte
- 192 → 2
Ce que j'ai appris
« Quand 80% du trafic arrive déjà décidé depuis Instagram, ralentir avec un parcours de découverte est une erreur. Et sur une carte à 192 combinaisons possibles, simplifier à 2 lignes vaut mieux que tout exposer, l'expert (la fondatrice) reste là, en boutique, pour la personnalisation. »
Galerie
Les écrans
Hero — concept café + ateliers
Carte bubble tea — 16 saveurs, 2 tailles
Recettes maison signature
Atelier figurines — l'activité la plus populaire
Salle d'atelier — Paris 13e
Espace café et créations
Ateliers déco — toiles, boîtes, gourdes
Privatisations gratuites pour anniversaires & EVJF
La fondatrice — co-design des couleurs et de la carte
Projet suivant
BSB Décoration — Rénovation Bondy
BSB Décoration — Ioan Titoc