UX/UI дизайн foodtech-приложений и сайтов

Почему foodtech-дизайн нельзя делать «как обычный»

Большинство digital-агентств делает UX/UI универсально — те же подходы, что для банка, e-commerce и foodtech. Это ошибка. Foodtech живёт по другим правилам:

• Скорость отклика критична. Пользователь собирает корзину пиццы в метро по дороге домой за 30–60 секунд. Любая задержка — потерянный заказ.
• Фотография продаёт еду больше, чем текст. Карточка блюда без качественного фото снижает конверсию в добавление в корзину в 2–3 раза.
• Конструкторы блюд — отдельный класс UX-задач. Конструктор пиццы, сета суши, индивидуального торта — это не просто «выбор опций», а путь с 8–15 решениями и расчётом цены в реальном времени.
• Программа лояльности — ядро удержания, а не «дополнение». В кофейне и пиццерии 60–80% выручки даёт лояльная аудитория. Дизайн должен делать карту лояльности доступной в один тап с любого экрана.
• Чек-аут с учётом российской регуляторики — СБП, ОФД, фискальный чек. Половина зарубежных foodtech-паттернов в РФ просто не работает без локализации.

Мы 14+ лет проектируем foodtech-интерфейсы для лидеров рынка: Burger King (7 млн пользователей, 85% продаж в digital), KFC, Додо Пиццу (№1 в App Store и Google Play), Delivery Club, сеть пекарен Хлебник. Это не общий дизайн-конвейер, а специализированная экспертиза в нише.

Если нужен общий UX/UI-дизайн вне foodtech — это наша основная услуга. А здесь — именно про foodtech-интерфейсы.

5 главных UX-задач foodtech-приложения

1. Заказ за 5 секунд

Главная метрика foodtech-дизайна — время от открытия приложения до оплаченного заказа: 30–90 секунд для постоянного клиента, до 3–4 минут для нового. Ускоряем все четыре шага: push ведёт сразу на нужный экран без обучения; последний заказ и избранное — в один тап; корзина считает стоимость и время доставки на лету; оплата по биометрии через Apple/Google Pay или СБП без ввода реквизитов.

2. Фотопрезентация блюд

Карточка блюда — основной коммерческий экран. Работает: большое качественное фото (а не «лоток на кухне»), узнаваемые бейджи (острое / постное / новинка / хит), крупная цена рядом с рейтингом и числом покупок («10 000+ заказали в этом месяце»), фото-отзывы гостей, модификаторы и аллергены без перегрузки экрана.

3. Конструкторы блюд

Конструктор пиццы, сета суши, индивидуального торта, кофейной композиции — сложный UX: пошаговая логика (тесто → соус → начинка → дополнения) вместо «всё на одном экране», визуализация собранного блюда, расчёт цены на лету, сохранение своего рецепта в избранное, подсказки «попробуйте добавить…». Конструктор даёт +15–25% к среднему чеку — наш кейс Burger King 3D с AR-визуализацией бургера.

4. Программа лояльности и геймификация

Бонусный счёт виден на каждом экране, а не спрятан в личном кабинете. Прогресс-бар «до бесплатной 5-й пиццы», статусы клиента с разблокировкой бонусов, сюрприз-механики («у вас есть бесплатная пицца — заберите сегодня»), реферальная программа с прозрачным трекингом приведённых друзей.

5. Чек-аут с локальной регуляторикой

Что критично в РФ: СБП первым вариантом оплаты (ниже комиссия, выше доверие), обязательные Apple/Google Pay, оплата накопленными бонусами, подтверждение возраста для алкоголя прямо в чек-ауте, чек ОФД в email/Telegram сразу после оплаты, адрес доставки через карту с автоопределением.

7 типовых UX-ошибок в foodtech

На аудитах foodtech-приложений мы регулярно видим одни и те же ошибки — вот что чаще всего ломает конверсию.

