diff --git a/public/cases/ai-platform-primo-rpa/index.html b/public/cases/ai-platform-primo-rpa/index.html index 67f46e1..2a73835 100644 --- a/public/cases/ai-platform-primo-rpa/index.html +++ b/public/cases/ai-platform-primo-rpa/index.html @@ -1,13 +1,13 @@ - - - - - - - AI Server в Primo RPA — кейс + + + + + + + Настройка AI Server без помощи внедрения — кейс - + - - - - + + + + - +
@@ -348,7 +348,7 @@
- +
- -
-
-

Product Design · AI

-

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

-

- Платформа интеллектуальной обработки документов
- и оркестрации ИИ-агентов -

- -
-

Обзор

-

- Продукт AI Server разворачивается на внутренних серверах клиентов. Он позволяет использовать нейросети во внутреннем контуре компании и настраивается через веб-интерфейс. -

-

- Меня пригласили на проект как UX/UI-дизайнера. Продукт был в активной стадии тестирования; по обратной связи от клиентов стало ясно, что настройка слишком сложна: с ней справляются только эксперты и команда внедрения Primo RPA. Сложная настройка снижала привлекательность продукта и тормозила масштабирование. -

-

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

- -

- Ниже — погружение в продукт, примеры выполненных задач и паттерны интерфейса. -

-
- -
-

Погружение

-

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

- -

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

-

- Прорабатывать изменения в интерфейсе нужно было с учётом используемого фреймворка. На тот момент это был - Ant Design под React со стилизацией под - Hope UI. -

-

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

-
- -
-

Выполненные задачи

-

- Фрагменты интерфейса, которые я переработал или собрал почти с нуля. Ниже — отдельные задачи из проекта, которые хотелось показать в портфолио, а не обзор всего продукта. -

- -

Главная навигация сервиса

-

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

-
- Предыдущая главная навигация сервиса AI Server -
Предыдущая навигация
-
-
- Обновлённая главная навигация сервиса AI Server -
Обновлённая навигация
-
-

- Обновлённая навигация стала компактной и всё так же привычна большинству пользователей. Для контентной части пространства стало значительно больше. Как будет видно дальше, у проектов внутри появится отдельная навигация, которая не будет перекрывать главную. При этом улучшилась эстетическая составляющая дизайна сервиса. -

-

Навигация внутри конкретного проекта

-

- У пользователя остаётся доступ и к навигации внутри проекта, и к главной навигации сервиса. Разные типы проекта содержат разное количество пунктов, и такое решение позволяет удачно их разместить. -

-
- Навигация внутри NLP-проекта и главная навигация сервиса -
NLP-проект
-
-
- Навигация внутри OCR-проекта и главная навигация сервиса -
OCR-проект
-
-

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

-
- Вторичная навигация проекта со стрелочной формой пунктов -
Форма пунктов навигации
-
-

Редактор разметки датасета

-

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

-
- Редактор датасета — предыдущая версия для сравнения -
Предыдущая версия редактора датасета
-
-

- Я разобрал редактор на микросценарии, выстроил их по приоритету и связке между собой. С командой обсудили, как сделать поведение пользователя плавнее и понятнее. В новой структуре страницы заложил место под новый функционал и те же паттерны, что в остальном сервисе. Дизайн редактора привёл к общей стилистике. -

-
- Редактор датасета — текущая версия интерфейса -
Обновлённая версия редактора датасета
-
-

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

-
- Вайрфрейм редактора датасета — режим по умолчанию -
Каркас: режим по умолчанию
-
-

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

-
-
-
- Полноэкранный режим с боковыми панелями -
-
- Полноэкранный режим без отвлекающих панелей -
-
-
Вид редактора в режиме «Во весь экран»
-
-
-
-
- Вайрфрейм zen mode — обе панели -
-
- Вайрфрейм zen mode -
-
- Вайрфрейм zen mode — левая панель -
-
- Вайрфрейм zen mode — правая панель -
-
-
Варианты рабочего вида в режиме «На весь экран»
-
-

- Нижняя панель позволяет переключаться между изображениями и выполнять быстрые действия. -

-
- Главная панель инструментов редактора датасета -
Нижняя панель инструментов
-
- -

Карточки настройки обучения модели

-

- После разметки датасета модель можно дообучить (fine-tuning). Мы с командой, как обычно, разобрали все действия пользователя для этой задачи. Сделали несколько вариантов компоновки этой страницы; самым удачным оказался вариант с лентой из карточек. -

-
- Обзор карточек настройки обучения в проекте -
Вид раздела обучения моделей
-
-

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

-
- Карточка настройки обучения -
Карточка настройки обучения
-
-

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

- -

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

-
- Карточка процесса обучения модели -
Карточка процесса обучения
-
-

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

-
- Вайрфрейм карточки процесса обучения -
Вайрфрейм карточки процесса обучения
-
-

- Карточки могут быть свёрнуты. Для удобства в шапку вынесены название и статус. -

-
- Свёрнутая карточка настройки обучения -
Свёрнутая карточка
-
-

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

- -

Настройка параметров полей

-

