Упростил настройку Primo RPA AI Server: клиенты настраивают ИИ-сервис без команды внедрения

С настройкой справлялись только эксперты. Это тормозило продажи

AI Server разворачивается на внутренних серверах клиентов. Продукт активно тестировали, и обратная связь показала неприятное: настроить его могли только эксперты и команда внедрения Primo RPA. Каждый новый клиент съедал часы техподдержки. Продукт терял привлекательность и плохо масштабировался.

Начал со знакомства с командой и экспертами по настройке. Разделил сценарии на главные и вспомогательные, собрал визуализацию того, как ведёт себя пользователь, и вместе с разработкой искал, где интерфейс можно упростить. Я уже работал с ИИ и похожими веб-платформами, поэтому быстро разобрался в домене и говорил с разработкой на одном языке.

Ограничения

• Продуктом уже пользовались клиенты. Остановить разработку и пересобрать интерфейс целиком было нельзя.
• Изменения приходилось вписывать в план релизов, отдельного «редизайн-спринта» никто не выделял.
• Жёсткий стек: Ant Design под React со стилизацией под Hope UI. Новые компоненты рисовать только в крайнем случае, сначала выжимаем всё из готовой библиотеки.

Навигация путала: разделы проекта смешивались с главным меню

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

Перенёс главную навигацию наверх и ужал её. Контенту стало заметно просторнее, а схема осталась привычной. У проектов появилась собственная навигация, которая с главной не пересекается.

Редактор датасета: экран, где пользователи живут

Здесь проводят больше всего времени. Разметка полей на сотнях изображений — работа монотонная, но именно от неё зависит качество данных для обучения модели. Прежний редактор выбивался из общего стиля, выглядел перегруженно и путал в работе с полями.

Разобрал редактор на микросценарии, выстроил их по приоритету и связкам. Вместе с командой спроектировали поведение плавнее и понятнее, заложили место под будущий функционал, дизайн привели к общей стилистике сервиса.

Страница стала симметричной. Почти всё пространство уходит на размечаемое изображение, действия сгруппированы по панелям: нужная функция ищется быстро.

Для продвинутых пользователей добавил режим «Во весь экран». Боковые панели сворачиваются, работа идёт через горячие клавиши и нижнюю панель. На небольших мониторах это спасает.

Десятки полей на одном скане, и место под документ не страдает

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

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

Карточки обучения: паттерн, который разошёлся по всему продукту

После разметки датасета модель дообучают (fine-tuning). Разобрали все действия пользователя, перебрали несколько компоновок страницы. Остановились на ленте из карточек.

В начале ленты карточка настройки: результат разметки активного датасета, параметры, запуск fine-tuning.

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

Карточки сворачиваются, в шапке остаются название и статус.

Паттерны из этих карточек потом разошлись по другим разделам продукта. Единый стиль стало проще держать.

Долгие процессы — в соседнюю вкладку

Часть задач идёт параллельно с остальной работой. Для таких сценариев модальное окно открывается на отдельной странице.

На странице проекта в это время висит заглушка с кнопкой перехода к процессу.

Что я решил не делать, и почему

• Не стал блокировать кнопки на отдельных страницах во время активных процессов. Модалка на отдельной странице технически проще, а прогресс виден в соседней вкладке.
• Не рисовал новые компоненты, кроме крайних случаев. Готовая библиотека Ant Design ускоряла разработку и держала интерфейс консистентным.
• Не убрал боковые панели редактора совсем, а сделал сворачиваемыми. Новичкам нужны подсказки на экране, продвинутым — максимум места под документ.
• Не заводил отдельную дизайн-систему. В продукте уже был фреймворк, в разработку передавал ссылки на готовые юзерфлоу в Figma.

Передача в разработку

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

Результат

• Обращения к команде внедрения на этапе настройки сократились на 40%. Базовую настройку клиенты проходят сами.
• 7 из 10 новых клиентов настроили первый проект без техподдержки. До редизайна — 1 из 10.
• Настройка первого проекта: с ~3 дней до ~4 часов.
• Переработано 30+ экранов: навигация, редактор датасета, обучение моделей, импорт данных.
• Заложены паттерны, на которых функционал наращивается без больших переделок.
• В компанию наняли второго дизайнера. Я ввёл её в курс дела и курировал результат, после адаптации проект целиком перешёл под её ответственность.

Выводы

• Жёсткий фреймворк оказался не ограничением, а ускорителем: готовая библиотека компонентов позволила думать о сценариях, а не о пикселях.
• Самые ценные инсайты дали эксперты по настройке. В следующий раз вовлёк бы команду внедрения ещё раньше.
• Передача проекта новому дизайнеру подтвердила: заложенные паттерны работают, их можно объяснить и поддерживать без автора.