Дизайн интерфейса системы управления бизнес-процессами

У заказчика была BPM-система, которую он планировал превратить в low-code платформу для автоматизации бизнес-процессов. Мы на ходу встроились в процесс глобальных изменений продукта.
Осовременили дизайн интерфейса BPM-конструктора так, чтобы он смотрелся хорошо при любых настройках и в любой сборке.

Контекст

2020
~ 980 000 ₽

Бюджет

Результат

Заказчик

ELMA — российский разработчик систем, которые автоматизируют бизнес-процессы. Один из главных продуктов компании — облачная BPM-система QuickBPM. В 2020 году разработчик представил ее вторую версию, low-code BPM платформу ELMA365.
Мы подключились к работе, когда у заказчика перестало хватать рук — все дизайнеры ELMA в то время работали над другим продуктом, ELMA RPA.
Возможности Elma BPM

Задача

ELMA создает IT-продукты больше 10 лет. За это время компания четко определила свою аудиторию — это крупные бизнесы со штатом 300+ сотрудников и сложными бизнес-процессами, которые отнимают много времени и рабочих рук.
Продукты ELMA помогают заказчикам передать часть рутинных процессов роботам и начать концентрироваться на важном: масштабироваться, увеличивать эффективность работы и повышать финансовые показатели.
А еще продукты ELMA — это модульные конструкторы, которые нужно собирать под себя. Поэтому ELMA365 будет у каждого бизнеса такой же уникальной, как и его бизнес-процессы. Для нас это означало, что переделать продукт целиком невозможно. И мы решили взяться за редизайн модулей.
Договорились с заказчиком, что будем работать над каждым модулем по канбану в несколько итераций: погрузимся, проанализируем, внесем изменения в дизайн, протестируем на пользователях, внесем еще раз изменения, снова протестируем на пользователях и передадим в разработку, а сами перейдем к следующему модулю.
И сразу же поехали гонять роботов на поле автоматизации.

Процесс

Предварительная аналитика

Начали с аудита интерфейса всей системы. Посмотрели каждый модуль, отметили, что нужно переделать в первую очередь.
Старый дизайн Elma BPM
Главный экран QuickBPM — первой версии low-code BPM платформы
Подготовили схему интерфейса, чтобы понять связь между разными блоками и навигацию по ELMA365.
Схема интерфейса Elma BPM
Система довольно большая — такую за раз переделать сложно
Еще прочитали Help и узнали много нового о продукте. Документ написан очень здорово и понятно — в общем, мы сразу глубоко погрузились в тему.
А вот пользовательской аналитикой на этом проекте не занимались. Команда Elma BPM и так достаточно хорошо исследовала своих клиентов. Все, что мы хотели узнать, рассказывал аналитик, который изучает бизнес-процессы компаний-заказчиков и внедряет систему. А когда он что-то не знал, уходил с нашими вопросами к пользователям и возвращался с ответами.
У заказчика было понимание, как должен выглядеть интерфейс — все-таки 10 лет на IТ-рынке дают о себе знать. У нас такого громадного опыта работы с крупными бизнесами нет, поэтому мы пошли искать референсы, чтобы говорить с заказчиком на одном языке.
Референсы для дизайна
Все референсы собрали на отдельном артборде в Figma
Лайками сразу отмечали удачные решения, которые могли бы использовать на проекте.
Во время созвонов заказчик чаще всего упоминал Microsoft Teams как пример дизайна, от которого можно оттолкнуться и быстро начать. Так что по ходу проекта он стал для нас основным визуальным ориентиром.

Дизайн