- На одной из страниц раздела проекта нужно было дать возможность настроить уникальные параметры полей для датасета. Редактору требовалась большая область под изображение (скан документа), могло быть десятки полей, у каждого — свои зависимые параметры и типы. -

-

- На видео — работа прототипа готового решения. -

-
-
- -
-
Сопоставление полей в интерфейсе
-
-

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

-

- Редактор для меня оказался интересной и сложной задачей: было много черновиков и вариантов поведения. В финале остался вариант, который закрывал все требования, которые мы с командой сформулировали. -

- -

Модальные окна на отдельном экране

-

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

-
- Модальное окно импорта датасета на отдельном экране -
Импорт датасета в модальном окне
-
-

- На странице проекта отображается заглушка: процесс идёт, рядом кнопка перехода к нему. -

-
- Импорт датасета внутри проекта -
Импорт датасета внутри проекта
-
-

- Такие заглушки есть в нескольких разделах проекта — в зависимости от того, можно ли с ним работать, пока задача активна. -

- -

- Такой вариант оказался технически проще, чем точечно блокировать кнопки на отдельных страницах. -

- -
- -
-

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

-

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

-

- Я делал дизайн в Figma, в разработку передавал ссылки на готовые юзерфлоу. UI-kit был построен на основе уже используемого фрэймворка, с коррекцией под уникальные функции. -

-

- Время от времени созванивался с верстальщиком тет-а-тет, если нужно уточнить детали по макетам или объяснить поведение интерфейса. После вёрстки давал фидбэк на правки, чтобы результат не отличался от задуманного поведения и вида интерфейса. -

-
- -
-

Смена дизайнера

-

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

-
- -
-

Итог

-

- Интерфейс Primo RPA AI Server стал выглядеть консистентно. С ним могут работать пользователи, которые ещё не эксперты в области ИИ. Для будущих изменений в интерфейсе заложена возможность наращивать функционал без больших переделок. -

-
-
-
- + +
+
+

Product Design · AI · STAR

+

AI Server, который настраивают без внедренца

+

+ Как я снизил порог входа в Primo RPA AI Server,
+ разгрузил поддержку и отдел внедрения +

+ +
+

Ситуация

+

+ AI Server ставят на внутренние серверы клиента. Он позволяет использовать нейросети внутри контура компании: загрузил датасет своих документов, разметил поля, обучил модель, и потом используешь её в Primo RPA Studio или в любом клиентском продукте с доступом по REST API. Качество распознавания вырастает сильно, а документы не покидают периметр компании. Позже сервис научился дообучать любую базовую модель под задачи бизнеса: файнтюнинг и скиллы на суммаризацию, извлечение, генерацию. +

+

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

+ +

+ Обратная связь от клиентов сходилась в одном: настройка проекта занимает слишком много шагов. Их три типа, и каждый настраивался по-своему. Между созданием проекта и его реальным использованием проходили недели, почти всегда с участием специалиста компании. Запутанная навигация и дублирующийся функционал тормозили отдел внедрения и не давали масштабировать продукт на широкую аудиторию. +

+
+ +
+

Задача

+

+ Меня пригласили как UX/UI-дизайнера: проект делали одни разработчики, дизайнера в нём не было. Бизнес ждал, что настройку клиент сможет пройти сам, без постоянной помощи поддержки и внедрения. Моя задача звучала так: снизить порог входа, чтобы работать с сервисом могли люди без специальных знаний в ИИ и OCR. +

+ +

+ Остановить разработку и перерисовать всё целиком было нельзя, продукт уже в эксплуатации. Значит, менять придётся по частям, вкладываясь в текущие релизы. +

+
+ +
+

Действия

+ +

Погружение и разбор сценариев

+

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

+

+ Юзерфлоу оказались полезнее, чем я ожидал. Они подсветили команде конкретные места, где путь пользователя путается, и заодно вскрыли проблемы в самих процессах настройки. Часть шагов удалось автоматизировать и спрятать от пользователя: меньше рутины и меньше шансов ошибиться. +

+
+ Доска с пользовательскими сценариями AI Server: экраны и переходы между ними +
Доска сценариев: так выглядела разобранная на шаги настройка проекта
+
+ +

Навигация: главная и внутри проекта

+

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

+
+ Главная страница AI Server до редизайна +
Так сервис выглядел, когда я пришёл в проект
+
+

+ Главная навигация стала компактной и осталась привычной. У проектов появилась своя, отдельная, которая не перекрывает главную. +

+

+ Разные типы проектов содержат разное количество пунктов, и такая схема позволяет разместить их без тесноты. +

+
+ Обновлённая главная страница AI Server +
Обновлённая главная навигация: компактнее, под контент ушло заметно больше места
+
+
+
+
+ Навигация внутри NLP-проекта +
+
+ Навигация внутри OCR-проекта +
+
+
Одна и та же схема под разное число разделов: NLP-проект и OCR-проект
+
+

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

+
+ Вторичная навигация проекта со стрелочной формой пунктов +
Форма пунктов намекает на порядок, но не блокирует непоследовательную навигацию
+
+ +

Редактор разметки датасета

+

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

+
+ Редактор датасета до переработки +
Редактор до переработки
+
+

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

