FoodBot

• Роль. Единственный дизайнер в команде, отвечал за весь дизайн продукта.

• Срок. 11 месяцев.

• Старт. Редизайн: прежний интерфейс не доводил владельцев кафе до запуска бота и приёма заказов.

• Что сделал. Исследование, сценарии, админ-панель, Telegram Mini App, лендинг, дизайн-систему и передачу в разработку.

• Итог. Три платформы в одной дизайн-системе: ~174 экрана админ-панели, 150+ экранов мини-приложения и лендинг.

Переработать UX/UI административной панели (личного кабинета) для владельцев общепита.

Бизнес-цели: чтобы больше владельцев доходили до запуска бота, реже пропускали заказы и реже обращались в поддержку.

Главное условие: интерфейс понятен людям без технических знаний — настройка сложного бота должна проходить так же легко, как заполнение профиля в соцсети.

Техническое ограничение от клиента: мобильная админка работает как Telegram Mini App — внутри встроенного браузера Telegram. У него свои системные кнопки, оформление подстраивается под тему Telegram пользователя, а при открытой клавиатуре по высоте остаётся мало места.

Аудитория. Владельцы кафе, бургерных, суши-баров и кофеен всё время в движении и пропускают заказы, потому что не видят уведомлений. Вывод: управление должно быть под рукой, с телефона и с уведомлениями.

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

Язык интерфейса. Владельцев пугают термины вроде «API-токен» и многоуровневые настройки. Вывод: технические шаги нужно перевести на человеческий язык.

Варианты сравнил по трём критериям: снижает ли порог входа для человека без технических знаний, решает ли проблему пропущенных заказов, сколько стоит в разработке.

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

Б — обучение и поддержка. Видеоинструкции и быстрая поддержка. Но сложность перекладывается на поддержку, а пропущенные заказы остаются.

В — интерфейс, который ведёт сам. Пошаговая инструкция вместо технических полей, меню в виде наглядных карточек, контекстные подсказки и управление с телефона в Telegram.

Выбрал В: он снижает нагрузку и время до запуска бота и переносит управление туда, где владелец проводит весь день, — в телефон. Риск — мобильная версия в Telegram требовала отдельной большой работы; я вынес его на защиту как бизнес-решение.

Голубой, который не читался на белом. В первой версии основной голубой цвет на белом фоне был недостаточно контрастным: подписи, ссылки и второстепенные кнопки читались с трудом, особенно на телефоне на ходу. Это показала проверка макетов на контрастность. Я скорректировал оттенок — текст и элементы управления стали читаться уверенно, а фирменный характер цвета сохранился.

Проверка без дорогого теста. Чтобы не ждать A/B-теста, я собрал инструмент, который строит тепловую карту внимания под конкретную аудиторию. Он подтвердил, что внимание на ключевых экранах распределяется по задуманному сценарию, — решения пошли в разработку с проверкой, а не на веру.

Показал клиенту всю цепочку: от болей владельцев кафе до решений в макетах.

Мобильная версия — в приоритете. Адаптив под Telegram Mini App требовал отдельной работы, но именно он решает проблему пропущенных заказов. Меньше настроек на виду. Вместо гонки функций интерфейс выигрывает тем, что в нём разберётся человек без технических знаний.

Макеты передал системно: экраны, состояния и модальные окна собраны на Auto Layout и привязаны к UI-киту с дизайн-системой, анимации прокомментированы. Лендинг, админ-панель и мини-приложение живут в одной дизайн-системе — новые модули добавляются быстро и без развала стиля.

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

Продуктовые — как работает продукт и как с ним взаимодействуют

• Подключение бота за 5 шагов: отказы на онбординге −25%.

• Контекстные подсказки: время настройки −30%, обращения в поддержку −20% — большинство вопросов закрывается прямо в интерфейсе.

• Админка в Telegram Mini App: пропущенные заказы −40% — пульт управления доставкой теперь в кармане.

• Экраны под этап работы: новичка ведут к первому боту, опытному оставляют быстрый доступ к управлению.

• Одна дизайн-система на три платформы: скорость разработки новых модулей +20%.

Коммуникационные — как продукт доносит ценность до аудитории

• Технический язык стал человеческим: вместо «API-токена» — понятные шаги с выделенными командами.

• Интерфейс выглядит как привычный конструктор, а не «сложная база данных» — владелец видит, что справится сам.

• Меню в виде наглядных карточек: владелец видит меню так же, как его увидит гость в боте.

• Контрастный и читаемый интерфейс: после правки голубого всё читается на ходу, с телефона.

3 платформы · ~174 экрана админ-панели (94 + 80 адаптивных) · ~150+ экранов мини-приложения · 4 страницы лендинга · 12 страниц в Figma