Во время аудита мы отметили, насколько в ELMA365 сложная навигация. Несмотря на то что изначально наша задача заключалась в переделке модулей, вместе с заказчиком мы решили начать улучшения именно с навигации.
Старый дизайн Elma BPM
Если зайти в подраздел «Сотрудники» раздела «Компания», попасть в основное меню будет сложно. Только по хлебным крошкам. А перейти в другой раздел — невозможно
Аналитик рассказал, что пользователи тоже хотели бы упростить навигацию. А еще — получить возможность самим настраивать интерфейс и решать, какие кнопки должны быть отражены в рабочей зоне. Мы определили направление и начали работать.
Попробовали уместить все в левой панели и обойтись выпадающим меню, которое решает проблему с навигацией второго уровня.
Концепт дизайна
Всю навигацию разместили в левой панели
Другой вариант — с двухуровневой навигацией.
Двухуровневая навигация
На этапе концептуального проектирования можно не обращать внимание на цвета, чтобы не тратить время
Еще один концепт — горизонтальное меню первого уровня. Мы хотели показать заказчику разные варианты навигации, основанные на выбранных референсах.
Горизонтальное меню первого уровня
Одна из теорий — возможно, горизонтальным меню будет удобнее пользоваться
Заказчик выбрал двухуровневый вариант.
Мы определились с цветами хотя бы для первой итерации и примерили реальный контент из ELMA365. Заодно показали, как будет выглядеть меню первого уровня, если в нем слишком много разделов. Выбирали между скроллом и лентой и решили, что лента все-таки удобней. Если в меню наберется 20 разделов, проматывать его будет неудобно.
Концепт BPM
Еще был вариант со скроллом в меню первого уровня
Показали заказчику, обсудили, ушли на вторую итерацию. Вернулись с новым цветом и верхней системной панелью.
Одновременно начали прорабатывать контент страниц. Примерно тогда же заказчик и употребил термин «Good UI by default». То есть красивый интерфейс при любых настройках. Для конструктора это важное требование. А еще это одно из маркетинговых обещаний компании пользователям. Поэтому мы решили сосредоточиться на UI. Но новую навигацию заказчик внедрять не передумал. Нам потребовалось несколько заходов, чтобы прийти к идеальному варианту.
Концепт BPM
Изменили цвет
Мы подготовили два варианта с разными акцентными цветами. В обоих редизайнили верхнюю панель.
В «синем» добавили скролл в меню. К этому моменту мы уже узнали у заказчика, что даже 20 разделов в ELMA365 встречаются редко. А если их мало, то скролл подойдет.
Концепт Business Process Management
Переделали верхнюю панель и добавили скролл в меню
Концепт Business Process Management
Переделали верхнюю панель и попробовали добавить акцентный красный цвет
Параллельно изучали, как работают отдельные функции вроде поиска или фильтров.
Фильтры Business Process Management
Изучаем, как работают фильтры
По ходу проекта мы все больше узнавали о системе и о том, как она работает. И в определенный момент поняли, что верхняя панель должна быть двухуровневой. Один уровень займет локальный поиск с фильтрами, другой — заголовок и кнопки.
Мы предложили вариант, в котором заголовок стоит в самом верху страницы. Такая иерархия показывает пользователю, что это локальный поиск, который относится к контенту конкретного раздела.
Концепт Business Process Management
Строка поиска стоит ниже заголовка и визуально относится к конкретному разделу
Но заказчик с нами не согласился и попросил поднять поиск наверх. Так, по его мнению, будет заметнее, а между заголовком и основным контентом форма визуально потеряется.
Концепт Business Process Management
Строка поиска стоит выше заголовка и выглядит как часть навигации по всей BPM
Параллельно продумали фильтры и форму, которая предлагает сохранить настройки поиска.
Мы полностью сконцентрировались на UI: изучали, какими интерфейсными элементами люди пользуются чаще, какие задачи выполняют и как. А потом делали так, чтобы было удобно. Выделяли кнопки, упрощали фильтры, увеличивали контрастность — много мелких, но важных решений, которые позволяют проще и быстрее работать с системой.
Концепт Business Process Management с фильтрами
Пользователь применяет фильтры
Концепт Business Process Management с фильтрами
Система предлагает сбросить или сохранить комбинацию фильтров
Возможность сохранить фильтры
Комбинацию фильтров можно назвать, чтобы не потерять среди других

Пример такого UI-решения: оставили белую подложку под основной контент страниц, меню выделили синим цветом, а верхнюю панель с поиском для контраста сделали серой.
Блок с фамилией и именем переместили направо, подальше от навигации — в современных интерфейсах это популярное решение, пользователи к нему привыкли. Рядом поставили иконку для вызова справочника, который тоже переделали.
Заказчику понравилось сразу.
Дизайн Business Process Management
Заказчик настоял на том, чтобы перенести форму поиска выше заголовка

Затем принялись за раздел «Заказы». ELMA365 умеет показывать их в виде таблицы, карточек и канбан-доски.
Так выглядели карточки в старой версии дизайна.
Старый дизайн Business Process Management
Специалисты разберутся, но пользоваться все равно неудобно
В новой версии мы выделили шапку и подвал карточки, подписали числа и слегка переделали интерфейсные тексты. Стало лучше, пусть логику работы интерфейса и не трогали.
Редизайн Business Process Management
Переписали интерфейсные тексты, и стало понятнее
Для канбан-таблицы подготовили два решения с небольшими отличиями в UI. В обоих искали способ показать, что карточки относятся к столбцам-статусам, а не просто лежат в одной куче.
Концепта дизайна Business Process Management
Вариант с серыми подложками


Концептуальный дизайн канбан-карточек в Business Process Management
Вариант с цветными лейблами

Заказчик попросил комбо из двух вариантов: и с подложками, и с цветными лейблами.
Финальный дизайн канбан-карточек в Business Process Management
Оставили и серые подложки, и цветные лейблы
Заказчик принял дизайн и предложил пока приостановить работу. У него уже были на руках переделанная навигация, разделы «Сообщения», «Задачи», «Заказы» и Help. Пришло время их внедрять.

Не финал

Заказчик внедрил предложенные изменения. Сейчас ему необходимо время, чтобы на практике понять, удобно ли пользователям работать в новом дизайне.
В ELMA понимают объем работ, связанный с дизайном систем. Поэтому заказчик решил менять продукт постепенно: редизайнить часть системы, смотреть на результат, браться за следующую часть, внедрять, смотреть на результат и так до победного.
Кроме того, результаты дизайна надо вовремя перерабатывать. Если накопить слишком много изменений, с ними можно не справиться: затянуть, отложить, потерять или забыть что-то важное. Поэтому решил есть слона по частям.
По словам заказчика, уже сейчас понятно, что редизайн понравился старым пользователям и новым клиентам ELMA. Мы попали в точку и нашли то, что искали: сложность начинки Low-code BPM системы ELMA365 компенсирует простой интерфейс в современном дизайне.
Позже заказчик вернулся с продолжением проекта: вместе с нами он планирует переосмыслить принципы low-code дизайна и сделать его максимально простым.

После редизайна заказчик заключил контракт на 38 миллионов рублей.

~ 980 000 ₽
Бюджет
Результат
Еще до того, как мы закончили, заказчик поделился новостью: благодаря редизайну он заключил контракт на 38 миллионов рублей. Неплохие результаты редизайна. Да что уж там, достойные.
Алексей Будин

Основатель компании
Другие кейсы