+
+ Редактор датасета после переработки +
Редактор после переработки, приведён к общей стилистике сервиса
+
+
+ Каркас редактора датасета, режим по умолчанию +
Каркас: почти всё пространство уходит под размечаемое изображение, действия сгруппированы по панелям
+
+

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

+
+
+
+ Полноэкранный режим редактора с боковыми панелями +
+
+ Полноэкранный режим редактора без панелей +
+
+
Режим «Во весь экран»: с панелями и без
+
+
+ Нижняя панель инструментов редактора датасета +
Нижняя панель: переключение между изображениями и быстрые действия
+
+ +

Карточки настройки обучения

+

+ После разметки модель можно дообучить. Сценарий разобрали с командой так же, как остальные, и сделали несколько вариантов компоновки страницы. Выбрали ленту из карточек: она оказалась самой читаемой. +

+
+ Раздел обучения моделей в проекте +
Раздел обучения: лента карточек
+
+

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

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

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

+ + +

Настройка параметров полей

+

+ Одна из страниц проекта требовала настройки уникальных параметров полей для датасета. Условия жёсткие: редактору нужна большая область под скан документа, полей может быть несколько десятков, у каждого свои зависимые параметры и типы. +

+
+
+ +
+
Прототип сопоставления полей в работе
+
+

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

+ +

Долгие процессы на отдельном экране

+

+ Часть задач в сервисе выполняется долго, и пользователю нужно параллельно делать что-то ещё. Для таких случаев сделали отдельную страницу с модальным окном процесса. +

+
+ Импорт датасета в модальном окне на отдельном экране +
Импорт датасета на отдельном экране
+
+

+ На странице проекта в это время стоит заглушка: процесс идёт, рядом кнопка перехода к нему. Пользователь может открыть окно с процессом в отдельном окне на втором мониторе и следить за прогрессом, пока продолжает работать с доступными разделами. +

+
+ Заглушка с процессом импорта внутри проекта +
Заглушка внутри проекта: процесс виден, переход к нему в один клик
+
+

+ Тут сошлись удобство и стоимость разработки. Точечно блокировать кнопки на каждой странице вышло бы дороже, чем вынести процесс на отдельный экран. +

+
+ +
+

Результат

+
+ Главный дашборд Primo AI Server: счётчики проектов, машин и моделей, витрина проектов распознавания, состояние вычислительных узлов +
Главная страница сервиса: метрики, проекты и состояние машин на одном экране
+
+

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

+ +

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

+
+ +
+

Что сделал бы иначе

+

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

+
+
+
+

Смотрите также

@@ -909,7 +816,7 @@
- +

Контакты

@@ -1322,7 +1229,7 @@
- + - + - + - - - - - + + + + + diff --git a/public/cases/primo-ai-server-star/index.html b/public/cases/primo-ai-server-star/index.html deleted file mode 100644 index bf9efb8..0000000 --- a/public/cases/primo-ai-server-star/index.html +++ /dev/null @@ -1,1276 +0,0 @@ - - - - - - - Настройка AI Server без помощи внедрения — кейс - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- -
- -
-
-
- -
-
- - -
- - - -
-
- -
- - -
-
-

Product Design · AI · STAR

-

AI Server, который настраивают без внедренца

-

- Как я снизил порог входа в Primo RPA AI Server,
- разгрузил поддержку и отдел внедрения -

- -
-

Ситуация

-

- AI Server ставят на внутренние серверы клиента. Он позволяет использовать нейросети внутри контура компании: загрузил датасет своих документов, разметил поля, обучил модель, и потом используешь её в Primo RPA Studio или в любом клиентском продукте с доступом по REST API. Качество распознавания вырастает сильно, а документы не покидают периметр компании. Позже сервис научился дообучать любую базовую модель под задачи бизнеса: файнтюнинг и скиллы на суммаризацию, извлечение, генерацию. -

-

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

- -

- Обратная связь от клиентов сходилась в одном: настройка проекта занимает слишком много шагов. Их три типа, и каждый настраивался по-своему. Между созданием проекта и его реальным использованием проходили недели, почти всегда с участием специалиста компании. Запутанная навигация и дублирующийся функционал тормозили отдел внедрения и не давали масштабировать продукт на широкую аудиторию. -

-
- -
-

Задача

-

- Меня пригласили как UX/UI-дизайнера: проект делали одни разработчики, дизайнера в нём не было. Бизнес ждал, что настройку клиент сможет пройти сам, без постоянной помощи поддержки и внедрения. Моя задача звучала так: снизить порог входа, чтобы работать с сервисом могли люди без специальных знаний в ИИ и OCR. -

- -

- Остановить разработку и перерисовать всё целиком было нельзя, продукт уже в эксплуатации. Значит, менять придётся по частям, вкладываясь в текущие релизы. -

-
- -
-

Действия

- -

Погружение и разбор сценариев

-

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

-

- Юзерфлоу оказались полезнее, чем я ожидал. Они подсветили команде конкретные места, где путь пользователя путается, и заодно вскрыли проблемы в самих процессах настройки. Часть шагов удалось автоматизировать и спрятать от пользователя: меньше рутины и меньше шансов ошибиться. -