1. Цена доставки скрыта до чек-аута. Гость собрал корзину, перешёл к оплате — увидел +300 ₽ и ушёл. Стоимость доставки видна с момента ввода адреса.
2. Длинная регистрация перед заказом. «Имя, фамилия, телефон, email, пароль» — половина новых клиентов уходит. Регистрация после первого заказа или в один тап (по SMS / Госуслугам).
3. Меню без поиска и фильтров. 100+ позиций без фильтра «без рыбы» или «острое» — гость не находит нужное и закрывает приложение.
4. Карточка блюда без явной кнопки «в корзину». Кнопка фиксированно прижата к низу экрана, а не спрятана внизу страницы.
5. Адрес доставки на разных экранах. Все поля адреса собираются в один экран сразу, а не «уточните подъезд» на чек-ауте и «уточните этаж» по звонку курьера.
6. Программа лояльности спрятана в личном кабинете. Бонусный счёт всегда в шапке приложения, иначе гость о нём забывает.
7. Нет push «ваш заказ готов». Курьер уже у двери, а гость не знает — сценарий, где push критичен.

Подробнее про распространённые ошибки — в статье «5 ошибок UX, которые уводят пользователей». На аудитах foodtech-приложений мы находим в среднем 12–18 таких проблем за один проект.

Дизайн-паттерны под 6 форматов foodtech

Универсальный foodtech-дизайн не работает — у каждого формата свои UX-приоритеты. Мы строим дизайн-систему под конкретную бизнес-модель.

Ресторан с залом

Баланс между бронированием столиков и доставкой: бронь на видном месте, фото-каталог меню, истории шеф-повара, лояльность. Подробнее — приложение для ресторана.

Агрегатор доставки еды

Поиск и фильтры сотен ресторанов, время доставки видно сразу, трекинг курьера в реальном времени, единая лояльность через все рестораны. Кейс — Delivery Club. Подробнее — приложение агрегатора.

E-grocery / онлайн-супермаркет

Тысячи позиций с быстрым поиском и фильтрами, корзина с расчётом стоимости и веса, остатки в реальном времени, выбор слота доставки. Подробнее — приложение для e-grocery.

Кофейня и кафе

Click-and-collect в центре, лояльность с накопительной картой в шапке, предзаказ к конкретному времени, малый чек с быстрым чек-аутом. Подробнее — приложение для кофейни и кафе.

Пиццерия

Конструктор пиццы как центральный экран, family-заказы с приглашением друзей, лояльность «5+1» или подписка, горячая доставка с трекингом. Кейс — Додо Пицца. Подробнее — приложение для пиццерии.

Суши-бар и доставка роллов

Конструктор сетов и роллов, фото-каталог с подробным составом, групповые заказы на компанию, подарок на день рождения, доставка с холодовой цепью. Подробнее — приложение для суши-бара.

Что входит в услугу дизайна

Делаем полный цикл — от исследования до передачи макетов в разработку. Можем взять любую часть отдельно или весь процесс под ключ.

Отдельно берём UX-исследования (глубинные интервью, анализ конкурентов, карта пути клиента), прототипирование и UX-тестирование гипотез до разработки и авторский надзор на этапе реализации.

Дизайн-процесс под foodtech

Полный цикл — 9–14 недель. Редизайн или расширение обычно быстрее: 4–8 недель в зависимости от объёма.

Инструменты

Кейсы Surf

Мы создаём foodtech-продукты для лидеров рынка — от стартапов до федеральных сетей. Несколько релевантных проектов из портфеля (полный — на странице foodtech-практики):

Команда на проекте

Состав зависит от объёма проекта:

• Lead UX/UI-дизайнер — стратегия и финальное качество.
• UX-исследователь — глубинные интервью, аналитика, анализ задач пользователя.
• UI / визуальный дизайнер — визуальный язык, дизайн-система, иконки.
• Прототипист — кликабельные прототипы для тестирования.
• Motion-дизайнер — анимации, переходы, моушн-айдентика (для премиум-проектов).
• 3D-художник / иллюстратор — кастомные иллюстрации, 3D-модели блюд (для AR-уровня).
• Проектный менеджер — синхронизация с командой разработки.

Гарантии и SLA

• 100% сдачи дизайна в срок.
• NDA и права на дизайн. Все файлы Figma, ассеты, иллюстрации — у заказчика.
• Прозрачная отчётность. Демо каждые 2 недели, доступ к рабочим файлам.
• Авторский надзор после передачи в разработку. Контролируем реализацию.
• Дизайн под iOS и Android по гайдам Apple и Google.

Стоимость и сроки

Кастомный дизайн не имеет фиксированного прайса. Точная стоимость считается после короткого discovery под объём и тип проекта.

В стоимость входят: discovery, исследование, структура экранов, визуальный дизайн, дизайн-система, прототипы, передача в разработку, 4 недели авторского надзора.