Разработка интерфейса для Primo RPA AI Server

Обзор

Внутри компании появился сервис, который заметно улучшил работу с моделями для распознавания текста на документах: загрузка датасета из документов компании, разметка полей, обучение модели и дальнейшее использование модели в других продуктах. Такой подход давал более высокое качество распознавания и соответствовал требованиям безопасности — данные оставались внутри контура компании. Уже в ходе работы в продукте появился функционал дообучения (fine-tuning) базовых нейросетей под задачи компании и работы со скилами: суммаризация, извлечение, генерация и другие сценарии.

В проект меня пригласили как UX/UI дизайнера: интерфейс до этого собирали разработчики своими силами. В результате работы у сервиса снизился порог входа — продуктом могли пользоваться существенно больше людей без специальной подготовки в области ИИ и OCR.

Было и стало

Сервис был собран на Ant Design под React с визуальной темой Hope UI для Bootstrap. У компании уже было несколько веб-продуктов с задачей унифицировать и освежить интерфейс, поэтому в разработке опирались на компоненты этих систем.

Я погрузился в продукт и вместе с командой детально разобрал весь функционал.

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

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

Вопросы к команде по текущему состоянию

Ответы помогут зафиксировать эффект от внедрения в цифрах и фактах.

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

Паттерны интерфейса

Ниже — ключевые зоны продукта: как они поддерживают сценарии обучения и работы с моделью и чем отличаются от прежнего подхода.

Сопоставление полей (маппинг)

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

Датасет, обучение и контроль качества

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

Inference в проекте

Отдельный фокус — запуск и контроль модели внутри проекта: пользователь должен понимать состояние прогона и не терять связь с остальными настройками.

Развернуть

Полноэкранный режим и импорт

Речь не о «длинных задачах», а о процессах в отдельном контексте: одни до завершения блокируют работу с проектом, другие идут параллельно в отдельном окне, и при этом можно продолжать настраивать параметры проекта. Функционал вынесли в отдельное окно, потому что точек входа в такие задачи было несколько, а обычной модалки было недостаточно — нужно было пройти отдельный процесс в стороне и затем вернуться к настройкам проекта. Такой подход сократил объём разработки и тестирования.

Ниже — три варианта полноэкранного холста: импорт в отдельном окне, режим с панелями и минималистичный «zen».

Дальнейшее развитие

В дорожной карте оставались отдельные крупные куски: сценарии вокруг LLM (списки, статусы, действия), пошаговый мастер обучения с прогрессом и отменой, а также полноценный контур OCR с разметкой регионов и превью качества на странице. Они не входили в минимальный набор для первого промышленного релиза интерфейса, но заложенные паттерны должны их принять без больших переделок.

Процесс и передача

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

Вопросы следующему дизайнеру

• Что оказалось неочевидным в первые две недели в проекте.
• Какие артефакты и правила передачи пригодились больше всего.
• Что пришлось пересобрать и по какой причине.
• Как в трёх предложениях описать текущее состояние UX.

Итог

Интерфейс AI Server в Primo RPA перевели от «инженерного интерфейса разработчиков» к продукту с понятной логикой настройки и сопровождения пользователя. Упор на юзерфлоу и автоматизацию рутины снял часть нагрузки с внедрения и открыл дорогу к более широкому использованию внутри компании и у клиентов.