-
- Доска с пользовательскими сценариями AI Server: экраны и переходы между ними -
Доска сценариев: так выглядела разобранная на шаги настройка проекта
-
- -

Навигация: главная и внутри проекта

-

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

-
- Главная страница AI Server до редизайна -
Так сервис выглядел, когда я пришёл в проект
-
-

- Главная навигация стала компактной и осталась привычной. У проектов появилась своя, отдельная, которая не перекрывает главную. -

-

- Разные типы проектов содержат разное количество пунктов, и такая схема позволяет разместить их без тесноты. -

-
- Обновлённая главная страница AI Server -
Обновлённая главная навигация: компактнее, под контент ушло заметно больше места
-
-
-
-
- Навигация внутри NLP-проекта -
-
- Навигация внутри OCR-проекта -
-
-
Одна и та же схема под разное число разделов: NLP-проект и OCR-проект
-
-

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

-
- Вторичная навигация проекта со стрелочной формой пунктов -
Форма пунктов намекает на порядок, но не блокирует непоследовательную навигацию
-
- -

Редактор разметки датасета

-

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

-
- Редактор датасета до переработки -
Редактор до переработки
-
-

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

-
- Редактор датасета после переработки -
Редактор после переработки, приведён к общей стилистике сервиса
-
-
- Каркас редактора датасета, режим по умолчанию -
Каркас: почти всё пространство уходит под размечаемое изображение, действия сгруппированы по панелям
-
-

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

-
-
-
- Полноэкранный режим редактора с боковыми панелями -
-
- Полноэкранный режим редактора без панелей -
-
-
Режим «Во весь экран»: с панелями и без
-
-
- Нижняя панель инструментов редактора датасета -
Нижняя панель: переключение между изображениями и быстрые действия
-
- -

Карточки настройки обучения

-

- После разметки модель можно дообучить. Сценарий разобрали с командой так же, как остальные, и сделали несколько вариантов компоновки страницы. Выбрали ленту из карточек: она оказалась самой читаемой. -

-
- Раздел обучения моделей в проекте -
Раздел обучения: лента карточек
-
-

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

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

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

- - -

Настройка параметров полей

-

- Одна из страниц проекта требовала настройки уникальных параметров полей для датасета. Условия жёсткие: редактору нужна большая область под скан документа, полей может быть несколько десятков, у каждого свои зависимые параметры и типы. -

-
-
- -
-
Прототип сопоставления полей в работе
-
-

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

- -

Долгие процессы на отдельном экране

-

- Часть задач в сервисе выполняется долго, и пользователю нужно параллельно делать что-то ещё. Для таких случаев сделали отдельную страницу с модальным окном процесса. -

-
- Импорт датасета в модальном окне на отдельном экране -
Импорт датасета на отдельном экране
-
-

- На странице проекта в это время стоит заглушка: процесс идёт, рядом кнопка перехода к нему. Пользователь может открыть окно с процессом в отдельном окне на втором мониторе и следить за прогрессом, пока продолжает работать с доступными разделами. -

-
- Заглушка с процессом импорта внутри проекта -
Заглушка внутри проекта: процесс виден, переход к нему в один клик
-
-

- Тут сошлись удобство и стоимость разработки. Точечно блокировать кнопки на каждой странице вышло бы дороже, чем вынести процесс на отдельный экран. -

-
- -
-

Результат

-
- Главный дашборд Primo AI Server: счётчики проектов, машин и моделей, витрина проектов распознавания, состояние вычислительных узлов -
Главная страница сервиса: метрики, проекты и состояние машин на одном экране
-
-

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

- -

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

-
- -
-

Что сделал бы иначе

-

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

-
-
-
- -
-
-

Смотрите также

-
    -
  1. - - -
    -

    Primo AI Server

    -
      -
    • UX/UI
      • -
    • Web App
      • -
    -

    Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.

    -
    -     -
    2. -
  2. - - -
    -

    Lunacy

    -
      -
    • UX/UI
      • -
    • Desktop App
      • -
    -

    Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.

    -
    -     -
    3. - - -
  3. - - -
    -

    Primo Orc

    -
      -
    • Менторство и наставничество
      • -
    -

    Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.

    -
    -     -
    4. - - -
-
-
- - -
-
-

Контакты

