Источник пользователя
Кейс · B2B SaaS · Admin Panel
Chat Leads
Lead management система для сайта с чат-виджетом, real-time оператором и админкой обработки лидов.
B2B SaaSAdmin PanelReal-time ChatLead ManagementWebSocketCRMUTMAnalytics
Контекст · 01 | 12
Контекст
Изначально идея была простой: сделать сайт с умным чатом, который помогает посетителю разобраться в услуге и оставить заявку.
Но в процессе стало понятно, что обычной формы или чат-бота недостаточно. Бизнесу важно не только получить контакт, но и понимать:
Намерение
что он хотел
Сценарий
какой сценарий прошёл
Интеграции
была ли ошибка интеграции
Оператор
кто обработал лид
История
что уже происходило с заявкой
Задача
Спроектировать систему, где заявка создаётся из формы или чата, сохраняется в базе, передаётся в уведомления, обрабатывается в админке и сопровождается историей событий.
Роли · 03 | 12
Как я понял задачу
Я разделил задачу на четыре роли.
Посетитель
Хочет быстро понять услугу и оставить заявку без давления.
Оператор
Хочет видеть контекст обращения и отвечать в real-time.
Администратор
Хочет управлять ролями, пользователями и аудитом.
Бизнес
Хочет видеть источники, UTM и эффективность каналов.
После этого стало ясно: это не просто “чат на сайте”, а небольшая lead management система.
Варианты · 04 | 12
Какие варианты рассматривал
Вариант 1. Только форма
Быстро реализовать, но пользователь может не понимать, какую услугу выбрать, и не оставить заявку.
Вариант 2. Только чат-бот
Лучше вовлекает, но если бот не закрывает вопрос, пользователь может уйти.
Выбранный подход
Вариант 3. Форма + чат + оператор + админка
Покрывает разные уровни готовности пользователя: кто-то оставит заявку сразу, кто-то сначала задаст вопрос, кто-то захочет перейти к оператору.
Я выбрал третий подход, потому что он лучше закрывает реальные сценарии и даёт бизнесу контроль над обработкой лидов.
Что сделал · 05 | 12
Что сделал
Спроектировал:
публичный лендингформа заявкичат-виджетсценарные кнопкисвободный вводoperator handoffreal-time чатсписок лидовкарточка лидастатусы обработкикомментарии оператораистория событийIntegrationLogAuditLogроли admin/operator/viewerUTM/source/referrerTelegram/CRM-интеграцииметрики продукта
UX-решение · 06 | 12
Сначала сохраняем лид, потом отправляем интеграции
Если Telegram или CRM временно недоступны, заявка всё равно должна сохраниться. Поэтому основной сценарий — создание лида — не зависит от внешних сервисов.
Ошибка интеграции фиксируется в IntegrationLog, а оператор всё равно видит заявку в админке.
Это снижает риск потери заявок и делает систему устойчивее.
UI и Figma · 07 | 12
UI и Figma
Admin UI
desktop-админкасписок заявоккарточка лидафильтрыстатусыbadges
Communication
чат операторакомментарииистория событий
System states
IntegrationLogmobile admin appUI-kit компонентов
Figma как система
Работаю с components, variants, auto layout, variables и состояниями компонентов.
Mobile admin · 08 | 12
Mobile admin
Отдельно в Figma есть мобильная админка оператора Chat Leads.
Она нужна для сценариев, когда оператору важно быстро посмотреть новый лид, ответить в чат, изменить статус или проверить контакт с телефона.
Быстрый доступ
новый лид, контакт, статус
Mobile UX
нижняя навигация, safe area, работа одной рукой
Операторские действия
ответить в чат, изменить статус, проверить контакт
iOS HIGMaterial DesignSafe areasTouch targetsOne-hand flow
Проверка · 09 | 12
Как проверял
Проверка сценариев
01 Form submit
02 Chat lead
03 Operator request
04 Real-time reply
05 Status change
06 Role restriction
07 Integration fail
08 WebSocket break
Usability-тест админки
Я подготовил сценарий быстрого usability-теста на 5 участниках с ролью “оператор”.
Задачи
- Найти новый лид, понять, что нужно пользователю, и изменить статус.
- Открыть историю событий и понять, была ли ошибка интеграции.
- Перейти в чат, ответить пользователю и закрыть сессию.
Что проверял бы
- быстро ли находится новый лид
- понятно ли, откуда пришёл пользователь
- виден ли источник/UTM
- понятна ли история событий
- не путаются ли статусы
- видит ли оператор ошибки интеграций
- хватает ли контекста без перехода в другие разделы
Что улучшил бы
- вынес бы статус, источник и контакт выше в карточке
- сделал бы IntegrationLog более понятным для неразработчика
- добавил бы быстрые действия в карточку лида
- разделил бы пользовательский и системный контекст
- усилил бы empty/error states
Метрики · 10 | 12
Метрики
Я отслеживал:
visitor → chat_openchat_open → scenario_selectedscenario_selected → lead_createdform_submit → lead_createdoperator_requested → lead_createdсреднее время ответа операторадоля лидов с UTM/sourceintegration_errorlead_created при telegram_error / crm_errorколичество обработанных лидовстатусы обработки лидов
Результат · 11 | 12
Результат
Было
идея сайта с чатом и формой для заявок.
Стало