FoodBot
FoodBot — это SaaS-платформа, позволяющая запускать без написания кода собственные WebApp чат-боты внутри Telegram для приёма заказов на доставку еды.
в этом кейсе
−40% пропущенных заказов — одно решение перенесло админку туда, где владелец и так проводит весь день.
−25% отказов на онбординге — «API-токен» перестал пугать владельцев кафе.
−30% времени до запуска бота и −20% обращений в поддержку — без новых фич, только за счёт UX.
~324 экрана на 3 платформах в одной дизайн-системе — и +20% к скорости разработки.
product design/b2b
Задача
Разработать интуитивно понятный, современный UX/UI дизайн административной панели (личного кабинета) для владельцев общепита. Интерфейс должен быть понятен пользователям без технических знаний. Настройка сложного бота должна проходить так же легко, как заполнение профиля в соцсетях.
Решение
Продуктовая аналитика
Целевая аудитория - это владельцы малого и среднего бизнеса в сфере HoReCa (кафе, бургерные, суши-бары, кофейни). Очень мало свободного времени и высокая мобильность. Часто долго обрабатывают заказы либо вовсе пропускают их из-за отсутствия каких-либо уведомлений.
Сервисы предлагают гибкую настройку ботов с большим обилием функционала. Изучил сервисы конкурентов и понял, что они никак не помогают пользователям в процессе целевого действия. Из-за этого приходится тратить больше времени на самостоятельное изучение методом проб и ошибок. Как итог, у пользователя уходит больше времени на первую настройку и запуск бота, что очень критично для владельцев бизнесов.
Для ускорения UX-ресёрча я выгрузил сценарии работы, документацию и отзывы пользователей о платформах-конкурентах, после чего проанализировал этот массив данных с помощью LLM. Нейросеть помогла быстро кластеризовать ключевые боли и выявить системную слабость рынка. Это сэкономило часы ручного аудита и позволило сразу сфокусироваться на решениях, снижающих порог входа.
Гипотеза
Владельцев ресторанов пугают термины вроде «API-токен» и сложные многоуровневые настройки ботов. Если разбить процесс технической интеграции на простую пошаговую инструкцию, перевести управление меню в формат наглядных карточек и добавить контекстные подсказки, мы снизим когнитивную нагрузку и сократим время выполнения целевого действия и уменьшим количество обращений в техподдержку. Если сделать адаптив для Telegram Mini App и MAX, то уменьшим время обработки и кол-во пропущенных заказов за счёт того, что весь функционал будет в мобильном формате с возможностью уведомлений.
Что было сделано
Упростил технические этапы: На экране подключения бота вместо одного пугающего поля ввода я спроектировал линейную, пронумерованную инструкцию из 5 простых шагов по работе с BotFather. Текст написан человеческим языком с выделением ключевых команд и ссылками.
Загрузил сухую техническую документацию BotFather в нейросеть с промптом адаптировать алгоритм действий для нетехнической аудитории, разбив его на короткие шаги. Это сэкономило время на ручной редактуре интерфейсных текстов.
Проработаны разные состояния экранов, в зависимости этапа работы с продуктом. Для примера взял главный экран с ботами. Когда созданных ботов еще нет, центральное расположение единственного CTA минимизирует когнитивную нагрузку и жестко направляет к главному действию — активации (созданию первого бота).
После создания бота, наиболее частой задачей становится управление ботами, поэтому паттерн внимания логично распределился по карточкам готовых ботов и панели фильтрации/поиска. При этом, кнопка создания бота осталась в тёплой зоне внимания.
Я завайбкодил инструмент, который анализирует интерфейсы и создаёт heatmap на основе конкретной целевой аудитории. Инструмент подтвердил, что фокус внимания распределяется строго по задуманному сценарию. Это позволило математически обосновать интерфейсные решения и сэкономить ресурсы на классическом А/В тестировании.
Contextual Help (контекстные подсказки). В интерфейс была внедрена система контекстных подсказок. Рядом с неочевидными настройками размещены триггеры помощи, открывающие модальные окна с понятными объяснениями и примерами данных и того, как это будет выглядеть. Это позволяет пользователю моментально понять принцип работы функции или тип информации для заполнения. Всё это происходит не покидая текущий экран и не обращаясь в техподдержку, что снижает порог входа в продукт и драгоценное время пользователя.
Разработал адаптив админки для Telegram Mini App. Это было критически важным бизнес-решением. Владельцы и менеджеры общепита редко сидят за десктопом, они всегда в зале или в разъездах. Перенос панели управления в формат мини-приложения в Telegram позволил им ставить блюда в стоп-лист, менять цены, запускать рассылки, управлять заказами прямо на ходу со своего смартфона и быть всегда в курсе новых.
Черновая сборка экранов для Telegram Mini App была автоматизирована с помощью AI-агента в Figma на базе нативного UI-кита Telegram. Это избавило от механической рутины по расстановке базовых компонентов и позволило кратно ускорить этап проектирования.
Developer-friendly передача макетов: Дизайн-проект выстроен системно. Все экраны, состояния элементов и модальные окна максимально упорядочены, собраны на Auto Layout и привязаны к глобальному UI-киту с дизайн-системой, стилями, компонентами со всеми состояниями. Оставлены комментарии в анимациях. Макеты передаются в чистом и предсказуемом виде, что делает процесс внедрения удобным для всех участников команды и кратно сокращает время на разработку.
Переименование слоев, создание стилей и переменных, чистка от лишних Auto Layout, структурирование дерева компонентов, автоматическая генерация текстовых комментариев, создание удобной дизайн-системы для разработчиков и других участников - всё это было сделано с помощью figma-агента. Это сэкономило мне часы времени на организацию макетов.
Результат
Снизился порог входа и показатель отказов на 25%: Интерфейс перестал выглядеть как «сложная база данных» и стал восприниматься как привычный конструктор или соцсеть.
Сократилось время настройки на 30%: Благодаря пошаговым инструкциям и контекстным подсказкам пользователи могут быстрее и без ошибок собрать меню и запустить бота.
Снижение нагрузки на поддержку на 20%: Контекстные подсказки закрывают большинство вопросов пользователей прямо в интерфейсе до того, как они успеют запутаться.
Уменьшилось количество пропущенных заказов на 40%: Благодаря мобильной версии в Telegram Mini App, владельцы бизнеса получили полноценный пульт управления доставкой прямо в кармане, что радикально ускорило их реакцию на операционные процессы ресторана.
Ускорение разработки на 20% за счёт масштабируемости: Компоненты и стили заложили фундамент для быстрого внедрения новых модулей платформы без развала общего визуального стиля.
Платформы 3 (лендинг, админ-панель, мини-приложение)
Экранов админ-панели ~174 (94 + 80 адаптивных)
Экранов мини-приложения ~150+
Страниц лендинга 4 (desktop, mobile, блог, статья)
Страниц в Figma 12
FoodBot
FoodBot — это SaaS-платформа, позволяющая запускать без написания кода собственные WebApp чат-боты внутри Telegram для приёма заказов на доставку еды.
в этом кейсе
−40% пропущенных заказов — одно решение перенесло админку туда, где владелец и так проводит весь день.
−25% отказов на онбординге — «API-токен» перестал пугать владельцев кафе.
−30% времени до запуска бота и −20% обращений в поддержку — без новых фич, только за счёт UX.
~324 экрана на 3 платформах в одной дизайн-системе — и +20% к скорости разработки.
product design/b2b
Задача
Разработать интуитивно понятный, современный UX/UI дизайн административной панели (личного кабинета) для владельцев общепита. Интерфейс должен быть понятен пользователям без технических знаний. Настройка сложного бота должна проходить так же легко, как заполнение профиля в соцсетях.
Решение
Продуктовая аналитика
Целевая аудитория - это владельцы малого и среднего бизнеса в сфере HoReCa (кафе, бургерные, суши-бары, кофейни). Очень мало свободного времени и высокая мобильность. Часто долго обрабатывают заказы либо вовсе пропускают их из-за отсутствия каких-либо уведомлений.
Сервисы предлагают гибкую настройку ботов с большим обилием функционала. Изучил сервисы конкурентов и понял, что они никак не помогают пользователям в процессе целевого действия. Из-за этого приходится тратить больше времени на самостоятельное изучение методом проб и ошибок. Как итог, у пользователя уходит больше времени на первую настройку и запуск бота, что очень критично для владельцев бизнесов.
Для ускорения UX-ресёрча я выгрузил сценарии работы, документацию и отзывы пользователей о платформах-конкурентах, после чего проанализировал этот массив данных с помощью LLM. Нейросеть помогла быстро кластеризовать ключевые боли и выявить системную слабость рынка. Это сэкономило часы ручного аудита и позволило сразу сфокусироваться на решениях, снижающих порог входа.
Гипотеза
Владельцев ресторанов пугают термины вроде «API-токен» и сложные многоуровневые настройки ботов. Если разбить процесс технической интеграции на простую пошаговую инструкцию, перевести управление меню в формат наглядных карточек и добавить контекстные подсказки, мы снизим когнитивную нагрузку и сократим время выполнения целевого действия и уменьшим количество обращений в техподдержку. Если сделать адаптив для Telegram Mini App и MAX, то уменьшим время обработки и кол-во пропущенных заказов за счёт того, что весь функционал будет в мобильном формате с возможностью уведомлений.
Что было сделано
Упростил технические этапы: На экране подключения бота вместо одного пугающего поля ввода я спроектировал линейную, пронумерованную инструкцию из 5 простых шагов по работе с BotFather. Текст написан человеческим языком с выделением ключевых команд и ссылками.
Загрузил сухую техническую документацию BotFather в нейросеть с промптом адаптировать алгоритм действий для нетехнической аудитории, разбив его на короткие шаги. Это сэкономило время на ручной редактуре интерфейсных текстов.
Проработаны разные состояния экранов, в зависимости этапа работы с продуктом. Для примера взял главный экран с ботами. Когда созданных ботов еще нет, центральное расположение единственного CTA минимизирует когнитивную нагрузку и жестко направляет к главному действию — активации (созданию первого бота).
После создания бота, наиболее частой задачей становится управление ботами, поэтому паттерн внимания логично распределился по карточкам готовых ботов и панели фильтрации/поиска. При этом, кнопка создания бота осталась в тёплой зоне внимания.
Я завайбкодил инструмент, который анализирует интерфейсы и создаёт heatmap на основе конкретной целевой аудитории. Инструмент подтвердил, что фокус внимания распределяется строго по задуманному сценарию. Это позволило математически обосновать интерфейсные решения и сэкономить ресурсы на классическом А/В тестировании.
Contextual Help (контекстные подсказки). В интерфейс была внедрена система контекстных подсказок. Рядом с неочевидными настройками размещены триггеры помощи, открывающие модальные окна с понятными объяснениями и примерами данных и того, как это будет выглядеть. Это позволяет пользователю моментально понять принцип работы функции или тип информации для заполнения. Всё это происходит не покидая текущий экран и не обращаясь в техподдержку, что снижает порог входа в продукт и драгоценное время пользователя.
Разработал адаптив админки для Telegram Mini App. Это было критически важным бизнес-решением. Владельцы и менеджеры общепита редко сидят за десктопом, они всегда в зале или в разъездах. Перенос панели управления в формат мини-приложения в Telegram позволил им ставить блюда в стоп-лист, менять цены, запускать рассылки, управлять заказами прямо на ходу со своего смартфона и быть всегда в курсе новых.
Черновая сборка экранов для Telegram Mini App была автоматизирована с помощью AI-агента в Figma на базе нативного UI-кита Telegram. Это избавило от механической рутины по расстановке базовых компонентов и позволило кратно ускорить этап проектирования.
Developer-friendly передача макетов: Дизайн-проект выстроен системно. Все экраны, состояния элементов и модальные окна максимально упорядочены, собраны на Auto Layout и привязаны к глобальному UI-киту с дизайн-системой, стилями, компонентами со всеми состояниями. Оставлены комментарии в анимациях. Макеты передаются в чистом и предсказуемом виде, что делает процесс внедрения удобным для всех участников команды и кратно сокращает время на разработку.
Переименование слоев, создание стилей и переменных, чистка от лишних Auto Layout, структурирование дерева компонентов, автоматическая генерация текстовых комментариев, создание удобной дизайн-системы для разработчиков и других участников - всё это было сделано с помощью figma-агента. Это сэкономило мне часы времени на организацию макетов.
Результат
Снизился порог входа и показатель отказов на 25%: Интерфейс перестал выглядеть как «сложная база данных» и стал восприниматься как привычный конструктор или соцсеть.
Сократилось время настройки на 30%: Благодаря пошаговым инструкциям и контекстным подсказкам пользователи могут быстрее и без ошибок собрать меню и запустить бота.
Снижение нагрузки на поддержку на 20%: Контекстные подсказки закрывают большинство вопросов пользователей прямо в интерфейсе до того, как они успеют запутаться.
Уменьшилось количество пропущенных заказов на 40%: Благодаря мобильной версии в Telegram Mini App, владельцы бизнеса получили полноценный пульт управления доставкой прямо в кармане, что радикально ускорило их реакцию на операционные процессы ресторана.
Ускорение разработки на 20% за счёт масштабируемости: Компоненты и стили заложили фундамент для быстрого внедрения новых модулей платформы без развала общего визуального стиля.
Платформы 3 (лендинг, админ-панель, мини-приложение)
Экранов админ-панели ~174 (94 + 80 адаптивных)
Экранов мини-приложения ~150+
Страниц лендинга 4 (desktop, mobile, блог, статья)
Страниц в Figma 12
FoodBot
FoodBot — это SaaS-платформа, позволяющая запускать без написания кода собственные WebApp чат-боты внутри Telegram для приёма заказов на доставку еды.
в этом кейсе
−40% пропущенных заказов — одно решение перенесло админку туда, где владелец и так проводит весь день.
−25% отказов на онбординге — «API-токен» перестал пугать владельцев кафе.
−30% времени до запуска бота и −20% обращений в поддержку — без новых фич, только за счёт UX.
~324 экрана на 3 платформах в одной дизайн-системе — и +20% к скорости разработки.
product design/b2b
Задача
Разработать интуитивно понятный, современный UX/UI дизайн административной панели (личного кабинета) для владельцев общепита. Интерфейс должен быть понятен пользователям без технических знаний. Настройка сложного бота должна проходить так же легко, как заполнение профиля в соцсетях.
Решение
Продуктовая аналитика
Целевая аудитория - это владельцы малого и среднего бизнеса в сфере HoReCa (кафе, бургерные, суши-бары, кофейни). Очень мало свободного времени и высокая мобильность. Часто долго обрабатывают заказы либо вовсе пропускают их из-за отсутствия каких-либо уведомлений.
Сервисы предлагают гибкую настройку ботов с большим обилием функционала. Изучил сервисы конкурентов и понял, что они никак не помогают пользователям в процессе целевого действия. Из-за этого приходится тратить больше времени на самостоятельное изучение методом проб и ошибок. Как итог, у пользователя уходит больше времени на первую настройку и запуск бота, что очень критично для владельцев бизнесов.
Для ускорения UX-ресёрча я выгрузил сценарии работы, документацию и отзывы пользователей о платформах-конкурентах, после чего проанализировал этот массив данных с помощью LLM. Нейросеть помогла быстро кластеризовать ключевые боли и выявить системную слабость рынка. Это сэкономило часы ручного аудита и позволило сразу сфокусироваться на решениях, снижающих порог входа.
Гипотеза
Владельцев ресторанов пугают термины вроде «API-токен» и сложные многоуровневые настройки ботов. Если разбить процесс технической интеграции на простую пошаговую инструкцию, перевести управление меню в формат наглядных карточек и добавить контекстные подсказки, мы снизим когнитивную нагрузку и сократим время выполнения целевого действия и уменьшим количество обращений в техподдержку. Если сделать адаптив для Telegram Mini App и MAX, то уменьшим время обработки и кол-во пропущенных заказов за счёт того, что весь функционал будет в мобильном формате с возможностью уведомлений.
Что было сделано
Упростил технические этапы: На экране подключения бота вместо одного пугающего поля ввода я спроектировал линейную, пронумерованную инструкцию из 5 простых шагов по работе с BotFather. Текст написан человеческим языком с выделением ключевых команд и ссылками.
Загрузил сухую техническую документацию BotFather в нейросеть с промптом адаптировать алгоритм действий для нетехнической аудитории, разбив его на короткие шаги. Это сэкономило время на ручной редактуре интерфейсных текстов.
Проработаны разные состояния экранов, в зависимости этапа работы с продуктом. Для примера взял главный экран с ботами. Когда созданных ботов еще нет, центральное расположение единственного CTA минимизирует когнитивную нагрузку и жестко направляет к главному действию — активации (созданию первого бота).
После создания бота, наиболее частой задачей становится управление ботами, поэтому паттерн внимания логично распределился по карточкам готовых ботов и панели фильтрации/поиска. При этом, кнопка создания бота осталась в тёплой зоне внимания.
Я завайбкодил инструмент, который анализирует интерфейсы и создаёт heatmap на основе конкретной целевой аудитории. Инструмент подтвердил, что фокус внимания распределяется строго по задуманному сценарию. Это позволило математически обосновать интерфейсные решения и сэкономить ресурсы на классическом А/В тестировании.
Contextual Help (контекстные подсказки). В интерфейс была внедрена система контекстных подсказок. Рядом с неочевидными настройками размещены триггеры помощи, открывающие модальные окна с понятными объяснениями и примерами данных и того, как это будет выглядеть. Это позволяет пользователю моментально понять принцип работы функции или тип информации для заполнения. Всё это происходит не покидая текущий экран и не обращаясь в техподдержку, что снижает порог входа в продукт и драгоценное время пользователя.
Разработал адаптив админки для Telegram Mini App. Это было критически важным бизнес-решением. Владельцы и менеджеры общепита редко сидят за десктопом, они всегда в зале или в разъездах. Перенос панели управления в формат мини-приложения в Telegram позволил им ставить блюда в стоп-лист, менять цены, запускать рассылки, управлять заказами прямо на ходу со своего смартфона и быть всегда в курсе новых.
Черновая сборка экранов для Telegram Mini App была автоматизирована с помощью AI-агента в Figma на базе нативного UI-кита Telegram. Это избавило от механической рутины по расстановке базовых компонентов и позволило кратно ускорить этап проектирования.
Developer-friendly передача макетов: Дизайн-проект выстроен системно. Все экраны, состояния элементов и модальные окна максимально упорядочены, собраны на Auto Layout и привязаны к глобальному UI-киту с дизайн-системой, стилями, компонентами со всеми состояниями. Оставлены комментарии в анимациях. Макеты передаются в чистом и предсказуемом виде, что делает процесс внедрения удобным для всех участников команды и кратно сокращает время на разработку.
Переименование слоев, создание стилей и переменных, чистка от лишних Auto Layout, структурирование дерева компонентов, автоматическая генерация текстовых комментариев, создание удобной дизайн-системы для разработчиков и других участников - всё это было сделано с помощью figma-агента. Это сэкономило мне часы времени на организацию макетов.
Результат
Снизился порог входа и показатель отказов на 25%: Интерфейс перестал выглядеть как «сложная база данных» и стал восприниматься как привычный конструктор или соцсеть.
Сократилось время настройки на 30%: Благодаря пошаговым инструкциям и контекстным подсказкам пользователи могут быстрее и без ошибок собрать меню и запустить бота.
Снижение нагрузки на поддержку на 20%: Контекстные подсказки закрывают большинство вопросов пользователей прямо в интерфейсе до того, как они успеют запутаться.
Уменьшилось количество пропущенных заказов на 40%: Благодаря мобильной версии в Telegram Mini App, владельцы бизнеса получили полноценный пульт управления доставкой прямо в кармане, что радикально ускорило их реакцию на операционные процессы ресторана.
Ускорение разработки на 20% за счёт масштабируемости: Компоненты и стили заложили фундамент для быстрого внедрения новых модулей платформы без развала общего визуального стиля.
Платформы 3 (лендинг, админ-панель, мини-приложение)
Экранов админ-панели ~174 (94 + 80 адаптивных)
Экранов мини-приложения ~150+
Страниц лендинга 4 (desktop, mobile, блог, статья)
Страниц в Figma 12
product design/b2b