- -
-
- - - - - - - - - - - diff --git a/public/sitemap.xml b/public/sitemap.xml index 7bae98e..5448c23 100644 --- a/public/sitemap.xml +++ b/public/sitemap.xml @@ -24,7 +24,7 @@ https://mamadaevv.site/cases/ai-platform-primo-rpa/ - 2026-10-01 + 2026-10-04 diff --git a/scripts/build-pages.mjs b/scripts/build-pages.mjs index 76228a9..7bb944f 100644 --- a/scripts/build-pages.mjs +++ b/scripts/build-pages.mjs @@ -37,18 +37,15 @@ const NOINDEX_PAGES = new Set([ "cases/design-system", "cases/template-elements-demo", "cases/mini-projects-showcase", - "cases/primo-ai-server-star", ]); // Страницы, у которых пока нет перевода: собираются только в дефолтную локаль, // чтобы /en/ не отдавал русскоязычный дубль и не попадал в sitemap. -const DEFAULT_LOCALE_ONLY_PAGES = new Set([ - "cases/primo-ai-server-star", -]); +const DEFAULT_LOCALE_ONLY_PAGES = new Set(); -// Своя og-картинка для отдельной страницы (ключ — путь без .html). +// Своя og-картинка для страницы основного AI Server-кейса. const PER_PAGE_OG_IMAGE = { - "cases/primo-ai-server-star": `${SITE_ORIGIN}/assets/og/og-primo-star.png`, + "cases/ai-platform-primo-rpa": `${SITE_ORIGIN}/assets/og/og-primo-star.png`, }; const titleRe = /([\s\S]*?)<\/title>/i; diff --git a/src/pages/cases/ai-platform-primo-rpa.html b/src/pages/cases/ai-platform-primo-rpa.html index f5a63c5..256ba51 100644 --- a/src/pages/cases/ai-platform-primo-rpa.html +++ b/src/pages/cases/ai-platform-primo-rpa.html @@ -1,593 +1,500 @@ -<!DOCTYPE html> -<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather"> - <head> - <meta charset="utf-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> - <meta - name="description" - content="Кейс: интерфейс AI Server в Primo RPA — OCR на корпоративных документах, дообучение моделей, skills, UX/UI." - /> - <title>AI Server в Primo RPA — кейс - {{> head-links}} - {{> head-plyr}} - - - - - {{> header-case}} -{{> fab-stack}} -
-
-

Product Design · AI

-

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

-

- Платформа интеллектуальной обработки документов
- и оркестрации ИИ-агентов -

- -
-

Обзор

-

- Продукт AI Server разворачивается на внутренних серверах клиентов. Он позволяет использовать нейросети во внутреннем контуре компании и настраивается через веб-интерфейс. -

-

- Меня пригласили на проект как UX/UI-дизайнера. Продукт был в активной стадии тестирования; по обратной связи от клиентов стало ясно, что настройка слишком сложна: с ней справляются только эксперты и команда внедрения Primo RPA. Сложная настройка снижала привлекательность продукта и тормозила масштабирование. -

-

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

- -

- Ниже — погружение в продукт, примеры выполненных задач и паттерны интерфейса. -

-
- -
-

Погружение

-

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

- -

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

-

- Прорабатывать изменения в интерфейсе нужно было с учётом используемого фреймворка. На тот момент это был - Ant Design под React со стилизацией под - Hope UI. -

-

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

-
- -
-

Выполненные задачи

-

- Фрагменты интерфейса, которые я переработал или собрал почти с нуля. Ниже — отдельные задачи из проекта, которые хотелось показать в портфолио, а не обзор всего продукта. -

- -

Главная навигация сервиса

-

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

-
- Предыдущая главная навигация сервиса AI Server -
Предыдущая навигация
-
-
- Обновлённая главная навигация сервиса AI Server -
Обновлённая навигация
-
-

- Обновлённая навигация стала компактной и всё так же привычна большинству пользователей. Для контентной части пространства стало значительно больше. Как будет видно дальше, у проектов внутри появится отдельная навигация, которая не будет перекрывать главную. При этом улучшилась эстетическая составляющая дизайна сервиса. -

-

Навигация внутри конкретного проекта

-

- У пользователя остаётся доступ и к навигации внутри проекта, и к главной навигации сервиса. Разные типы проекта содержат разное количество пунктов, и такое решение позволяет удачно их разместить. -

-
- Навигация внутри NLP-проекта и главная навигация сервиса -
NLP-проект
-
-
- Навигация внутри OCR-проекта и главная навигация сервиса -
OCR-проект
-
-

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

-
- Вторичная навигация проекта со стрелочной формой пунктов -
Форма пунктов навигации
-
-

Редактор разметки датасета

-

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

-
- Редактор датасета — предыдущая версия для сравнения -
Предыдущая версия редактора датасета
-
-

- Я разобрал редактор на микросценарии, выстроил их по приоритету и связке между собой. С командой обсудили, как сделать поведение пользователя плавнее и понятнее. В новой структуре страницы заложил место под новый функционал и те же паттерны, что в остальном сервисе. Дизайн редактора привёл к общей стилистике. -

-
- Редактор датасета — текущая версия интерфейса -
Обновлённая версия редактора датасета
-
-

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

-
- Вайрфрейм редактора датасета — режим по умолчанию -
Каркас: режим по умолчанию
-
-

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

-
-
-
- Полноэкранный режим с боковыми панелями -
-
- Полноэкранный режим без отвлекающих панелей -
-
-
Вид редактора в режиме «Во весь экран»
-
-
-
-
- Вайрфрейм zen mode — обе панели -
-
- Вайрфрейм zen mode -
-
- Вайрфрейм zen mode — левая панель -
-
- Вайрфрейм zen mode — правая панель -
-
-
Варианты рабочего вида в режиме «На весь экран»
-
-

- Нижняя панель позволяет переключаться между изображениями и выполнять быстрые действия. -

-
- Главная панель инструментов редактора датасета -
Нижняя панель инструментов
-
- -

Карточки настройки обучения модели

-

- После разметки датасета модель можно дообучить (fine-tuning). Мы с командой, как обычно, разобрали все действия пользователя для этой задачи. Сделали несколько вариантов компоновки этой страницы; самым удачным оказался вариант с лентой из карточек. -

