---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2024-08-15
publishYear: 2020
name: Elma
title: Дизайн интерфейса системы управления бизнес-процессами
excerpt: Осовременили дизайн интерфейса BPM-конструктора так, чтобы он смотрелся хорошо при любых настройках и в любой сборке.
context: У заказчика была BPM-система, которую он планировал превратить в low-code платформу для автоматизации бизнес-процессов. Мы на ходу встроились в процесс глобальных изменений продукта.
logo:
src: ~/assets/images/portfolio/elma/logo.svg
alt: Elma logo
link: https://elma365.com
image: ~/assets/images/portfolio/elma/elma.png
imageAlt: Дизайн интерфейса системы управления бизнес-процессами
thumbnail:
src: ~/assets/images/portfolio/cards/elma.svg
src2: ~/assets/images/portfolio/cards-l/elma_big.svg
alt: Собака Павлова • ELMA • Дизайн интерфейса системы управления бизнес-процессами
tags:
- it
- ux-design
- ux-outsource
- prof
- constructor
- elma
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн под ключ](/services/ux-design) и [UX-отдел на аутсорсе](/services/ux-outsource), как в этом кейсе, и [многое другое](/services).
collection: services
page: ux-design
- collection: services
page: ux-outsource
- text: |
### Хотите уметь так же?
Научим делать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: elma-bot
- collection: portfolio
page: dipol
- collection: portfolio
page: pangeo
- collection: portfolio
page: easydocs
- collection: portfolio
page: data-solution
- collection: portfolio
page: amber
result:
- src: ~/assets/images/portfolio/figma.svg
text: Финальные макеты
link: https://www.figma.com/design/ng8pcS2hpOqC5GgOYCCmxz/ELMA-BPM-Outbox?node-id=598%3A10011
budget: ~ 980 000 ₽
director: "Еще до того, как мы закончили, заказчик поделился новостью: благодаря редизайну он заключил контракт на 38 миллионов рублей. Неплохие результаты редизайна. Да что уж там, достойные."
outcome:
title: Некоторые цифры
numbers:
- title: Передали в разработку
number: '> 40 экранов'
- title: Нарисовали для UI-kit
number: '> 100 компонетов'
- title: Клиент заключил контракт
number: на 38 000 000 ₽
metadata:
canonical: https://sobakapav.ru/portfolio/elma
title: Бизнес-интерфейс • Система управления бизнес-процессами
description: "Разработали дизайн интерфейса BPM-конструктора, который позволяет автоматизировать бизнес-процессы и создавать собственные CRM под задачи бизнеса"
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/elma/elma.png'
width: 1448
height: 1032
---
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Заказчик](#anchor1) • [Задача](#anchor2) • [Аналитика](#anchor3) • [Дизайн](#anchor4) • [Не финал](#anchor5) • [Отзыв, цены, сроки](#anchor6)
</TOC>
## <a name="anchor1" />Заказчик
ELMA — российский разработчик систем, которые автоматизируют бизнес-процессы. Один из главных продуктов компании — облачная BPM-система QuickBPM. В 2020 году разработчик представил ее вторую версию, low-code BPM платформу ELMA365.
Мы подключились к работе, когда у заказчика перестало хватать рук — все дизайнеры ELMA в то время работали над другим продуктом, ELMA RPA.
## <a name="anchor2" />Задача
ELMA создает IT-продукты больше 10 лет. За это время компания четко определила свою аудиторию — это крупные бизнесы со штатом 300+ сотрудников и сложными бизнес-процессами, которые отнимают много времени и рабочих рук.
Продукты ELMA помогают заказчикам передать часть рутинных процессов роботам и начать концентрироваться на важном: масштабироваться, увеличивать эффективность работы и повышать финансовые показатели.
А еще продукты ELMA — это модульные конструкторы, которые нужно собирать под себя. Поэтому ELMA365 будет у каждого бизнеса такой же уникальной, как и его бизнес-процессы. Для нас это означало, что переделать продукт целиком невозможно. И мы решили взяться за редизайн модулей.
Договорились с заказчиком, что будем работать над каждым модулем по канбану в несколько итераций: погрузимся, проанализируем, внесем изменения в дизайн, протестируем на пользователях, внесем еще раз изменения, снова протестируем на пользователях и передадим в разработку, а сами перейдем к следующему модулю.
И сразу же поехали гонять роботов на поле автоматизации.
## <a name="anchor3" /> Предварительная аналитика
Начали с аудита интерфейса всей системы. Посмотрели каждый модуль, отметили, что нужно переделать в первую очередь.
_Главный экран QuickBPM — первой версии low-code BPM платформы_
Подготовили схему интерфейса, чтобы понять связь между разными блоками и навигацию по ELMA365.
_Система довольно большая — такую за раз переделать сложно_
Еще прочитали Help и узнали много нового о продукте. Документ написан очень здорово и понятно — в общем, мы сразу глубоко погрузились в тему.
А вот пользовательской аналитикой на этом проекте не занимались. Команда Elma BPM и так достаточно хорошо исследовала своих клиентов. Все, что мы хотели узнать, рассказывал аналитик, который изучает бизнес-процессы компаний-заказчиков и внедряет систему. А когда он что-то не знал, уходил с нашими вопросами к пользователям и возвращался с ответами.
У заказчика было понимание, как должен выглядеть интерфейс — все-таки 10 лет на IТ-рынке дают о себе знать. У нас такого громадного опыта работы с крупными бизнесами нет, поэтому мы пошли искать референсы, чтобы говорить с заказчиком на одном языке.
_Все референсы собрали на отдельном артборде в Figma_
Лайками сразу отмечали удачные решения, которые могли бы использовать на проекте.
_[Notion](http://notion.so/)_
Во время созвонов заказчик чаще всего упоминал Microsoft Teams как пример дизайна, от которого можно оттолкнуться и быстро начать. Так что по ходу проекта он стал для нас основным визуальным ориентиром.
_[Microsoft Teams](https://www.microsoft.com/en-us/microsoft-365/microsoft-teams/group-chat-software/)_
## <a name="anchor4" />Дизайн
Во время аудита мы отметили, насколько в ELMA365 сложная навигация. Несмотря на то что изначально наша задача заключалась в переделке модулей, вместе с заказчиком мы решили начать улучшения именно с навигации.
_Если зайти в подраздел «Сотрудники» раздела «Компания», попасть в основное меню будет сложно. Только по хлебным крошкам. А перейти в другой раздел — невозможно_
Аналитик рассказал, что пользователи тоже хотели бы упростить навигацию. А еще — получить возможность самим настраивать интерфейс и решать, какие кнопки должны быть отражены в рабочей зоне. Мы определили направление и начали работать.
Попробовали уместить все в левой панели и обойтись выпадающим меню, которое решает проблему с навигацией второго уровня.
_Всю навигацию разместили в левой панели_
Другой вариант — с двухуровневой навигацией.
_На этапе концептуального проектирования можно не обращать внимание на цвета, чтобы не тратить время_
Еще один концепт — горизонтальное меню первого уровня. Мы хотели показать заказчику разные варианты навигации, основанные на выбранных референсах.
_Одна из теорий — возможно, горизонтальным меню будет удобнее пользоваться_
Заказчик выбрал двухуровневый вариант.
Мы определились с цветами хотя бы для первой итерации и примерили реальный контент из ELMA365. Заодно показали, как будет выглядеть меню первого уровня, если в нем слишком много разделов. Выбирали между скроллом и лентой и решили, что лента все-таки удобней. Если в меню наберется 20 разделов, проматывать его будет неудобно.
_Еще был вариант со скроллом в меню первого уровня_
Показали заказчику, обсудили, ушли на вторую итерацию. Вернулись с новым цветом и верхней системной панелью.
Одновременно начали прорабатывать контент страниц. Примерно тогда же заказчик и употребил термин «Good UI by default». То есть красивый интерфейс при любых настройках. Для конструктора это важное требование. А еще это одно из маркетинговых обещаний компании пользователям. Поэтому мы решили сосредоточиться на UI. Но новую навигацию заказчик внедрять не передумал. Нам потребовалось несколько заходов, чтобы прийти к идеальному варианту.
_Изменили цвет_
Мы подготовили два варианта с разными акцентными цветами. В обоих редизайнили верхнюю панель.
В «синем» добавили скролл в меню. К этому моменту мы уже узнали у заказчика, что даже 20 разделов в ELMA365 встречаются редко. А если их мало, то скролл подойдет.
_Переделали верхнюю панель и добавили скролл в меню_
_Переделали верхнюю панель и попробовали добавить акцентный красный цвет_
Параллельно изучали, как работают отдельные функции вроде поиска или фильтров.
_Изучаем, как работают фильтры_
По ходу проекта мы все больше узнавали о системе и о том, как она работает. И в определенный момент поняли, что верхняя панель должна быть двухуровневой. Один уровень займет локальный поиск с фильтрами, другой — заголовок и кнопки.
Мы предложили вариант, в котором заголовок стоит в самом верху страницы. Такая иерархия показывает пользователю, что это локальный поиск, который относится к контенту конкретного раздела.
_Строка поиска стоит ниже заголовка и визуально относится к конкретному разделу_
Но заказчик с нами не согласился и попросил поднять поиск наверх. Так, по его мнению, будет заметнее, а между заголовком и основным контентом форма визуально потеряется.
_Строка поиска стоит выше заголовка и выглядит как часть навигации по всей BPM_
Параллельно продумали фильтры и форму, которая предлагает сохранить настройки поиска.
Мы полностью сконцентрировались на UI: изучали, какими интерфейсными элементами люди пользуются чаще, какие задачи выполняют и как. А потом делали так, чтобы было удобно. Выделяли кнопки, упрощали фильтры, увеличивали контрастность — много мелких, но важных решений, которые позволяют проще и быстрее работать с системой.
_Пользователь применяет фильтры_
_Система предлагает сбросить или сохранить комбинацию фильтров_
_Комбинацию фильтров можно назвать, чтобы не потерять среди других_
Пример такого UI-решения: оставили белую подложку под основной контент страниц, меню выделили синим цветом, а верхнюю панель с поиском для контраста сделали серой.
Блок с фамилией и именем переместили направо, подальше от навигации — в современных интерфейсах это популярное решение, пользователи к нему привыкли. Рядом поставили иконку для вызова справочника, который тоже переделали.
Заказчику понравилось сразу.
_Заказчик настоял на том, чтобы перенести форму поиска выше заголовка_
Затем принялись за раздел «Заказы». ELMA365 умеет показывать их в виде таблицы, карточек и канбан-доски.
Так выглядели карточки в старой версии дизайна.
_Специалисты разберутся, но пользоваться все равно неудобно_
В новой версии мы выделили шапку и подвал карточки, подписали числа и слегка переделали интерфейсные тексты. Стало лучше, пусть логику работы интерфейса и не трогали.
_Переписали интерфейсные тексты, и стало понятнее_
Для канбан-таблицы подготовили два решения с небольшими отличиями в UI. В обоих искали способ показать, что карточки относятся к столбцам-статусам, а не просто лежат в одной куче.
_Вариант с серыми подложками_
_Вариант с цветными лейблами_
Заказчик попросил комбо из двух вариантов: и с подложками, и с цветными лейблами.
_Оставили и серые подложки, и цветные лейблы_
Заказчик принял дизайн и предложил пока приостановить работу. У него уже были на руках переделанная навигация, разделы «Сообщения», «Задачи», «Заказы» и Help. Пришло время их внедрять.
## <a name="anchor5" /> Не финал
Заказчик внедрил предложенные изменения. Сейчас ему необходимо время, чтобы на практике понять, удобно ли пользователям работать в новом дизайне.
В ELMA понимают объем работ, связанный с дизайном систем. Поэтому заказчик решил менять продукт постепенно: редизайнить часть системы, смотреть на результат, браться за следующую часть, внедрять, смотреть на результат и так до победного.
Кроме того, результаты дизайна надо вовремя перерабатывать. Если накопить слишком много изменений, с ними можно не справиться: затянуть, отложить, потерять или забыть что-то важное. Поэтому решил есть слона по частям.
По словам заказчика, уже сейчас понятно, что редизайн понравился старым пользователям и новым клиентам ELMA. Мы попали в точку и нашли то, что искали: сложность начинки Low-code BPM системы ELMA365 компенсирует простой интерфейс в современном дизайне.
Позже заказчик вернулся с продолжением проекта: вместе с нами он планирует переосмыслить принципы low-code дизайна и сделать его максимально простым.
## <a name="anchor6" />