Tableo
QR-код ресторана должен был перестать быть PDF-файлом и стать каналом продаж.
- Год
- 2026
- Разработка
- 9 недель
- Стек
- React · TypeScript · Vite · Supabase · Vercel
- Продуктовый дизайн
- Мобильный дизайн
- Разработка
- База данных
- Платежи
Продукт Kayzen Web, доступный на адресе предпросмотра Vercel до перехода на окончательный домен.
- открытие меню после сканирования
- < 1 с
- производительность в Lighthouse
- 91/100
- доступность в LighthouseНиже нашего порога в 95: замечание касается контрастов меню, повторяющих цвета каждого ресторана; их исправление запланировано на следующий проход.
- 87/100
Какую задачу нужно было решить.
Контекст
Tableo превращает QR-код на столике ресторана в полноценный интерфейс: актуальное меню, заказ, оплата, сбор отзывов и данные о посещаемости.
Ограничение
У QR-кода плохая репутация с 2020 года, потому что сначала он служил для показа нечитаемого PDF. Продукт должен был стереть это воспоминание с первого мобильного экрана — в неблагоприятных условиях: шумный зал, одна рука, перегруженная сеть, торопящийся гость.
Решение
Сначала проектировать экран гостя, а не бэк-офис. Меню открывается меньше чем за секунду, без установки, без учётной записи, и им удобно пользоваться одной рукой. Панель управления ресторатора появилась потом — в рамках тех данных, которые экран гостя реально создаёт.
Показатели на момент сдачи.
Оценки Lighthouse для сайта в рабочей среде. Мы публикуем их как есть: если какая-то оценка низкая, её причина и план исправления описаны ниже, а не замалчиваются.
Каждое решение — и его причина.
Создано для большого пальца
Навигация по категориям закреплена внизу экрана, в зоне досягаемости большого пальца. Сенсорные цели — не меньше 44 px. Меню ресторана смотрят стоя, одной рукой, с бокалом в другой.
Фотографии — по желанию, а не обязательно
Немногие рестораны располагают достойными фотографиями всех блюд. Меню остаётся элегантным и без изображений; фотографии, если они есть, — бонус, а не каркас страницы.
Панель управления, читаемая с одного взгляда
Ресторатор смотрит на панель между двумя сменами. Три цифры вверху, остальное — ниже первого экрана. Никаких графиков, требующих внимательного изучения.
Палитра проекта
Сепия
#7C4A21
Фирменный стиль, заголовки
Кремовый
#FBF7F0
Фон меню
Чернила
#1C1917
Текст
Зелёный заказа
#15803D
Подтверждение
Типографическая система
Заголовки
Outfit 700
Основной текст
Inter 400
Цены набраны табличными цифрами с выравниванием вправо: криво выровненный столбец цен читается как небрежное меню.
Что внутри.
- React
- TypeScript
- Vite
- Supabase
- Vercel
Supabase в реальном времени
Заказы поступают на кухню мгновенно через подписку в реальном времени. Периодическое обновление добавило бы задержку там, где она заметнее всего.
Изоляция по заведениям
Построчные политики доступа: ресторан структурно не может прочитать данные другого. В мультитенантном продукте это правило принадлежит базе данных, а не прикладному коду.
Делегированная оплата
Данные карт вообще не проходят через продукт. Ввод и соответствие PCI обеспечивает платёжный провайдер; для команды такого размера это единственный разумный выбор.
Как сайт становится находимым.
SEO работает на продажу программного продукта
Меню ресторана не предназначено для индексации — оно меняется каждый день и не отвечает ни на один запрос. Продвижение нацелено на «программа для заказа за столиком», «QR-код меню ресторана» — запросы ресторатора.
Удобно для всех.
С июня 2025 года Европейский акт о доступности (European Accessibility Act) требует цифровой доступности для значительной части онлайн-сервисов. Мы закладываем её на этапе проектирования, а не исправляем задним числом.
Пересмотренные контрасты меню
Меню ресторанов злоупотребляют светло-серым на белом. Все пары выше 4,5:1, включая цены и указания аллергенов, — читаемость которых не только вопрос удобства.
Что было сдано.
- Сайт продукта
- Экран гостя (QR)
- Панель управления ресторатора
- Тарифы
- Учётная запись
Ход проекта.
Экран гостя
Мобильный прототип, протестированный в зале до первой строки бэк-офиса.
Бэк-офис
Меню, категории, наличие, часы работы.
Заказ и оплата
Кухня в реальном времени, платёжный провайдер.
Аналитика
Посещаемость, самые просматриваемые блюда, средний чек.
О чём нас часто спрашивают.
Другие проекты
Соответствие GDPR & SaaSKonsent by Kayzen
Разработчик баннеров, который сам же их проверяет, — судья в собственном деле: независимость и была продуктом.
Наступательная кибербезопасность & SaaSSentinel by Kayzen
Продавать продукт безопасности инженерам: каждое утверждение должно было быть доказуемым.
Данные & МетеосервисMétéo Climat France
358 индексируемых страниц, анимированная карта на 72 срока — и ни одной строчки фреймворка.
Тот же уровень требований — для вашего сайта.
Бесплатный аудит вашего текущего сайта, смета в течение 24 часов и письменное обоснование — такое же, как то, что вы только что прочитали. Оплата в три этапа без переплаты; местные программы поддержки проверяются до подписания.