-
- Обзор карточек настройки обучения в проекте -
Вид раздела обучения моделей
-
-

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

-
- Карточка настройки обучения -
Карточка настройки обучения
-
-

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

- -

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

-
- Карточка процесса обучения модели -
Карточка процесса обучения
-
-

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

-
- Вайрфрейм карточки процесса обучения -
Вайрфрейм карточки процесса обучения
-
-

- Карточки могут быть свёрнуты. Для удобства в шапку вынесены название и статус. -

-
- Свёрнутая карточка настройки обучения -
Свёрнутая карточка
-
-

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

- -

Настройка параметров полей

-

- На одной из страниц раздела проекта нужно было дать возможность настроить уникальные параметры полей для датасета. Редактору требовалась большая область под изображение (скан документа), могло быть десятки полей, у каждого — свои зависимые параметры и типы. -

-

- На видео — работа прототипа готового решения. -

-
-
- -
-
Сопоставление полей в интерфейсе
-
-

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

-

- Редактор для меня оказался интересной и сложной задачей: было много черновиков и вариантов поведения. В финале остался вариант, который закрывал все требования, которые мы с командой сформулировали. -

- -

Модальные окна на отдельном экране

-

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

-
- Модальное окно импорта датасета на отдельном экране -
Импорт датасета в модальном окне
-
-

- На странице проекта отображается заглушка: процесс идёт, рядом кнопка перехода к нему. -

-
- Импорт датасета внутри проекта -
Импорт датасета внутри проекта
-
-

- Такие заглушки есть в нескольких разделах проекта — в зависимости от того, можно ли с ним работать, пока задача активна. -

- -

- Такой вариант оказался технически проще, чем точечно блокировать кнопки на отдельных страницах. -

- -
- -
-

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

-

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

-

- Я делал дизайн в Figma, в разработку передавал ссылки на готовые юзерфлоу. UI-kit был построен на основе уже используемого фрэймворка, с коррекцией под уникальные функции. -

-

- Время от времени созванивался с верстальщиком тет-а-тет, если нужно уточнить детали по макетам или объяснить поведение интерфейса. После вёрстки давал фидбэк на правки, чтобы результат не отличался от задуманного поведения и вида интерфейса. -

-
- -
-

Смена дизайнера

-

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

-
- -
-

Итог

-

- Интерфейс Primo RPA AI Server стал выглядеть консистентно. С ним могут работать пользователи, которые ещё не эксперты в области ИИ. Для будущих изменений в интерфейсе заложена возможность наращивать функционал без больших переделок. -

-
-
-
- - {{> projects-related}}{{> projects-section}} -{{> contact-section}} -{{> footer}} -{{> cookie-notice}} -{{> nav-more-floating}} - - - - + + + + + + + Настройка AI Server без помощи внедрения — кейс + {{> head-links}} + {{> head-plyr}} + + + + + {{> header-case}} +{{> fab-stack}} +
+
+

Product Design · AI · STAR

+

AI Server, который настраивают без внедренца

+

+ Как я снизил порог входа в Primo RPA AI Server,
+ разгрузил поддержку и отдел внедрения +

+ +
+

Ситуация

+

+ AI Server ставят на внутренние серверы клиента. Он позволяет использовать нейросети внутри контура компании: загрузил датасет своих документов, разметил поля, обучил модель, и потом используешь её в Primo RPA Studio или в любом клиентском продукте с доступом по REST API. Качество распознавания вырастает сильно, а документы не покидают периметр компании. Позже сервис научился дообучать любую базовую модель под задачи бизнеса: файнтюнинг и скиллы на суммаризацию, извлечение, генерацию. +

+

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

+ +

+ Обратная связь от клиентов сходилась в одном: настройка проекта занимает слишком много шагов. Их три типа, и каждый настраивался по-своему. Между созданием проекта и его реальным использованием проходили недели, почти всегда с участием специалиста компании. Запутанная навигация и дублирующийся функционал тормозили отдел внедрения и не давали масштабировать продукт на широкую аудиторию. +

+
+ +
+

Задача

+

+ Меня пригласили как UX/UI-дизайнера: проект делали одни разработчики, дизайнера в нём не было. Бизнес ждал, что настройку клиент сможет пройти сам, без постоянной помощи поддержки и внедрения. Моя задача звучала так: снизить порог входа, чтобы работать с сервисом могли люди без специальных знаний в ИИ и OCR. +

+ +

+ Остановить разработку и перерисовать всё целиком было нельзя, продукт уже в эксплуатации. Значит, менять придётся по частям, вкладываясь в текущие релизы. +

+
+ +
+

Действия

+ +

Погружение и разбор сценариев

+

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

+

+ Юзерфлоу оказались полезнее, чем я ожидал. Они подсветили команде конкретные места, где путь пользователя путается, и заодно вскрыли проблемы в самих процессах настройки. Часть шагов удалось автоматизировать и спрятать от пользователя: меньше рутины и меньше шансов ошибиться. +

+
+ Доска с пользовательскими сценариями AI Server: экраны и переходы между ними +
Доска сценариев: так выглядела разобранная на шаги настройка проекта
+
+ +

