Дизайн интерфейса lowcode-конструктора чат-ботов

Elma — одна из ведущих IT-компаний в России и СНГ в области автоматизации и роботизации бизнес-процессов. Мы уже успели поработать с Elma над обновлением дизайна интерфейса её ВРМ-конструктора. Elma помогает крупному бизнесу (300+ сотрудников) освободить руки и головы специалистов от рутины.

Один из способов автоматизации, который предлагает Elma — чат-боты. Сотрудники избавляются от повторяющихся ответов на однотипные вопросы, а клиенты самостоятельно (счастье для интровертов) оформляют заказ. Изначально чат-боты Elma собирала с помощью внутреннего конструктора и продавала готовые решения «под ключ».

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

Старый инструмент проектировали «для своих» — программистов. Он сложен и малопонятен всем остальным. Требовалось создать дизайн интерфейса лоукод-конструктора ботов, которым могут пользоваться простые смертные. Лоукод (lowcode) — это когда нужно программировать, но совсем чуть-чуть. За разработкой интерфейса для такого лоукод-конструктора Elma и обратились к нам.

Бизнес-задача

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

Главная страница

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

CJM

Дизайн-задача

Изучить аналогичные решения, собрать лучшие практики и на их основе разработать интерфейс конструктора чат-ботов — для пользователей без технической подготовки. Конструктор должен был впоследствии встраиваться в Elma BPM.

Начало работы

Результат

1. Разработали интерфейс сбалансированного по сложности конструктора.

2. Избавили отдел разработки чат-ботов от повышенной загрузки типовыми проектами.

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

Настройка стартового сценария

Особенности проекта

Например, бот спрашивает: какой размер кроссовок вы хотите? Пользователь пишет число — бот говорит: «Записано», и двигается дальше. Если размера нет, бот говорит: «Извините, размеры закончились», и предлагает вернуться в главное меню.

Сценарий «Подача заявки на позицию курьера»

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

Настраиваем переменную

Мы не изобретали жанр. Конструкторы чат-ботов — продукт не новый. Есть множество решений с огромным количеством функций. Например:

Конструктор Aimylogic

Конструтор чат-ботов Aimylogic

Или Unisender

Конструтор чат-ботов Unisender

Еще есть Robochat

Конструктор чат-ботов Robochat

Решение для создания ботов предлагает и Microsoft: Power Virtual Agents

Конструктор Power Virtual Agents

Или, например, конструктор от Сбербанка, СберБизнесБот

Конструктор чат-ботов СберБизнесБот

И много много разных других. Мы изучили, какие подходы работают, и взяли оттуда полезное.

Работа с переменными

Чат-бот должен не только спрашивать, но и запоминать. Например, дата доставки товара должна не просто отобразиться, а передаваться в CRM. Мы разработали интерфейс и для этой части — ввода и использования переменных.

Создание переменной

Настройка переменной

Все переменные

Шаблоны сценариев

Даже если бизнесы разные, диалоги с клиентами часто повторяются. Поэтому мы добавили шаблоны. Например:

• анкета для найма курьера
• оформление заказа
• запись на мероприятие

Шаблоны сценариев

Шаблоны упрощают запуск: пользователь берёт готовое и донастраивает под себя.

Шаблоны сценариев. Приветствие и прощание

Особенности процесса

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

Мы же старались как можно сильнее упростить интерфейс, находясь в рамках задачи.

Можно сказать, что они старался впечатлить продвинутого пользователя, а мы — не отпугнуть обычного. Поэтому много и долго обсуждали как сделать. В частности, обсуждали, поймет ли пользователь слово «интент». Формулировки в интерфейсе тоже часть дизайна, и мы относились к ним так же внимательно.

Создание интента

Редактирование пользовательского интента

Юзабилити-тестирование

Разработали три сценария для тестов:

1. Создание первого бота, редактирование прерывающего сценария
2. Создание сценария с нуля
3. Работа с черновиком и версиями

Одна из самых неожиданных находок до тестирования — мы не продумали, как именно бот взаимодействует с человеком:

• ждет ответа или заканчивает разговор
• предлагает нажать кнопку или поймет и текст;
• что он делает, когда получает три сообщения подряд?

К счастью, успели доработать до начала тестов.

Тестировали на трёх владельцах бизнесов — с разным уровнем IT-подготовки. Кому-то понравилось. Кому-то показалось сложно. Значит, надо упрощать.

Итог

В этом проекте мы решили три задачи:

• разработали сбалансированный по сложности конструктор чат-ботов для клиентов Elma
• сняли часть нагрузки с команды разработки
• придумали, как мягко вовлекать пользователя в более сложные сценарии и подводить к заказу

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

Пример триггера в сквозном сценарии (FAQ, Small Talk)

История версий