Кабинет настройки голосового ассистента Hello Voice Bot

Квинт — ведущий разработчик голосовых роботов и других решений на базе искусственного интеллекта для автоматизации коммуникаций в бизнесе. Более 6 лет занимается разработкой роботов для крупных банков, телекома, ритейла, страхования и других компаний.

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

У компании уже был продукт для российского рынка — голосовой ассистент Kvint. Но для выхода на американскую аудиторию требовался новый сервис Hello Voice Bot с веб-кабинетом для настройки голосового помощника.

Нам предстояло разработать всю визуальную часть сервиса, ориентированную на западную аудиторию.

Предпроектная аналитика

Изначально клиент пришёл с готовой структурой сервиса в виде детализированной Excel-таблицы — с описанными сценариями, страницами, функционалом и комментариями. Это был уже рабочий MVP, но часть сценариев требовала доработки логики пользовательских путей. Для этого мы изучили сценарии взаимодействия и пошаговую механику сервиса.

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

Дизайн

За базу взяли готовые компоненты и токены дизайн-системы Ant Design. Она изначально ориентирована на веб-интерфейсы, однако для личного кабинета требовалась адаптация части компонентов.

Использовали готовые навигационные и функциональные элементы (меню, кнопки, раскрывающиеся списки). Недостающую стилистику и уникальные решения разработали отдельно и задокументировали с описанием используемых оттенков и элементов, чтобы они соответствовали требованиям разработчиков.

Такой подход позволил сохранить баланс между системностью, скоростью разработки и индивидуальным визуальным стилем продукта.

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

Интерфейсы

Регистрация

Личный кабинет не существует без голосового бота — именно он является центральным элементом продукта. Поэтому регистрация спроектирована как первый пользовательский сценарий работы с системой и совмещена с первичной настройкой AI-ассистента. Процесс выстроен в виде пошагового сценария, который постепенно собирает ключевые параметры будущего ассистента.

Отдельный этап посвящён тестированию бота: пользователь может проверить его работу в процессе регистрации — через браузер или тестовый звонок убедиться в корректности сценариев и логики общения ещё до начала полноценного использования сервиса.

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

Онбординг

На этапе первого входа в сервис пользователя сопровождает онбординг, который дополняет процесс регистрации.

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

Дополнительно в онбординге предусмотрены информационные и мотивационные блоки, которые подсвечивают преимущества сервиса и условия начала работы, включая возможность бесплатного периода использования. Это формирует позитивные ожидания от продукта и вовлекает пользователя в дальнейшую настройку личного кабинета.

Главная

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

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

Настройки

Настройки оформили в виде пошаговых сценариев. Базовые шаги переиспользуют логику регистрации, но на этом этапе доступны для редактирования и дальнейшей настройки.

Пользователь последовательно задаёт сценарии работы ассистента: тематику обращений, список вопросов, возможные ответы, параметры записи (дата, время, специалист), а также правила коммуникации с клиентом. Эти настройки формируют основу диалога ассистента с конечными пользователями.

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

История звонков

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

Финансы

Страница объединяет все финансовые инструменты в одном разделе: историю платежей и списаний, управление тарифами, пополнение баланса. Пользователь видит текущий тариф с описанием всех доступных планов и может подключить новый, а в разделе пополнения — настроить способ оплаты (изменить карту, сумму списания, автоплатеж) и ввести промокод. Доработанная логика позволяет рассчитывать расход минут в зависимости от пополняемой суммы, предоставляя полную прозрачность затрат.

Виджеты

Hello Voice Bot можно разместить на сайте в виде виджета. Мы продумали несколько форматов отображения: кнопки, анимированные виджеты с текстом и без него, а также виджет в виде аватара. Пользователь может выбрать подходящий формат под свои задачи и стиль сайта.

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

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

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

Итеративный подход позволил учесть все изменения ТЗ, и в результате получился масштабируемый продукт, готовый к миллионам звонков: с тестами бота на старте, полной историей взаимодействий и прозрачным финансовым управлением.

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