SaaS & Gastronomie

Tableo

Der QR-Code des Restaurants sollte kein PDF mehr sein, sondern ein Vertriebskanal.

Jahr
2026
Umsetzung
9 Wochen
Stack
React · TypeScript · Vite · Supabase · Vercel
  • Product Design
  • Mobile Design
  • Entwicklung
  • Datenbank
  • Bezahlung
Website besuchen(neuer Tab)Über ein ähnliches Projekt sprechen

Ein Produkt von Kayzen Web, bis zur endgültigen Domain unter einer Vercel-Vorschauadresse erreichbar.

https://tableo-sepia.vercel.app/
Startseite der Website Tableo — SaaS & Gastronomie, erstellt von Kayzen Web
bis die Karte nach dem Scan geöffnet ist
< 1 s
Lighthouse-Performance
91/100
Lighthouse-BarrierefreiheitUnter unserer Schwelle von 95: Die Kontraste der Karte, die sich an den Farben des jeweiligen Restaurants orientieren, sind der beanstandete Punkt; ihre Korrektur ist für den nächsten Durchgang eingeplant.
87/100
Die Ausgangslage

Was gelöst werden musste.

Der Kontext

Tableo macht aus dem QR-Code auf dem Restauranttisch eine vollständige Oberfläche: aktuelle Speisekarte, Bestellung, Bezahlung, Sammeln von Bewertungen und Besucherdaten.

Die Einschränkung

Der QR-Code hat seit 2020 einen schlechten Ruf, weil er zunächst dazu diente, ein unlesbares PDF anzuzeigen. Das Produkt musste diese Erinnerung schon auf dem ersten mobilen Bildschirm vertreiben – in einem ungünstigen Umfeld: lauter Gastraum, eine Hand frei, überlastetes Netz, eiliger Gast.

Die Antwort

Zuerst die Gästeansicht gestalten, niemals das Backoffice. Die Speisekarte öffnet sich in weniger als einer Sekunde, ohne Installation, ohne Konto, und bleibt mit einer Hand lesbar. Das Dashboard für den Gastronomen kam danach, bestimmt von den Daten, die die Gästeansicht tatsächlich erzeugt.

Gemessen, nicht behauptet

Die Werte bei der Auslieferung.

Lighthouse-Werte der Live-Website. Wir veröffentlichen sie unverändert: Ist einer niedrig, stehen Ursache und Korrekturplan weiter unten, statt verschwiegen zu werden.

PageSpeed
91
Performance: 91 von 100
87
Barrierefreiheit: 87 von 100
100
Best Practices: 100 von 100
100
Suchmaschinenoptimierung: 100 von 100
Design & Art Direction

Jede gestalterische Entscheidung – und ihr Grund.

  1. Für den Daumen gestaltet

    Fixierte Kategorienavigation am unteren Bildschirmrand, im Daumenbereich. Touch-Ziele mit mindestens 44 px. Eine Speisekarte wird im Stehen gelesen, mit einer Hand, ein Glas in der anderen.

  2. Fotos optional, niemals Pflicht

    Nur wenige Restaurants haben brauchbare Fotos all ihrer Gerichte. Die Karte bleibt auch ohne Bilder elegant; Fotos sind, wenn vorhanden, ein Bonus und nicht die Struktur der Seite.

  3. Ein Dashboard, das auf einen Blick lesbar ist

    Der Gastronom schaut zwischen zwei Services auf sein Dashboard. Drei Zahlen oben, der Rest darunter. Kein Diagramm, das aufmerksames Lesen erfordert.

Farbpalette des Projekts

  • Sepia

    #7C4A21

    Identität, Kopfzeilen

  • Creme

    #FBF7F0

    Hintergrund der Karte

  • Tinte

    #1C1917

    Text

  • Bestellgrün

    #15803D

    Bestätigung

Typografisches System

Überschriften

Outfit 700

Fließtext

Inter 400

Preise stehen in rechtsbündigen Tabellenziffern: Eine schlecht ausgerichtete Preisspalte liest sich wie eine lieblos gemachte Karte.

Engineering

Was unter der Haube steckt.

  • React
  • TypeScript
  • Vite
  • Supabase
  • Vercel

  1. Supabase in Echtzeit

    Bestellungen erscheinen per Echtzeit-Abonnement live in der Küche. Ein periodisches Aktualisieren hätte Latenz genau dort erzeugt, wo sie am stärksten auffällt.

  2. Trennung nach Betrieb

    Zeilenbasierte Zugriffsrichtlinien: Ein Restaurant kann strukturell nicht die Daten eines anderen lesen. Bei einem mandantenfähigen Produkt gehört diese Regel in die Datenbank, nicht in den Anwendungscode.

  3. Ausgelagerte Bezahlung

    Keine Kartendaten laufen durch das Produkt. Der Zahlungsdienstleister übernimmt Eingabe und PCI-Konformität; für ein Team dieser Größe ist das die einzig vernünftige Wahl.

Suchmaschinenoptimierung

Wie die Website gefunden wird.

  1. Das SEO dient dem Verkauf der Software

    Die Speisekarte eines Restaurants muss nicht indexiert werden – sie ändert sich täglich und beantwortet keine Suchanfrage. Das SEO zielt auf „Software Tischbestellung“, „QR-Code Speisekarte Restaurant“ – die Suchanfragen der Gastronomen.

Barrierefreiheit

Für alle nutzbar.

Seit Juni 2025 schreibt der European Accessibility Act (EU-Richtlinie 2019/882) für einen großen Teil der Online-Dienste digitale Barrierefreiheit vor. Wir berücksichtigen sie schon bei der Konzeption, nicht erst im Nachhinein.

  1. Überarbeitete Kontraste auf der Karte

    Speisekarten setzen übermäßig auf Hellgrau auf Weiß. Alle Farbpaare liegen über 4,5:1, auch Preise und Allergenhinweise – deren Lesbarkeit keine reine Komfortfrage ist.

Seitenstruktur

Was ausgeliefert wurde.

  • Produktwebsite
  • Gästeansicht (QR)
  • Dashboard für Gastronomen
  • Preise
  • Konto
Methode

Der Projektablauf.

  1. Gästeansicht

    Mobiler Prototyp im Gastraum getestet, vor der ersten Zeile Backoffice.

  2. Backoffice

    Karten, Kategorien, Verfügbarkeiten, Öffnungszeiten.

  3. Bestellung und Bezahlung

    Echtzeit in der Küche, Zahlungsdienstleister.

  4. Analytics

    Besucherzahlen, meistgesehene Gerichte, durchschnittlicher Bon.

Fragen

Was man uns oft fragt.

Nein, und genau das macht den Unterschied. Der Scan öffnet eine Webseite; alles spielt sich im Browser des Smartphones ab. Eine zu installierende App hätte neun von zehn Gästen vor der ersten Bestellung verloren.

Weitere Referenzen

Zurück zum Portfolio

Derselbe Anspruch, für Ihre Website.

Kostenloses Audit Ihrer aktuellen Website, Angebot innerhalb von 24 Stunden und eine schriftliche Begründung – wie die, die Sie gerade gelesen haben. Zahlung in drei Raten ohne Aufpreis; lokale Förderungen werden vor der Unterschrift geprüft.

Termin vereinbarenPreise ansehen
Teilen