Les Cordons Bleus
Repenser le site d'une école de cuisine marseillaise, de l'audit UX au prototype codé.
En bref
- Contexte
- École de cuisine du Vieux-Port de Marseille, fondée en 2003. Elle veut moderniser son site, simplifier la réservation, fidéliser ses élèves et intégrer une fonctionnalité d'IA.
- Mon rôle
- Product Designer UX/UI, de l'audit au prototype codé
- Année
- 2026
Brief fictif fourni par la formation : l'école, ses données et ses clients sont inventés.
01 · Comprendre
Le brief : un site daté, une réservation qui fait fuir, et l'envie d'une fonctionnalité d'IA.
- 25 000 € de budget
- 4 à 6 mois
- 3 000 € de maintenance par an
Ma démarche, en 6 étapes
01 Audit silencieux
Avant tout contact avec le client, j'ai audité le site existant, sur ordinateur et sur mobile, pour ne poser ensuite que les questions dont la réponse n'était pas déjà visible.
- Bloquant Pas de menu sur mobile La page À propos y est inaccessible.
- Majeur Aucune photo Dans un secteur aussi sensoriel que la gastronomie : ni plat, ni chef, ni l'école.
- Majeur Deux discours contradictoires Un tunnel de réservation en ligne d'un côté, un processus manuel par e-mail de l'autre.
- Majeur La confiance mise à mal Chiffres incohérents entre les pages (5 ou 20 ans d'existence, 500 ou 5 000 élèves), téléphone resté en « XX XX », aucun avis client.
- Conformité Liens légaux morts Et aucune case CGV au moment du paiement.
Point positif
Un tunnel de réservation en 5 étapes clair, avec retour toujours possible.
02 Questionnaire client
Un questionnaire de découverte de 20 questions, construit à partir de l'audit : aucune question dont la réponse était déjà sur le site. Des formats variés (questions ouvertes, échelle, classement, choix multiples) pour obtenir des réponses exploitables.
- L'école et ses clients
- Le site actuel
- Objectifs et succès
- Inspirations
- Budget, équipe et contraintes techniques
- Image et ton
« Si ce projet est un succès dans 12 mois, qu'est-ce qui aura concrètement changé pour votre activité ? »
« Y a-t-il des éléments que vous ne souhaitez surtout pas retrouver sur votre futur site ? »
03 Analyse des données
J'ai croisé 10 témoignages clients, Google Analytics, le CRM, le support et des entretiens avec l'équipe. Trois problèmes critiques en ressortent.
Une réservation complexe et peu fiable
Des étapes trop nombreuses et des disponibilités incertaines : beaucoup de visiteurs abandonnent, surtout sur mobile.
Trop peu d'informations et de preuves visuelles
La page Contact fait 32 % des pages vues.
Aucune expérience avant ou après le cours
Les élèves réclament les recettes et veulent revoir les techniques.
Les limites de ma recherche
Seulement 10 témoignages sur 97, sélectionnés par le client ; une période d'analyse de janvier à mars, hors pic d'activité (d'octobre à décembre) ; deux mesures du temps passé sur le site qui ne concordent pas.
04 Personas
Construits avec l'aide de l'IA à partir des témoignages.
Estelle, 28 ans
Blogueuse culinaire. « Cherche une réservation simple et rapide. »
Nicolas, 45 ans
Architecte. Organise des ateliers pour ses collègues, veut prévisualiser et personnaliser les menus.
Claire, 32 ans
Parent. Veut prolonger l'expérience à la maison avec sa fille.
05 Benchmark
- L'Atelier des Chefs, le leader national
- Chefsquare, le spécialiste entreprises et cartes cadeaux
- La Villa des Chefs, le concurrent régional
Prolonger l'expérience
Après les ateliers, grâce à l'IA : aucun concurrent ne le fait.
Un parcours segmenté
Avec une offre Entreprises et groupes.
L'identité marseillaise
En faire un vrai facteur de différenciation.
06 Service blueprint
Toute l'expérience, du premier contact au suivi après le cours, avec les actions internes de l'école.
Le constat
45 %
de sortie sur la page réservation
4 %
de conversion sur mobile (9 % sur desktop)
38 %
des demandes au support portent sur les disponibilités
02 · Concevoir
Prioriser avec le client, prototyper avec l'IA, auditer ce prototype, puis construire l'identité, le design system et le site codé.
-
01
Prioriser
Une solution classée P0 à P2, tenue dans le budget, et une arborescence simplifiée.
-
02
Prototyper avec l'IA
Un premier prototype généré avec Figma Make, puis audité page par page.
-
03
Identité et design system
Couleur et typographie retravaillées, 32 composants documentés.
-
04
Maquetter puis coder
8 pages en desktop et mobile, puis un site codé où tout fonctionne.
03 · Une nouvelle identité
Une palette « tomate en action » : la tomate pour agir, le bleu nuit et le cobalt pour la confiance, le citron pour les accents. Un nouveau logo : la toque qui devient poisson, Marseille et la cuisine en un seul trait.
Couleurs
Principales
- Tomate
- Bleu nuit
- Cobalt
- Citron
Secondaires
- Olive
- Abricot
- Turquoise
- Canard
- Moutarde
- Ciel
- Sable
- Sable foncé
Typographies
- Calistoga Titres
- Atkinson Hyperlegible Next Textes, pensée pour la lisibilité
- Kalam Petites notes manuscrites
Composants
04 · Le site
Huit pages codées, du catalogue au paiement, où chaque interaction fonctionne vraiment, sur ordinateur comme sur mobile. La réservation passe de 5 étapes à 3.
-
L'accueil : la promesse de l'école et une recherche rapide. -
L'accueil, sur mobile. -
Le catalogue : filtres par thème, niveau, régime, date et budget. -
La fiche cours : la réservation à portée de pouce. -
La fiche cours : la date et le nombre de personnes se choisissent sur la fiche, le total se calcule. -
Le calendrier, jour par jour. -
Offrir : un seul parcours, et une carte qui se met à jour pendant la saisie. -
Offrir, sur mobile.
05 · Lou Chef, l'assistant de l'école
L'IA prolonge l'expérience des chefs, elle ne les remplace pas. Lou Chef aide à trouver un atelier, une date libre, une idée cadeau ou une info pratique, puis retrouve l'élève après le cours avec la recette adaptée à sa tablée.
- Avant le cours Choisir son atelier, préparer sa venue, poser ses questions.
- Pendant Lou Chef s'efface : l'humain reste maître.
- Après Retrouver ses recettes, adapter les quantités, créer des variantes selon ses régimes ou allergies.
06 · Mesurer, puis itérer
Le travail ne s'arrête pas au prototype. Une fois le site en ligne, on mesure son effet sur les objectifs du brief, on teste avec de vrais élèves, puis on ajuste.
Objectifs fixés dans le brief, à 12 mois
11 %
de conversion globale (7 % aujourd'hui)
20 %
de sortie sur la réservation (45 %)
8 %
de conversion sur mobile (4 %)
-
Mesurer
Conversion, abandons, demandes au support.
-
Tester
Avec de vrais élèves, sur ordinateur et mobile.
-
Itérer
Ajuster les écrans, puis mesurer à nouveau.
Ce que j'en retiens
Mon premier site conçu avec l'IA, en deux temps : un prototype généré avec Figma Make à partir de mes prompts, puis, après l'avoir audité, un design system et un site codé où chaque interaction fonctionne vraiment. L'IA va vite ; c'est le regard critique, sur le brief, les contrastes et le rendu trop « généré », qui fait la qualité.
Croiser les sources (témoignages, données, support, équipe) rend les décisions solides. Et dire clairement les limites de sa recherche les rend crédibles.
Envie d'échanger ?
Je cherche mon prochain CDI, et je reste ouverte à un CDD, à une belle mission ou à un café pour parler du métier. Écrivez-moi !