Навигация: главная и внутри проекта

+

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

+
+ Главная страница AI Server до редизайна +
Так сервис выглядел, когда я пришёл в проект
+
+

+ Главная навигация стала компактной и осталась привычной. У проектов появилась своя, отдельная, которая не перекрывает главную. +

+

+ Разные типы проектов содержат разное количество пунктов, и такая схема позволяет разместить их без тесноты. +

+
+ Обновлённая главная страница AI Server +
Обновлённая главная навигация: компактнее, под контент ушло заметно больше места
+
+
+
+
+ Навигация внутри NLP-проекта +
+
+ Навигация внутри OCR-проекта +
+
+
Одна и та же схема под разное число разделов: NLP-проект и OCR-проект
+
+

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

+
+ Вторичная навигация проекта со стрелочной формой пунктов +
Форма пунктов намекает на порядок, но не блокирует непоследовательную навигацию
+
+ +

Редактор разметки датасета

+

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

+
+ Редактор датасета до переработки +
Редактор до переработки
+
+

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

+
+ Редактор датасета после переработки +
Редактор после переработки, приведён к общей стилистике сервиса
+
+
+ Каркас редактора датасета, режим по умолчанию +
Каркас: почти всё пространство уходит под размечаемое изображение, действия сгруппированы по панелям
+
+

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

+
+
+
+ Полноэкранный режим редактора с боковыми панелями +
+
+ Полноэкранный режим редактора без панелей +
+
+
Режим «Во весь экран»: с панелями и без
+
+
+ Нижняя панель инструментов редактора датасета +
Нижняя панель: переключение между изображениями и быстрые действия
+
+ +

Карточки настройки обучения

+

+ После разметки модель можно дообучить. Сценарий разобрали с командой так же, как остальные, и сделали несколько вариантов компоновки страницы. Выбрали ленту из карточек: она оказалась самой читаемой. +

+
+ Раздел обучения моделей в проекте +
Раздел обучения: лента карточек
+
+

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

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

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

+ + +

Настройка параметров полей

+

+ Одна из страниц проекта требовала настройки уникальных параметров полей для датасета. Условия жёсткие: редактору нужна большая область под скан документа, полей может быть несколько десятков, у каждого свои зависимые параметры и типы. +

+
+
+ +
+
Прототип сопоставления полей в работе
+
+

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

+ +

Долгие процессы на отдельном экране

+

+ Часть задач в сервисе выполняется долго, и пользователю нужно параллельно делать что-то ещё. Для таких случаев сделали отдельную страницу с модальным окном процесса. +

+
+ Импорт датасета в модальном окне на отдельном экране +
Импорт датасета на отдельном экране
+
+

+ На странице проекта в это время стоит заглушка: процесс идёт, рядом кнопка перехода к нему. Пользователь может открыть окно с процессом в отдельном окне на втором мониторе и следить за прогрессом, пока продолжает работать с доступными разделами. +

+
+ Заглушка с процессом импорта внутри проекта +
Заглушка внутри проекта: процесс виден, переход к нему в один клик
+
+

+ Тут сошлись удобство и стоимость разработки. Точечно блокировать кнопки на каждой странице вышло бы дороже, чем вынести процесс на отдельный экран. +

+
+ +
+

Результат

+
+ Главный дашборд Primo AI Server: счётчики проектов, машин и моделей, витрина проектов распознавания, состояние вычислительных узлов +
Главная страница сервиса: метрики, проекты и состояние машин на одном экране
+
+

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

+ +

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

+
+ +
+

Что сделал бы иначе

+

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

+
+
+
+ + {{> projects-related}}{{> projects-section}} +{{> contact-section}} +{{> footer}} +{{> cookie-notice}} +{{> nav-more-floating}} + + + + diff --git a/src/pages/cases/primo-ai-server-star.html b/src/pages/cases/primo-ai-server-star.html deleted file mode 100644 index ea9d9c5..0000000 --- a/src/pages/cases/primo-ai-server-star.html +++ /dev/null @@ -1,500 +0,0 @@ - - - - - - - Настройка AI Server без помощи внедрения — кейс - {{> head-links}} - {{> head-plyr}} - - - - - {{> header-case}} -{{> fab-stack}} -
-
-

Product Design · AI · STAR

-

AI Server, который настраивают без внедренца

-

- Как я снизил порог входа в Primo RPA AI Server,
- разгрузил поддержку и отдел внедрения -

- -
-

Ситуация

-

- AI Server ставят на внутренние серверы клиента. Он позволяет использовать нейросети внутри контура компании: загрузил датасет своих документов, разметил поля, обучил модель, и потом используешь её в Primo RPA Studio или в любом клиентском продукте с доступом по REST API. Качество распознавания вырастает сильно, а документы не покидают периметр компании. Позже сервис научился дообучать любую базовую модель под задачи бизнеса: файнтюнинг и скиллы на суммаризацию, извлечение, генерацию. -

-

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

- -

