VK Process Mining
VK Process Mining
Обновление раздела дашбордов на платформе процессной аналитики
Обновление раздела дашбордов на платформе процессной аналитики
Роль
Роль
Продуктовый дизайнер
Продуктовый дизайнер
Тэги
Тэги
UX/UI, дизайн–система, прототипы, редизайн
UX/UI, дизайн–система, прототипы, редизайн
Тип
Тип
Веб-сервис
Веб-сервис
Пользователи
Пользователи
Аналитики и руководители
Аналитики и руководители
Таймлайн
Таймлайн
2025-2026
2025-2026
Настройка внешнего вида виджета
Настройка внешнего вида виджета
О продукте
VK Process Mining — платформа процессной аналитики для управления бизнес-процессами в крупных компаниях, которая позволяет визуализировать реальные процессы и сравнить их с регламентами, чтобы выявить узкие места и определить потенциал для автоматизации. Главная фича продукта — интерактивный отчет из нескольких настраиваемых дашбордов, которые визуализируют процесс в различных представлениях и срезах
VK Process Mining — платформа процессной аналитики для управления бизнес-процессами в крупных компаниях, которая позволяет визуализировать реальные процессы и сравнить их с регламентами, чтобы выявить узкие места и определить потенциал для автоматизации. Главная фича продукта — интерактивный отчет из нескольких настраиваемых дашбордов, которые визуализируют процесс в различных представлениях и срезах
Карта процесса
Проблема для пользователя
Проблема для пользователя
Процесс создания дашборда сложный, не хватает гибкости и разнообразия виджетов
Процесс создания дашборда сложный, не хватает гибкости и разнообразия виджетов
Проблема для продукта
Проблема для продукта
Картинка дашборда не продающая, так как дизайн морально устарел
Картинка дашборда не продающая, так как дизайн морально устарел
Виджет «Дерево» в режиме просмотра
Добавление виджета на дашборд
Настройка виджета Process Explorer
Что делала
Что делала
Проанализировала существующий интерфейс, составила гипотезы проблем для исследования
Провела серию интервью с внутренними пользователями (4 человека), где они проходили свои основные рабочие сценарии и говорили о болях
Определила слабые места и этапы работ, делегировав часть задач младшему дизайнеру
Спроектировала ключевые экраны и собрала обратную связь от тех же респондентов
После подтверждения решений отрисовала все основные экраны, состояния, отревьюила делегированные задачи и передала дизайн в разработку
Сопровождала разработку и проводила дизайн-ревью
Проанализировала существующий интерфейс, составила гипотезы проблем для исследования
Провела серию интервью с внутренними пользователями (4 человека), где они проходили свои основные рабочие сценарии и говорили о болях
Определила слабые места и этапы работ, делегировав часть задач младшему дизайнеру
Спроектировала ключевые экраны и собрала обратную связь от тех же респондентов
После подтверждения решений отрисовала все основные экраны, состояния, отревьюила делегированные задачи и передала дизайн в разработку
Сопровождала разработку и проводила дизайн-ревью
Результаты
Результаты
Упрощён режим редактирования: ключевые действия стали заметнее и понятнее. Улучшена навигация и устранены UX-проблемы в работе с отчётом
Спроектированы флоу публикации отчётов и история изменений для безопасной работы с настройками
Добавлены гибкие настройки контейнера виджетов и отчета, продумана адаптивность
Обновлён визуальный стиль интерфейса и повышено качество восприятия продукта
Спроектированы 3 новых виджета и доработан ключевой виджет
Большая часть изменений на стадии тестирования внутренними пользователями, получена положительная обратная связь, наблюдаем «вау-эффект»
Упрощён режим редактирования: ключевые действия стали заметнее и понятнее. Улучшена навигация и устранены UX-проблемы в работе с отчётом
Спроектированы флоу публикации отчётов и история изменений для безопасной работы с настройками
Добавлены гибкие настройки контейнера виджетов и отчета, продумана адаптивность
Обновлён визуальный стиль интерфейса и повышено качество восприятия продукта
Спроектированы 3 новых виджета и доработан ключевой виджет
Большая часть изменений на стадии тестирования внутренними пользователями, получена положительная обратная связь, наблюдаем «вау-эффект»
Виджет «Дерево» в режиме просмотра
Настройка виджета Process Explorer
Добавление виджета на дашборд
Публикация отчета
Публикация отчета
Проблема
Проблема
Во время настройки дашборда изменения сразу становились видны всем пользователям, из-за чего другие могли видеть промежуточные или некорректно настроенные состояния отчёта
Пользователи не могли откатиться к предыдущей версии после ошибок
Во время настройки дашборда изменения сразу становились видны всем пользователям, из-за чего другие могли видеть промежуточные или некорректно настроенные состояния отчёта
Пользователи не могли откатиться к предыдущей версии после ошибок
Решение
Решение
Добавлены функции публикации дашборда и отмены изменений
В режиме редактирования отображается версия с изменениями пользователя, а в режиме просмотра, который доступен всем пользователям — последняя опубликованная версия
Добавлена история отчета, которая позволяет посмотреть предыдущие версии и «откатиться» до одной из них
Добавлены функции публикации дашборда и отмены изменений
В режиме редактирования отображается версия с изменениями пользователя, а в режиме просмотра, который доступен всем пользователям — последняя опубликованная версия
Добавлена история отчета, которая позволяет посмотреть предыдущие версии и «откатиться» до одной из них
Схема процесса
Схема процесса
Тулбар дашборда
Тулбар дашборда
Просмотр истории версий
Просмотр истории версий
Внешний вид и настройка дашборда
Внешний вид и настройка дашборда
Проблема
Проблема
Доступных настроек было недостаточно для задач пользователей, не хватало гибкости в настройке внешнего вида
Панель настройки перекрывала значительную часть дашборда, из-за чего пользователи не видели результат настроек или не могли корректно работать с виджетами
Отстутствовала адаптивность виджетов, поэтому виджеты плохо выглядели в маленьком размере и текст внутри был слишком мелким
Доступных настроек было недостаточно для задач пользователей, не хватало гибкости в настройке внешнего вида
Панель настройки перекрывала значительную часть дашборда, из-за чего пользователи не видели результат настроек или не могли корректно работать с виджетами
Отстутствовала адаптивность виджетов, поэтому виджеты плохо выглядели в маленьком размере и текст внутри был слишком мелким
Решение
Решение
Продумана структура панели настройки виджета, расширены настройки внешнего вида (контейнер контента, заголовок, обводка, тень, комментарий) и добавлена возможность настройки лейаута дашборда
Обычно весь дашборд собирается в одном стиле. Так как настроек стиля виджета стало много, добавили функцию применения настроек ко всем виджетам
Панель настроек стала гибкой: её можно перемещать, ресайзить и открывать в отдельном окне браузера
Проработана конфигурация контейнера виджета, продумана логика адаптивности
Продумана структура панели настройки виджета, расширены настройки внешнего вида (контейнер контента, заголовок, обводка, тень, комментарий) и добавлена возможность настройки лейаута дашборда
Обычно весь дашборд собирается в одном стиле. Так как настроек стиля виджета стало много, добавили функцию применения настроек ко всем виджетам
Панель настроек стала гибкой: её можно перемещать, ресайзить и открывать в отдельном окне браузера
Проработана конфигурация контейнера виджета, продумана логика адаптивности
Настройка лейаута
Настройка лейаута
Сайдбар настройки сдвинут и уменьшен
Сайдбар настройки сдвинут и уменьшен
Виджет Variant Explorer
Виджет Variant Explorer
Суть
Суть
Виджет для визуализации процесса на графе, который позволяет проанализировать реальные варианты цепочек событий, чтобы оценить потенциал оптимизации. Пользователь фильтрует данные, выбирает экземпляры цепочек в таблице справа, и видит визуализацию этих цепочек на графе слева, чтобы заметить, какие события и переходы повторяются, сколько времени занимают шаги и как много цепочек не завершаются успехом. Обычно пользователи просматривают частовстречающиеся варианты цепочек одновременно, но не просматривают все варианты сразу
Виджет для визуализации процесса на графе, который позволяет проанализировать реальные варианты цепочек событий, чтобы оценить потенциал оптимизации. Пользователь фильтрует данные, выбирает экземпляры цепочек в таблице справа, и видит визуализацию этих цепочек на графе слева, чтобы заметить, какие события и переходы повторяются, сколько времени занимают шаги и как много цепочек не завершаются успехом. Обычно пользователи просматривают частовстречающиеся варианты цепочек одновременно, но не просматривают все варианты сразу
Проблема
Проблема
Пользователи путаются в выборе цепочек для отображения на графе и для фильтрации всего отчета по цепочкам
Пользователь тратит много времени на то, чтобы выбрать много строк таблицы (~20–40 строк) и увидеть все частовстречающиеся цепочки, потому что кликает на каждый чекбокс по отдельности
Настройка таблицы недостаточно гибкая, что усложняет поиск нужных для отображения цепочек
Элементы управления графом «скачат», пользователи пустаются в действиях
Пользователи путаются в выборе цепочек для отображения на графе и для фильтрации всего отчета по цепочкам
Пользователь тратит много времени на то, чтобы выбрать много строк таблицы (~20–40 строк) и увидеть все частовстречающиеся цепочки, потому что кликает на каждый чекбокс по отдельности
Настройка таблицы недостаточно гибкая, что усложняет поиск нужных для отображения цепочек
Элементы управления графом «скачат», пользователи пустаются в действиях
Решение
Решение
После общения с пользователями выяснилось, что чаще всего они фильтруют отчёт по тем же цепочкам, которые анализируют на графе. Чтобы сократить количество действий, я объединила выбор цепочек и их отображение в единый сценарий: пользователь выбирает цепочки в таблице, сразу видит их на графе и при необходимости применяет фильтр
Переработана механика выбора цепочек: теперь выбрать строку можно кликом по всей области, а не только по чекбоксу. Также добавлен выбор одного или нескольких диапазонов цепочек с помощью манипуляторов
Расширены возможности работы с таблицей: добавлено отключение ненужных колонок, сложная фильтрация с комбинацией условий и сортировка внутри каждой колонки
Переработан toolbar графа: переключение режимов оформлено через segmented control, действия и управление масштабом сгруппированы в отдельные блоки, а кнопка управления сайдбаром вынесена ближе к области взаимодействия для более понятного разделения сценариев
После общения с пользователями выяснилось, что чаще всего они фильтруют отчёт по тем же цепочкам, которые анализируют на графе. Чтобы сократить количество действий, я объединила выбор цепочек и их отображение в единый сценарий: пользователь выбирает цепочки в таблице, сразу видит их на графе и при необходимости применяет фильтр
Переработана механика выбора цепочек: теперь выбрать строку можно кликом по всей области, а не только по чекбоксу. Также добавлен выбор одного или нескольких диапазонов цепочек с помощью манипуляторов
Расширены возможности работы с таблицей: добавлено отключение ненужных колонок, сложная фильтрация с комбинацией условий и сортировка внутри каждой колонки
Переработан toolbar графа: переключение режимов оформлено через segmented control, действия и управление масштабом сгруппированы в отдельные блоки, а кнопка управления сайдбаром вынесена ближе к области взаимодействия для более понятного разделения сценариев
Выбор диапазона цепочек в таблице Variant Explorer
Выбор диапазона цепочек в таблице Variant Explorer
Карина Мулкаманова
Ссылки
Карина Мулкаманова