---
publishYear: 2023
name: Elma
title: Дизайн интерфейса lowcode-конструктора чат-ботов
excerpt: Спроектировали интерфейс платформы для создания коммерческих чат-ботов — для пользователей без опыта программирования.
context: |
[Elma](https://www.elma-bpm.ru) — одна из ведущих IT-компаний в России и СНГ в области автоматизации и роботизации бизнес-процессов. Мы уже успели поработать с Elma над [обновлением дизайна интерфейса её ВРМ-конструктора](/portfolio/elma). Elma помогает крупному бизнесу (300+ сотрудников) освободить руки и головы специалистов от рутины.
Один из способов автоматизации, который предлагает Elma — [чат-боты]((https://service.elma365.com/elma-bot/)). Сотрудники избавляются от повторяющихся ответов на однотипные вопросы, а клиенты самостоятельно (счастье для интровертов) оформляют заказ. Изначально чат-боты Elma собирала с помощью внутреннего конструктора и продавала готовые решения «под ключ».
Сейчас настройщики Elma перегружены: приходится вручную решать типовые задачи. Новый интерфейс должен был переложить эту работу на самих клиентов. То есть дать им возможность собирать чат-ботов самостоятельно.
Старый инструмент проектировали «для своих» — программистов. Он сложен и малопонятен всем остальным. Требовалось создать дизайн интерфейса лоукод-конструктора ботов, которым могут пользоваться простые смертные. Лоукод (lowcode) — это когда нужно программировать, но совсем чуть-чуть. За разработкой интерфейса для такого лоукод-конструктора Elma и обратились к нам.
isNew: true
logo:
src: ~/assets/images/portfolio/elma-bot/logo.svg
alt: Elma • Логотип
link: https://service.elma365.com/elma-bot/
doubleSize: true
image: ~/assets/images/portfolio/elma-bot/main.png
imageAlt: Собака Павлова • Elma • Конструктор чат-ботов
thumbnail:
src: ~/assets/images/portfolio/cards/elma-bot.svg
src2: ~/assets/images/portfolio/cards-l/elma_big.svg
alt: Собака Павлова • Elma • Конструктор чат-ботов
tags:
- it
- research
- ux-design
- prof
- constructor
- elma
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн под ключ](/services/ux-design), как в этом кейсе, и [многое другое](/services).
collection: services
page: ux-design
- text: |
### Хотите уметь так же?
Научим делать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: elma
- collection: portfolio
page: dipol
- collection: portfolio
page: pangeo
- collection: portfolio
page: easydocs
- collection: portfolio
page: data-solution
- collection: portfolio
page: edms
- collection: portfolio
page: amber
result:
- src: ~/assets/images/portfolio/figma.svg
text: Покажем из рук в руки и расскажем ещё больше
link: "mailto:we@sobakapav.ru"
budget: "1 100 000 ₽"
time: "7 месяцев"
review:
text: |
Наше сотрудничество с командой «Собаки Павловой» началось в 2020 году. В тот момент перед нами стояла по настоящему амбициозная задача перехода от узкой BPM-системы к масштабной Low-code платформе автоматизации внутренних и внешних бизнес-процессов любой сложности — ELMA365. Нам хотелось не только передать веру в low-code нашим клиентам и заказчикам, но и заложить основу для дальнейшего развития и масштабирования.
У каждого клиента ELMA свой опыт построения уникальных бизнес-процессов. Чтобы не нарушать их логику и гибко подстраиваться под любые изменения, в дизайн ELMA365 заложен принцип модульности. Такой подход дает нашим клиентам универсальный и максимально точно кастомизируемый инструмент для построения ИТ-системы любого масштаба.
За 4 года "проверки боем" мы смогли множество раз оценить эффект от выбранной стратегии. Профиль наших клиентов значимо изменился, а решение однозначно оказалось на вырост. Инструментами ELMA365 произведена миграция контура управления закупками с SAP Ariba в Лаборатории Касперского, цифровизация сквозных процессов прямых и агентских продаж «ЛУКОЙЛ-РНП-ТРЕЙДИНГ», совершенствуются ITSM-процессы «Татнефть — Цифровое развитие» (ТНЦР) и развивается хаб ЭДО в федеральной розничной сети "Лента".
В каждом из перечисленных кейсов реализации сложных внутренних бизнес-процессов помогает простота и интуитивная понятность интерфейса платформы. А возможность кастомизации и брендирования модулей делает систему нативной для конечного пользователя любой компании.
А если получилось хорошо, то почему бы не продолжить? Сейчас ELMA работает с командой Собака Павлова над дизайном интерфейса нового решения. О том, каким он будет, расскажем в следующих сериях.
person: Алексей Будин,
position: генеральный директор Elma
photo: ~/assets/images/portfolio/elma-bot/person.jpeg
director: "Мы очень любим такие проекты. Превратить сложный профессиональный инструмент в простой профессиональный инструмент. Понятный и доступный любому пользователю."
metadata:
canonical: https://sobakapav.ru/portfolio/elma-bot
title: Дизайн интерфейса • Конструктор чат-ботов
description: "Проанализировали аналогичные решения, выявили лучшие практики и создали интерфейс для пользователя-непрофессионала."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/elma-bot/badge.png'
width: 1200
height: 630
type: website
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Результат](#anchor3) • [Отзыв, цены, сроки](#anchor4)
</TOC>
## <a name="anchor1" />Бизнес-задача
Главная задача — создать упрощенную версию существующего конструктора под другой сегмент рынка. Для бизнесов без технического штата, но с запросом на автоматизацию.
<a href="/images/portfolio/elma-bot/14.png" target="_blank"></a>
_Главная страница_
Побочная задача — использовать новый продукт как воронку: вовлечь клиента и со временем продать основной, более сложный инструмент.
<a href="/images/portfolio/elma-bot/18.png" target="_blank"></a>
_CJM_
## <a name="anchor2" />Дизайн-задача
Изучить аналогичные решения, собрать лучшие практики и на их основе разработать интерфейс конструктора чат-ботов — для пользователей без технической подготовки. Конструктор должен был впоследствии встраиваться в Elma BPM.
<a href="/images/portfolio/elma-bot/15.png" target="_blank"></a>
<a href="/images/portfolio/elma-bot/16.png" target="_blank"></a>
<a href="/images/portfolio/elma-bot/17.png" target="_blank"></a>
_Начало работы_
## <a name="anchor3" />Результат
1. Разработали интерфейс сбалансированного по сложности конструктора.
2. Избавили отдел разработки чат-ботов от повышенной загрузки типовыми проектами.
3. Придумали механизм, позволяющий предлагать клиентам заказчика разработку более сложного бота, если они начнут упираться в ограничения сценариев нашего конструктора.
<a href="/images/portfolio/elma-bot/19.png" target="_blank"></a>
<a href="/images/portfolio/elma-bot/20.png" target="_blank"></a>
<a href="/images/portfolio/elma-bot/21.png" target="_blank"></a>
_Настройка стартового сценария_
## <a name="anchor4" />Особенности проекта
Например, бот спрашивает: какой размер кроссовок вы хотите? Пользователь пишет число — бот говорит: «Записано», и двигается дальше. Если размера нет, бот говорит: «Извините, размеры закончились», и предлагает вернуться в главное меню.
<a href="/images/portfolio/elma-bot/1.jpg" target="_blank"></a>
_Сценарий «Подача заявки на позицию курьера»_
Но заказчик хотел больше гибкости — по его замыслу таких псевдо-развилок могло быть до пяти подряд. Мы поняли, что сценарии получаются уже не такие уж линейные, и перешли к визуальной модели с полноценными развилками.
<a href="/images/portfolio/elma-bot/2.png" target="_blank"></a>
_Настраиваем переменную_
Мы не изобретали жанр. Конструкторы чат-ботов — продукт не новый. Есть множество решений с огромным количеством функций. Например:
Конструктор [Aimylogic](https://aimylogic.com/ru)
<a href="/images/portfolio/elma-bot/3.jpg" target="_blank"></a>
<a href="/images/portfolio/elma-bot/6.webp" target="_blank"></a>
_Конструтор чат-ботов Aimylogic_
Или [Unisender](https://www.unisender.com/ru/features/chat-bot/)
<a href="/images/portfolio/elma-bot/4.jpg" target="_blank"></a>
_Конструтор чат-ботов Unisender_
Еще есть [Robochat](https://robochat.io/)
<a href="/images/portfolio/elma-bot/5.jpg" target="_blank"></a>
_Конструктор чат-ботов Robochat_
Решение для создания ботов предлагает и Microsoft: [Power Virtual Agents](https://www.microsoft.com/en-us/microsoft-copilot/blog/copilot-studio/microsoft-power-virtual-agents-now-part-of-microsoft-copilot-studio/)
<a href="/images/portfolio/elma-bot/11.webp" target="_blank"></a>
_Конструктор Power Virtual Agents_
Или, например, конструктор от Сбербанка, [СберБизнесБот](https://www.sberbank.com/ru/s_m_business/nbs/sbb)
<a href="/images/portfolio/elma-bot/10.webp" target="_blank"></a>
_Конструктор чат-ботов СберБизнесБот_
И много много разных других. Мы изучили, какие подходы работают, и взяли оттуда полезное.
## <a name="anchor5" />Работа с переменными
Чат-бот должен не только спрашивать, но и запоминать. Например, дата доставки товара должна не просто отобразиться, а передаваться в CRM. Мы разработали интерфейс и для этой части — ввода и использования переменных.
<a href="/images/portfolio/elma-bot/7.png" target="_blank"></a>
_Создание переменной_
<a href="/images/portfolio/elma-bot/8.png" target="_blank"></a>
_Настройка переменной_
<a href="/images/portfolio/elma-bot/9.png" target="_blank"></a>
_Все переменные_
## <a name="anchor6" />Шаблоны сценариев
Даже если бизнесы разные, диалоги с клиентами часто повторяются. Поэтому мы добавили шаблоны. Например:
- анкета для найма курьера
- оформление заказа
- запись на мероприятие
<a href="/images/portfolio/elma-bot/12.png" target="_blank"></a>
_Шаблоны сценариев_
Шаблоны упрощают запуск: пользователь берёт готовое и донастраивает под себя.
<a href="/images/portfolio/elma-bot/13.png" target="_blank"></a>
_Шаблоны сценариев. Приветствие и прощание_
## <a name="anchor7" />Особенности процесса
Тех. специалисты на стороне заказчика старались сделать конструктор как можно мощнее, предлагая все больше и больше функций и фишек, потому что конструктор очень умный и им хотелось это показать.
Мы же старались как можно сильнее упростить интерфейс, находясь в рамках задачи.
Можно сказать, что они старался впечатлить продвинутого пользователя, а мы — не отпугнуть обычного. Поэтому много и долго обсуждали как сделать. В частности, обсуждали, поймет ли пользователь слово «интент». Формулировки в интерфейсе тоже часть дизайна, и мы относились к ним так же внимательно.
<a href="/images/portfolio/elma-bot/22.png" target="_blank"></a>
_Создание интента_
<a href="/images/portfolio/elma-bot/23.png" target="_blank"></a>
_Редактирование пользовательского интента_
## <a name="anchor8" />Юзабилити-тестирование
Разработали три сценария для тестов:
1. Создание первого бота, редактирование прерывающего сценария.
2. Создание сценария с нуля.
3. Работа с черновиком и версиями.
Одна из самых неожиданных находок до тестирования — мы не продумали, как именно бот взаимодействует с человеком:
- ждет ответа или заканчивает разговор?
- предлагает нажать кнопку или поймет и текст?
- что он делает, когда получает три сообщения подряд?
К счастью, успели доработать до начала тестов.
Тестировали на трёх владельцах бизнесов — с разным уровнем IT-подготовки. Кому-то понравилось. Кому-то показалось сложно. Значит, надо упрощать.
## <a name="anchor9" />Итог
В этом проекте мы решили три задачи:
1. Разработали сбалансированный по сложности конструктор чат-ботов для клиентов Elma.
2. Сняли часть нагрузки с команды разработки.
3. Придумали, как мягко вовлекать пользователя в более сложные сценарии и подводить к заказу.
Также стоит отметить команду Elma: проект стал вторым совместным, мы быстро нашли рабочий ритм. Наши макеты сразу уходили в реализацию. Сейчас сервис развивается внутри компании — на базе нашего интерфейса.
<a href="/images/portfolio/elma-bot/24.png" target="_blank"></a>
<a href="/images/portfolio/elma-bot/25.png" target="_blank"></a>
_Пример триггера в сквозном сценарии (FAQ, Small Talk)_
<a href="/images/portfolio/elma-bot/26.png" target="_blank"></a>
_История версий_
## <a name="anchor10" />