Tableo
De QR-code van het restaurant moest geen pdf meer zijn, maar een verkoopkanaal.
- Jaar
- 2026
- Ontwerp
- 9 weken
- Stack
- React · TypeScript · Vite · Supabase · Vercel
- Productdesign
- Mobiel design
- Ontwikkeling
- Database
- Betalingen
Product van Kayzen Web, bereikbaar op een Vercel-previewadres in afwachting van het definitieve domein.
- openen van de kaart na het scannen
- < 1 s
- Lighthouse-performance
- 91/100
- Lighthouse-toegankelijkheidOnder onze drempel van 95: de contrasten van de kaart, afgestemd op de kleuren van elk restaurant, zijn het aangestipte punt; het conform maken ervan staat gepland voor de volgende ronde.
- 87/100
Wat er opgelost moest worden.
De context
Tableo maakt van de QR-code op de tafel van een restaurant een volledige interface: actuele menukaart, bestellen, betalen, reviews verzamelen en bezoekersgegevens.
De beperking
De QR-code heeft sinds 2020 een slechte reputatie, omdat hij eerst werd gebruikt om een onleesbare pdf te tonen. Het product moest die herinnering vanaf het eerste mobiele scherm uitwissen, in een ongunstige context — rumoerige zaal, één hand vrij, overbelast netwerk, gehaaste gast.
Het antwoord
Eerst het klantscherm ontwerpen, nooit de backoffice. De menukaart opent in minder dan een seconde, zonder installatie, zonder account, en blijft met één hand leesbaar. Het dashboard van de restauranthouder kwam daarna, begrensd door de gegevens die het klantscherm werkelijk oplevert.
De scores bij oplevering.
Lighthouse-scores van de website in productie. Wij publiceren ze zoals ze zijn: als een score laag is, staan de oorzaak en het verbeterplan hieronder beschreven in plaats van verzwegen.
Elke keuze, en de reden erachter.
Ontworpen voor de duim
Navigatie per categorie, vastgezet onderaan het scherm, in de zone die met de duim bereikbaar is. Aanraakdoelen van minimaal 44 px. Een restaurantkaart raadpleegt men staand, met één hand, met een glas in de andere.
Foto's optioneel, nooit verplicht
Weinig restaurants beschikken over goede foto's van al hun gerechten. De kaart blijft elegant zonder afbeeldingen; foto's zijn, als ze er zijn, een bonus en niet de structuur van de pagina.
Een dashboard dat in één oogopslag leesbaar is
De restauranthouder bekijkt zijn dashboard tussen twee services door. Drie cijfers bovenaan, de rest onder de vouw. Geen enkele grafiek die aandachtig lezen vereist.
Kleurenpalet van het project
Sepia
#7C4A21
Identiteit, headers
Crème
#FBF7F0
Achtergrond van de kaart
Inkt
#1C1917
Tekst
Bestelgroen
#15803D
Bevestiging
Typografisch systeem
Koppen
Outfit 700
Lopende tekst
Inter 400
De prijzen staan in tabulaire cijfers, rechts uitgelijnd: een slecht uitgelijnde prijskolom leest als een slordige kaart.
Wat er onder de motorkap zit.
- React
- TypeScript
- Vite
- Supabase
- Vercel
Supabase realtime
De bestellingen komen via een realtime-abonnement live in de keuken binnen. Periodiek verversen had latentie toegevoegd juist daar waar die het meest opvalt.
Afscherming per zaak
Toegangsbeleid per rij: een restaurant kan structureel de gegevens van een ander niet lezen. Bij een multi-tenantproduct hoort die regel in de database, niet in de applicatiecode.
Uitbestede betaling
Geen enkel kaartgegeven gaat via het product. De betaaldienstverlener regelt de invoer en de PCI-compliance; dat is de enige redelijke keuze voor een team van deze omvang.
Hoe de website vindbaar wordt.
De SEO draait om de verkoop van de software
De menukaart van een restaurant hoeft niet geïndexeerd te worden — ze verandert elke dag en beantwoordt geen enkele zoekopdracht. De vindbaarheid richt zich op “software bestellen aan tafel”, “QR-code menu restaurant”: de zoekopdrachten van de restauranthouder.
Bruikbaar voor iedereen.
Sinds juni 2025 verplicht de Europese toegankelijkheidsrichtlijn (European Accessibility Act) digitale toegankelijkheid voor een groot deel van de onlinediensten. Wij regelen dat in het ontwerp, niet achteraf.
Contrasten op de menukaart herzien
Restaurantkaarten maken misbruik van lichtgrijs op wit. Alle paren zitten boven 4,5:1, ook de prijzen en de allergenenvermeldingen — waarvan de leesbaarheid niet alleen een kwestie van comfort is.
Wat er is opgeleverd.
- Productwebsite
- Klantscherm (QR)
- Dashboard van de restauranthouder
- Tarieven
- Account
Het verloop van het project.
Klantscherm
Mobiel prototype in de zaal getest vóór elke regel backoffice.
Backoffice
Kaarten, categorieën, beschikbaarheid, openingstijden.
Bestellen en betalen
Realtime in de keuken, betaaldienstverlener.
Analytics
Bezoekersaantallen, meest bekeken gerechten, gemiddelde besteding.
Wat ons vaak gevraagd wordt.
Andere projecten
AVG/GDPR-compliance & SaaSKonsent by Kayzen
Een bannerleverancier die banners audit, is rechter en partij: onafhankelijkheid wás het product.
Offensieve cybersecurity & SaaSSentinel by Kayzen
Een securityproduct verkopen aan engineers: elke bewering moest aantoonbaar zijn.
Data & WeerdienstMétéo Climat France
358 indexeerbare pagina's, een geanimeerde kaart over 72 tijdstappen — en geen enkele regel framework.
Hetzelfde niveau van zorg, voor uw website.
Gratis audit van uw huidige website, offerte binnen 24 uur en een schriftelijke onderbouwing — zoals die u net hebt gelezen. Betaling in drie termijnen zonder extra kosten; lokale subsidies gecontroleerd vóór ondertekening.