назад
скачать cv

FoodBot

FoodBot — сервис, в котором кафе и рестораны без программистов запускают своего бота в Telegram для приёма заказов на доставку.

в этом кейсе

  1. Управление доставкой переехало в Telegram.

    Заказы и стоп-лист — со смартфона: пропущенных заказов на 40% меньше.

  2. Пять понятных шагов вместо одного страшного поля.

    На 25% меньше людей бросают подключение на полпути.

  3. Почему больше функций — не значит лучше.

    Три варианта и почему выиграл интерфейс, который ведёт сам.

  4. Голубой, который не читался на белом.

    Как одна проверка поменяла основной цвет.
FOODBOT — обложка кейсаproduct design/b2b

  1. Коротко о проекте

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

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

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

  • Итог. Кабинет, мини-приложение в Telegram и лендинг в одном стиле.

  1. Задача

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

Техническое условие клиента: мобильный кабинет работает внутри Telegram как мини-приложение. У Telegram свои кнопки, свои цвета под тему пользователя, а при открытой клавиатуре на экране остаётся мало места.

  1. Что я выяснил

Кто пользуется. Владельцы кафе всё время в движении и пропускают заказы, потому что не видят уведомлений. Значит, управление нужно в телефоне.

Как у конкурентов. Много функций, но никто не подсказывает, что делать дальше. Значит, кабинет должен вести за руку.

Какие слова пугают. «API-токен» и десятки настроек. Значит, говорим простым языком.

FOODBOT: иллюстрация 1

  1. Три варианта и как я выбирал

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

А — больше функций. Только сложнее.

Б — обучение и поддержка. Сложность остаётся, просто переезжает в поддержку.

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

Выбрал В. Минус — мобильная версия в Telegram требовала отдельной большой работы. Я показал клиенту, что именно она решает проблему пропущенных заказов.

  1. Где я ошибался и что поменял

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

Проверка без дорогого теста. Собрал с нейросетью инструмент, который показывает, куда смотрит пользователь. Он подтвердил, что внимание идёт по задуманному пути.

  1. Что сделал и зачем

  1. Подключение за 5 шагов. Простая пошаговая инструкция вместо одного технического поля.

    Зачем: человек не застревает на первом же шаге.

FOODBOT: иллюстрация 2

  1. Экраны под ситуацию. Пока ботов нет — одна кнопка «создать». Когда появились — список, фильтры и поиск.

    Зачем: новичку понятно, с чего начать, опытному удобно управлять.

FOODBOT: иллюстрация 3
FOODBOT: иллюстрация 4

  1. Подсказки. Рядом со сложными настройками — объяснение с примером.

    Зачем: не нужно писать в поддержку — ответ уже на экране.

FOODBOT: иллюстрация 5

  1. Управление в Telegram. Заказы, цены и стоп-лист — со смартфона. Чтобы уложиться в условия Telegram, экраны собраны из его родных элементов: привычные кнопки, цвета под тему пользователя, короткие формы над клавиатурой.

    Зачем: заказы приходят туда, где владелец и так проводит день.

FOODBOT: иллюстрация 6

  1. Защита и передача разработчикам

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

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

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

FOODBOT: иллюстрация 7

  1. Результаты

Что стало удобнее в продукте

  • Подключение за 5 шагов: на 25% меньше отказов.

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

  • Управление в Telegram: пропущенных заказов на 40% меньше.

  • Одна дизайн-система: новые разделы разрабатываются на 20% быстрее.

Как продукт объясняет себя

  • Простой язык вместо технических терминов.

  • Похоже на привычный конструктор, а не на сложную базу данных.

  • Меню карточками — так же, как его увидит гость.

FOODBOT: иллюстрация 8

  1. Как помогли нейросети

  • Claude — сбор и анализ данных. Отзывы и документация конкурентов — главные проблемы владельцев кафе. Источников стало намного больше, поэтому выводы точнее. 5 минут вместо целого дня ручного поиска.

  • Свой инструмент. Показывает, куда смотрит пользователь, — проверка без дорогого теста.

  • Claude — анализ показателей продукта. 2 минуты вместо 2 часов в Excel.

  • Claude + Figma Agent — подготовка файла для разработчиков. Стили, названия слоёв, версии под разные экраны, дизайн-система, проверка недостающих экранов и логики пути пользователя. 1 час вместо 16 часов работы.

Нейросети экономят время, а решения я принимаю сам.