Tableo
O código QR do restaurante deixava de ser um PDF para passar a ser um canal de vendas.
- Ano
- 2026
- Conceção
- 9 semanas
- Stack
- React · TypeScript · Vite · Supabase · Vercel
- Product design
- Design móvel
- Desenvolvimento
- Base de dados
- Pagamento
Produto editado pela Kayzen Web, disponível num endereço de pré-visualização Vercel enquanto aguarda o seu domínio definitivo.
- abertura do menu após a leitura do código
- < 1 s
- desempenho Lighthouse
- 91/100
- acessibilidade LighthouseAbaixo do nosso limiar de 95: os contrastes do menu, decalcados das cores de cada restaurante, são o ponto assinalado; a sua correção está planeada para a próxima intervenção.
- 87/100
O que era preciso resolver.
O contexto
O Tableo transforma o código QR colocado na mesa de um restaurante numa interface completa: menu atualizado, pedido, pagamento, recolha de avaliações e dados de afluência.
A restrição
O código QR tem má reputação desde 2020, porque serviu primeiro para apresentar um PDF ilegível. O produto tinha de apagar essa memória logo no primeiro ecrã do telemóvel, num contexto desfavorável — sala ruidosa, uma mão, rede saturada, cliente com pressa.
A resposta
Conceber primeiro a vista do cliente, nunca o back-office. O menu abre em menos de um segundo, sem instalação, sem conta, e lê-se com uma só mão. O painel do restaurador veio depois, condicionado pelos dados que a vista do cliente produz de facto.
As pontuações registadas na entrega.
Pontuações Lighthouse do site em produção. Publicamo-las tal como estão: quando uma delas é baixa, a causa e o plano de correção estão descritos mais abaixo, em vez de serem omitidos.
Cada opção, e a sua razão.
Concebido para o polegar
Navegação por categorias fixa no fundo do ecrã, na zona ao alcance do polegar. Alvos táteis de 44 px no mínimo. Um menu de restaurante consulta-se de pé, com uma mão, e com um copo na outra.
Fotografias facultativas, nunca obrigatórias
Poucos restaurantes têm fotografias decentes de todos os pratos. O menu mantém-se elegante sem imagens; as fotografias, quando existem, são um bónus e não a estrutura da página.
Painel legível num relance
O restaurador consulta o painel entre dois serviços. Três números no topo, o resto mais abaixo. Nenhum gráfico que exija uma leitura atenta.
Paleta do projeto
Sépia
#7C4A21
Identidade, cabeçalhos
Creme
#FBF7F0
Fundo do menu
Tinta
#1C1917
Texto
Verde pedido
#15803D
Confirmação
Sistema tipográfico
Títulos
Outfit 700
Texto corrido
Inter 400
Os preços usam algarismos tabulares alinhados à direita: uma coluna de preços mal alinhada lê-se como um menu feito à pressa.
O que está por baixo do capô.
- React
- TypeScript
- Vite
- Supabase
- Vercel
Supabase em tempo real
Os pedidos chegam à cozinha em direto, por subscrição em tempo real. Uma atualização periódica teria acrescentado latência exatamente onde ela mais se nota.
Isolamento por estabelecimento
Políticas de acesso por linha: um restaurante não pode, por construção, ler os dados de outro. Num produto multi-inquilino, esta regra pertence à base de dados, não ao código aplicacional.
Pagamento delegado
Nenhum dado de cartão passa pelo produto. O prestador de pagamentos gere a introdução dos dados e a conformidade PCI; é a única escolha razoável para uma equipa desta dimensão.
Como o site se torna encontrável.
O SEO incide sobre a venda do software
O menu de um restaurante não tem vocação para ser indexado — muda todos os dias e não responde a nenhuma pesquisa. O SEO visa «logiciel commande à table» (software de pedidos à mesa), «QR code menu restaurant» — pesquisas do restaurador.
Utilizável por todos.
Desde junho de 2025, o Ato Europeu da Acessibilidade exige a acessibilidade digital a uma grande parte dos serviços online. Tratamo-la na conceção, não como correção posterior.
Contrastes revistos no menu
Os menus de restaurante abusam do cinzento-claro sobre branco. Todos os pares estão acima de 4,5:1, incluindo os preços e as menções de alergénios — cuja legibilidade não é apenas uma questão de conforto.
O que foi entregue.
- Site do produto
- Vista do cliente (QR)
- Painel do restaurador
- Preços
- Conta
As etapas do projeto.
Vista do cliente
Protótipo móvel testado em sala antes de qualquer linha de back-office.
Back-office
Menus, categorias, disponibilidades, horários.
Pedido e pagamento
Cozinha em tempo real, prestador de pagamentos.
Analytics
Afluência, pratos mais vistos, valor médio por pedido.
O que nos perguntam com frequência.
Outros projetos
Conformidade RGPD & SaaSKonsent by Kayzen
Um editor de banners que audita banners é juiz em causa própria: a independência era o produto.
Cibersegurança ofensiva & SaaSSentinel by Kayzen
Vender um produto de segurança a engenheiros: cada afirmação tinha de ser demonstrável.
Dados & Serviço meteorológicoMétéo Climat France
358 páginas indexáveis, um mapa animado em 72 horizontes — e nem uma linha de framework.
O mesmo nível de exigência, para o seu site.
Auditoria gratuita do seu site atual, orçamento em 24 h e um raciocínio por escrito — como o que acabou de ler. Pagamento em três prestações sem juros; apoios locais verificados antes da assinatura.