- Обратная связь от клиентов сходилась в одном: настройка проекта занимает слишком много шагов. Их три типа, и каждый настраивался по-своему. Между созданием проекта и его реальным использованием проходили недели, почти всегда с участием специалиста компании. Запутанная навигация и дублирующийся функционал тормозили отдел внедрения и не давали масштабировать продукт на широкую аудиторию. -

-
- -
-

Задача

-

- Меня пригласили как UX/UI-дизайнера: проект делали одни разработчики, дизайнера в нём не было. Бизнес ждал, что настройку клиент сможет пройти сам, без постоянной помощи поддержки и внедрения. Моя задача звучала так: снизить порог входа, чтобы работать с сервисом могли люди без специальных знаний в ИИ и OCR. -

- -

- Остановить разработку и перерисовать всё целиком было нельзя, продукт уже в эксплуатации. Значит, менять придётся по частям, вкладываясь в текущие релизы. -

-
- -
-

Действия

- -

Погружение и разбор сценариев

-

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

-

- Юзерфлоу оказались полезнее, чем я ожидал. Они подсветили команде конкретные места, где путь пользователя путается, и заодно вскрыли проблемы в самих процессах настройки. Часть шагов удалось автоматизировать и спрятать от пользователя: меньше рутины и меньше шансов ошибиться. -

-
- Доска с пользовательскими сценариями AI Server: экраны и переходы между ними -
Доска сценариев: так выглядела разобранная на шаги настройка проекта
-
- -

Навигация: главная и внутри проекта

-

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

-
- Главная страница AI Server до редизайна -
Так сервис выглядел, когда я пришёл в проект
-
-

- Главная навигация стала компактной и осталась привычной. У проектов появилась своя, отдельная, которая не перекрывает главную. -

-

- Разные типы проектов содержат разное количество пунктов, и такая схема позволяет разместить их без тесноты. -

-
- Обновлённая главная страница AI Server -
Обновлённая главная навигация: компактнее, под контент ушло заметно больше места
-
-
-
-
- Навигация внутри NLP-проекта -
-
- Навигация внутри OCR-проекта -
-
-
Одна и та же схема под разное число разделов: NLP-проект и OCR-проект
-
-

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

-
- Вторичная навигация проекта со стрелочной формой пунктов -
Форма пунктов намекает на порядок, но не блокирует непоследовательную навигацию
-
- -

Редактор разметки датасета

-

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

-
- Редактор датасета до переработки -
Редактор до переработки
-
-

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

-
- Редактор датасета после переработки -
Редактор после переработки, приведён к общей стилистике сервиса
-
-
- Каркас редактора датасета, режим по умолчанию -
Каркас: почти всё пространство уходит под размечаемое изображение, действия сгруппированы по панелям
-
-

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

-
-
-
- Полноэкранный режим редактора с боковыми панелями -
-
- Полноэкранный режим редактора без панелей -
-
-
Режим «Во весь экран»: с панелями и без
-
-
- Нижняя панель инструментов редактора датасета -
Нижняя панель: переключение между изображениями и быстрые действия
-
- -

Карточки настройки обучения

-

- После разметки модель можно дообучить. Сценарий разобрали с командой так же, как остальные, и сделали несколько вариантов компоновки страницы. Выбрали ленту из карточек: она оказалась самой читаемой. -

-
- Раздел обучения моделей в проекте -
Раздел обучения: лента карточек
-
-

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

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

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

- - -

Настройка параметров полей

-

- Одна из страниц проекта требовала настройки уникальных параметров полей для датасета. Условия жёсткие: редактору нужна большая область под скан документа, полей может быть несколько десятков, у каждого свои зависимые параметры и типы. -

-
-
- -
-
Прототип сопоставления полей в работе
-
-

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

- -

Долгие процессы на отдельном экране

-

- Часть задач в сервисе выполняется долго, и пользователю нужно параллельно делать что-то ещё. Для таких случаев сделали отдельную страницу с модальным окном процесса. -

-
- Импорт датасета в модальном окне на отдельном экране -
Импорт датасета на отдельном экране
-
-

- На странице проекта в это время стоит заглушка: процесс идёт, рядом кнопка перехода к нему. Пользователь может открыть окно с процессом в отдельном окне на втором мониторе и следить за прогрессом, пока продолжает работать с доступными разделами. -

-
- Заглушка с процессом импорта внутри проекта -
Заглушка внутри проекта: процесс виден, переход к нему в один клик
-
-

- Тут сошлись удобство и стоимость разработки. Точечно блокировать кнопки на каждой странице вышло бы дороже, чем вынести процесс на отдельный экран. -

-
- -
-

Результат

-
- Главный дашборд Primo AI Server: счётчики проектов, машин и моделей, витрина проектов распознавания, состояние вычислительных узлов -
Главная страница сервиса: метрики, проекты и состояние машин на одном экране
-
-

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

- -

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

-
- -
-

Что сделал бы иначе

-

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

-
-
-
- - {{> projects-related}}{{> projects-section}} -{{> contact-section}} -{{> footer}} -{{> cookie-notice}} -{{> nav-more-floating}} - - - - diff --git a/src/partials/projects-related.html b/src/partials/projects-related.html index 7c22b39..9d229ff 100644 --- a/src/partials/projects-related.html +++ b/src/partials/projects-related.html @@ -7,7 +7,7 @@