SaaS & Restauration

Tableo

Le QR code du restaurant ne devait plus être un PDF, mais un canal de vente.

Année
2026
Conception
9 semaines
Stack
React · TypeScript · Vite · Supabase · Vercel
  • Product design
  • Design mobile
  • Développement
  • Base de données
  • Paiement
Visiter le site(nouvel onglet)Discuter d'un projet comme celui-ci

Produit édité par Kayzen Web, servi sur une adresse de prévisualisation Vercel en attendant son domaine définitif.

https://tableo-sepia.vercel.app/
Page d'accueil du site Tableo — SaaS & Restauration, réalisé par Kayzen Web
ouverture de la carte au scan
< 1 s
performance Lighthouse
91/100
accessibilité LighthouseSous notre seuil de 95 : les contrastes de la carte, calqués sur les couleurs de chaque restaurant, sont le point relevé ; leur mise en conformité est planifiée au prochain passage.
87/100
Le point de départ

Ce qu'il fallait résoudre.

Le contexte

Tableo transforme le QR code posé sur la table d'un restaurant en interface complète : carte à jour, commande, paiement, collecte d'avis et données de fréquentation.

La contrainte

Le QR code a mauvaise réputation depuis 2020, parce qu'il a d'abord servi à afficher un PDF illisible. Le produit devait balayer ce souvenir dès le premier écran mobile, dans un contexte défavorable — salle bruyante, une main, réseau saturé, client pressé.

La réponse

Concevoir d'abord la vue client, jamais le back-office. La carte s'ouvre en moins d'une seconde, sans installation, sans compte, et reste lisible d'une main. Le tableau de bord du restaurateur est venu ensuite, contraint par ce que la vue client produit réellement comme données.

Mesuré, pas déclaré

Les scores relevés à la livraison.

Scores Lighthouse du site en production. Nous les publions tels quels : quand l'un d'eux est bas, sa cause et son plan de correction sont écrits plus bas plutôt que passés sous silence.

PageSpeed
91
Performance : 91 sur 100
87
Accessibilité : 87 sur 100
100
Bonnes pratiques : 100 sur 100
100
Référencement : 100 sur 100
Design & direction artistique

Chaque parti pris, et sa raison.

  1. Conçu pour le pouce

    Navigation par catégories collante en bas d'écran, dans la zone atteignable au pouce. Cibles tactiles à 44 px minimum. Une carte de restaurant se consulte debout, à une main, avec un verre dans l'autre.

  2. Photos facultatives, jamais obligatoires

    Peu de restaurants disposent de photos correctes de tous leurs plats. La carte reste élégante sans images ; les photos, quand elles existent, sont un bonus et non la structure de la page.

  3. Tableau de bord lisible en coup d'œil

    Le restaurateur consulte son tableau de bord entre deux services. Trois chiffres en haut, le reste sous le pli. Aucun graphique qui exige une lecture attentive.

Palette du projet

  • Sépia

    #7C4A21

    Identité, en-têtes

  • Crème

    #FBF7F0

    Fond de carte

  • Encre

    #1C1917

    Texte

  • Vert commande

    #15803D

    Confirmation

Système typographique

Titrage

Outfit 700

Texte courant

Inter 400

Les prix sont en chiffres tabulaires alignés à droite : une colonne de prix mal alignée se lit comme une carte bâclée.

Ingénierie

Ce qu'il y a sous le capot.

  • React
  • TypeScript
  • Vite
  • Supabase
  • Vercel

  1. Supabase temps réel

    Les commandes remontent en direct en cuisine par abonnement temps réel. Un rafraîchissement périodique aurait ajouté de la latence là où elle se voit le plus.

  2. Cloisonnement par établissement

    Politiques d'accès par ligne : un restaurant ne peut structurellement pas lire les données d'un autre. Sur un produit multi-locataire, cette règle appartient à la base, pas au code applicatif.

  3. Paiement délégué

    Aucune donnée de carte ne transite par le produit. Le prestataire de paiement gère la saisie et la conformité PCI ; c'est le seul choix raisonnable pour une équipe de cette taille.

Référencement

Comment le site se rend trouvable.

  1. Le SEO porte sur la vente du logiciel

    La carte d'un restaurant n'a pas vocation à être indexée — elle change tous les jours et ne répond à aucune requête. Le référencement cible « logiciel commande à table », « QR code menu restaurant », requêtes du restaurateur.

Accessibilité

Utilisable par tout le monde.

Depuis juin 2025, l'European Accessibility Act impose l'accessibilité numérique à une large part des services en ligne. Nous la traitons à la conception, pas en rattrapage.

  1. Contrastes revus sur la carte

    Les cartes de restaurant abusent du gris clair sur blanc. Toutes les paires sont au-dessus de 4,5:1, y compris les prix et les mentions d'allergènes — dont la lisibilité n'est pas qu'une question de confort.

Arborescence

Ce qui a été livré.

  • Site produit
  • Vue client (QR)
  • Tableau de bord restaurateur
  • Tarifs
  • Compte
Méthode

Le déroulé du projet.

  1. Vue client

    Prototype mobile testé en salle avant toute ligne de back-office.

  2. Back-office

    Cartes, catégories, disponibilités, horaires.

  3. Commande et paiement

    Temps réel cuisine, prestataire de paiement.

  4. Analytics

    Fréquentation, plats les plus vus, panier moyen.

Questions

Ce qu'on nous demande souvent.

Non, et c'est le point qui fait la différence. Le scan ouvre une page web ; tout se joue dans le navigateur du téléphone. Une application installée aurait perdu neuf clients sur dix avant la première commande.

D'autres réalisations

Revenir au portfolio

Le même niveau d'exigence, pour votre site.

Audit gratuit de votre site actuel, devis sous 24 h et un raisonnement écrit — comme celui que vous venez de lire. Paiement en trois fois sans frais, aides locales vérifiées avant signature.

Prendre rendez-vousVoir les tarifs
Partager