Files
site-portfolio/src/pages/cases/ai-platform-primo-rpa-v2.html
T

553 lines
34 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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="Кейс: редизайн Primo RPA AI Server — снижение порога входа для клиентов без команды внедрения."
/>
<title>AI Server в Primo RPA — кейс</title>
{{> head-links}}
{{> head-plyr}}
<style>
.case-article {
max-width: 48rem;
margin: 0 auto;
}
.case-article h2 {
margin: 2rem 0 0.75rem;
font-size: clamp(1.7rem, 3vw, 2rem);
font-weight: 700;
color: var(--text);
}
.case-article h3 {
font-size: 1.55rem;
font-weight: 600;
color: var(--text);
}
.case-article .section__prose {
margin-bottom: 0.75rem;
font-size: 1.1rem;
line-height: 1.7;
color: var(--text);
}
.case-article img,
.case-article video {
display: block;
max-width: 100%;
height: auto;
margin: 0.75rem 0 1rem;
}
.case-article ul,
.case-article ol {
margin: 0.5rem 0 1rem 1.25rem;
padding: 0;
}
.case-article li {
margin-bottom: 0.35rem;
font-size: 1.1rem;
line-height: 1.7;
}
.case-article a:not(.btn) {
color: var(--accent);
}
.case-meta {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.25rem 0.75rem;
margin: 1.25rem 0 1.5rem;
font-size: 1.05rem;
line-height: 1.6;
color: var(--text-muted);
}
.case-meta dt {
font-weight: 600;
color: var(--text);
}
.case-meta dd {
margin: 0;
}
</style>
<script>
(function () {
try {
var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
var d = document.documentElement;
var m = t.mode;
if (m !== "light" && m !== "dark" && m !== "system") m = "system";
var eff =
m === "system"
? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light"
: m;
d.dataset.theme = eff;
var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
if (h !== null) d.style.setProperty("--theme-h", String(h));
if (s !== null) d.style.setProperty("--theme-s", String(s));
if (l !== null) {
var L = Number(l);
if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
}
var rad = t.radius;
if (rad === "soft" || rad === "medium" || rad === "strong") {
d.dataset.radius = rad;
} else {
d.dataset.radius = "medium";
}
var f = t.font;
if (f === "geologica") f = "medeo";
if (f === "onest") f = "medeo";
if (f === "anonymous") f = "mono";
if (f === "merriweather" || f === "mono" || f === "medeo") {
d.dataset.font = f;
} else {
d.dataset.font = "merriweather";
}
var mb = t.meshBg;
if (mb === "off") {
d.dataset.meshBg = "off";
} else {
d.dataset.meshBg = "on";
}
} catch (e) {}
})();
</script>
</head>
<body>
{{> header-case}}
{{> fab-stack}}
<main id="case-main" class="section section--tight">
<div class="section__inner case-article">
<p class="hero__eyebrow">Product Design · AI</p>
<h1 class="case-page__h1">Упростил настройку Primo RPA AI Server: клиенты настраивают ИИ-сервис без команды внедрения</h1>
<p class="case-page__sub">
Платформа интеллектуальной обработки документов<br />
и оркестрации ИИ-агентов. Обращения к команде внедрения упали на 40%, настройка первого проекта ужалась с ~3 дней до ~4 часов.
</p>
<figure class="case-media case-media--wide">
<img
src="{{assetPrefix}}assets/ai-platform-primo-rpa/main-new.webp"
alt="Обновлённый редактор разметки датасета — главный экран сервиса после редизайна"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
</figure>
<dl class="case-meta">
<dt>Продукт</dt>
<dd>AI Server. Нейросети во внутреннем контуре компании, настраивается через веб-интерфейс</dd>
<dt>Роль</dt>
<dd>UX/UI-дизайнер (единственный на проекте)</dd>
<dt>Задача</dt>
<dd>Снизить порог входа, чтобы клиент настраивал сервис сам</dd>
<dt>Стек</dt>
<dd>Ant Design + React, стилизация Hope UI</dd>
<dt>Формат</dt>
<dd>Редизайн живого продукта, релизы не останавливались</dd>
</dl>
<div class="case-block" id="problem">
<h2>С настройкой справлялись только эксперты. Это тормозило продажи</h2>
<p class="section__prose">
AI Server разворачивается на внутренних серверах клиентов. Продукт активно тестировали, и обратная связь показала неприятное: настроить его могли только эксперты и команда внедрения Primo RPA. Каждый новый клиент съедал часы техподдержки. Продукт терял привлекательность и плохо масштабировался.
</p>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">✅</span>
<div class="case-callout__content">
<p>
Бизнес-цель: клиент проходит настройку AI Server сам, без техподдержки и команды внедрения. По этому критерию мы и мерили успех редизайна.
</p>
</div>
</aside>
<p class="section__prose">
Начал со знакомства с командой и экспертами по настройке. Разделил сценарии на главные и вспомогательные, собрал визуализацию того, как ведёт себя пользователь, и вместе с разработкой искал, где интерфейс можно упростить. Я уже работал с ИИ и похожими веб-платформами, поэтому быстро разобрался в домене и говорил с разработкой на одном языке.
</p>
</div>
<div class="case-block" id="constraints">
<h2>Ограничения</h2>
<ul>
<li>Продуктом уже пользовались клиенты. Остановить разработку и пересобрать интерфейс целиком было нельзя.</li>
<li>Изменения приходилось вписывать в план релизов, отдельного «редизайн-спринта» никто не выделял.</li>
<li>Жёсткий стек: Ant Design под React со стилизацией под Hope UI. Новые компоненты рисовать только в крайнем случае, сначала выжимаем всё из готовой библиотеки.</li>
</ul>
</div>
<div class="case-block" id="navigation">
<h2>Навигация путала: разделы проекта смешивались с главным меню</h2>
<p class="section__prose">
В сервисе стояла привычная для админок схема: слева боковое меню, справа контент. Пространство расходовалось расточительно, а при открытии проекта навигация по его разделам оказывалась вперемешку с главной. Пользователь терялся.
</p>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji" aria-hidden="true">💡</span>
<div class="case-callout__content">
<p>
Две навигации в одном боковом меню заставляли каждый раз разбираться, «где я». Развёл их по уровням: главная сверху, проектная внутри проекта.
</p>
</div>
</aside>
<figure class="case-media case-media--wide">
<img
src="{{assetPrefix}}assets/ai-platform-primo-rpa/main-new.webp"
alt="Главный экран AI Server с компактной верхней навигацией"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Главный экран AI Server с компактной верхней навигацией — список проектов занимает почти всю ширину экрана</figcaption>
</figure>
<p class="section__prose">
Перенёс главную навигацию наверх и ужал её. Контенту стало заметно просторнее, а схема осталась привычной. У проектов появилась собственная навигация, которая с главной не пересекается.
</p>
<figure class="case-media case-media--wide">
<img
src="{{assetPrefix}}assets/ai-platform-primo-rpa/nav-project-nlp.webp"
alt="Внутренняя навигация NLP-проекта"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Внутренняя навигация NLP-проекта — горизонтальные пункты-шаги под главным меню</figcaption>
</figure>
<figure class="case-media case-media--wide">
<img
src="{{assetPrefix}}assets/ai-platform-primo-rpa/nav-project-ocr.webp"
alt="Внутренняя навигация OCR-проекта"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Внутренняя навигация OCR-проекта — тот же паттерн со своим набором разделов</figcaption>
</figure>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">✨</span>
<div class="case-callout__content">
<p>
Стрелочная форма пунктов подсказывает порядок настройки, но не навязывает его: разделы остаются обычными табами. Подсказка без принуждения.
</p>
</div>
</aside>
<figure class="case-media case-media--wide">
<img
src="{{assetPrefix}}assets/ai-platform-primo-rpa/nav-secondary-detail_view.webp"
alt="Крупный план вторичной навигации — пункты в форме стрелок"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Крупный план вторичной навигации — пункты в форме стрелок, ведущих слева направо</figcaption>
</figure>
</div>
<div class="case-block" id="editor">
<h2>Редактор датасета: экран, где пользователи живут</h2>
<p class="section__prose">
Здесь проводят больше всего времени. Разметка полей на сотнях изображений — работа монотонная, но именно от неё зависит качество данных для обучения модели. Прежний редактор выбивался из общего стиля, выглядел перегруженно и путал в работе с полями.
</p>
<p class="section__prose">
Разобрал редактор на микросценарии, выстроил их по приоритету и связкам. Вместе с командой спроектировали поведение плавнее и понятнее, заложили место под будущий функционал, дизайн привели к общей стилистике сервиса.
</p>
<figure class="case-media case-media--wide">
<img
src="{{assetPrefix}}assets/ai-platform-primo-rpa/dataset-editor.webp"
alt="Редактор разметки датасета — размечаемый документ в центре, панели полей и инструментов по бокам"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Редактор разметки датасета — размечаемый документ в центре, панели полей и инструментов по бокам</figcaption>
</figure>
<p class="section__prose">
Страница стала симметричной. Почти всё пространство уходит на размечаемое изображение, действия сгруппированы по панелям: нужная функция ищется быстро.
</p>
<figure class="case-media case-media--wide">
<img
src="{{assetPrefix}}assets/ai-platform-primo-rpa/dataset_editor-wireframe-default_mode.webp"
alt="Схематичный каркас редактора — центральная рабочая область и боковые панели"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Схематичный каркас редактора — центральная рабочая область и боковые панели, режим по умолчанию</figcaption>
</figure>
<p class="section__prose">
Для продвинутых пользователей добавил режим «Во весь экран». Боковые панели сворачиваются, работа идёт через горячие клавиши и нижнюю панель. На небольших мониторах это спасает.
</p>
<figure class="case-media case-media--wide">
<img
src="{{assetPrefix}}assets/ai-platform-primo-rpa/full-screen-mode-with-panels.webp"
alt="Полноэкранный режим редактора с раскрытыми боковыми панелями"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Полноэкранный режим редактора с раскрытыми боковыми панелями</figcaption>
</figure>
<figure class="case-media case-media--wide">
<img
src="{{assetPrefix}}assets/ai-platform-primo-rpa/full-screen-mode-zen.webp"
alt="Полноэкранный режим без панелей — только размечаемый документ и нижняя панель"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Полноэкранный режим без панелей — на экране только размечаемый документ и нижняя панель инструментов</figcaption>
</figure>
<figure class="case-media case-media--wide">
<img
src="{{assetPrefix}}assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-both_panels.webp"
alt="Четыре варианта каркаса полноэкранного режима"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Четыре варианта каркаса полноэкранного режима — обе панели, без панелей, только левая, только правая</figcaption>
</figure>
<figure class="case-media case-media--wide">
<img
src="{{assetPrefix}}assets/ai-platform-primo-rpa/dataset_editor-main_toolbar.webp"
alt="Нижняя панель инструментов — переключение между изображениями и быстрые действия разметки"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Нижняя панель инструментов — переключение между изображениями и быстрые действия разметки</figcaption>
</figure>
</div>
<div class="case-block" id="mapping">
<h2>Десятки полей на одном скане, и место под документ не страдает</h2>
<p class="section__prose">
Смежная задача: настроить уникальные параметры полей датасета. Большая область нужна под скан документа, полей десятки, у каждого свои типы и зависимые параметры.
</p>
<figure class="case-media" style="margin: 0.85rem 0 1.2rem">
<div class="case-video-shell">
<video
controls
preload="metadata"
playsinline
poster="{{assetPrefix}}assets/ai-platform-primo-rpa/fields-maping.webp"
data-case-video-player
style="display: block; width: 100%; height: auto; margin: 0"
>
<source src="{{assetPrefix}}assets/ai-platform-primo-rpa/fields-maping.webm" type="video/webm" />
<source src="{{assetPrefix}}assets/ai-platform-primo-rpa/fields-maping.mp4" type="video/mp4" />
Ваш браузер не поддерживает видео.
</video>
</div>
<figcaption>Прототип сопоставления полей — пользователь выбирает поле на скане документа и настраивает его параметры в компактной панели</figcaption>
</figure>
<p class="section__prose">
Интерфейс вышел компактным. Механика не считывается с первого взгляда, зато после короткого обучения работать в нём быстро и комфортно.
</p>
</div>
<div class="case-block" id="learning">
<h2>Карточки обучения: паттерн, который разошёлся по всему продукту</h2>
<p class="section__prose">
После разметки датасета модель дообучают (fine-tuning). Разобрали все действия пользователя, перебрали несколько компоновок страницы. Остановились на ленте из карточек.
</p>
<figure class="case-media case-media--wide">
<img
src="{{assetPrefix}}assets/ai-platform-primo-rpa/in_project-learn-overview.webp"
alt="Раздел обучения моделей — вертикальная лента карточек"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Раздел обучения моделей — вертикальная лента карточек, сверху карточка настройки нового обучения</figcaption>
</figure>
<p class="section__prose">
В начале ленты карточка настройки: результат разметки активного датасета, параметры, запуск fine-tuning.
</p>
<figure class="case-media case-media--wide">
<img
src="{{assetPrefix}}assets/ai-platform-primo-rpa/in_project-learn-card-new.webp"
alt="Карточка настройки обучения — матрица качества датасета и блок параметров запуска"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Карточка настройки обучения — матрица качества датасета и блок параметров запуска</figcaption>
</figure>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">⭐</span>
<div class="case-callout__content">
<p>
Матрица оценки качества разметки показывает готовность датасета к обучению на одном экране. Раньше приходилось вручную просматривать поля по всем документам.
</p>
</div>
</aside>
<p class="section__prose">
Под каждый запущенный процесс появляется своя карточка. Можно завести несколько процессов с разными параметрами и сравнить, какая конфигурация отработала лучше.
</p>
<figure class="case-media case-media--wide">
<img
src="{{assetPrefix}}assets/ai-platform-primo-rpa/in_project-learn-card-learning_process.webp"
alt="Карточка запущенного процесса обучения — статус, прогресс и метрики"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Карточка запущенного процесса обучения — статус, прогресс и метрики, разнесённые по логическим блокам</figcaption>
</figure>
<figure class="case-media case-media--wide">
<img
src="{{assetPrefix}}assets/ai-platform-primo-rpa/in_project-learn-card-learning_process_wireframe.webp"
alt="Каркас карточки процесса обучения"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Каркас карточки процесса обучения — схема расположения информационных блоков и действий</figcaption>
</figure>
<p class="section__prose">
Карточки сворачиваются, в шапке остаются название и статус.
</p>
<figure class="case-media case-media--natural">
<img
src="{{assetPrefix}}assets/ai-platform-primo-rpa/in_project-learn-card-сollapsed.webp"
alt="Свёрнутая карточка обучения — одна строка с названием и статусом процесса"
width="1200"
height="675"
loading="lazy"
decoding="async"
/>
<figcaption>Свёрнутая карточка обучения — одна строка с названием и статусом процесса</figcaption>
</figure>
<p class="section__prose">
Паттерны из этих карточек потом разошлись по другим разделам продукта. Единый стиль стало проще держать.
</p>
</div>
<div class="case-block" id="processes">
<h2>Долгие процессы — в соседнюю вкладку</h2>
<p class="section__prose">
Часть задач идёт параллельно с остальной работой. Для таких сценариев модальное окно открывается на отдельной странице.
</p>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji" aria-hidden="true">💡</span>
<div class="case-callout__content">
<p>
Пользователь держит окно процесса в соседней вкладке и следит за прогрессом, а с проектом продолжает работать в доступных разделах.
</p>
</div>
</aside>
<figure class="case-media case-media--wide">
<img
src="{{assetPrefix}}assets/ai-platform-primo-rpa/fullscreen_modal-import_dataset.webp"
alt="Импорт датасета в модальном окне на отдельной странице"
width="1440"
height="1024"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Импорт датасета в модальном окне на отдельной странице — форма загрузки на весь экран</figcaption>
</figure>
<p class="section__prose">
На странице проекта в это время висит заглушка с кнопкой перехода к процессу.
</p>
<figure class="case-media case-media--wide">
<img
src="{{assetPrefix}}assets/ai-platform-primo-rpa/fullscreen_modal-in_project-import_dataset.webp"
alt="Заглушка активного импорта внутри проекта"
width="1200"
height="675"
loading="lazy"
decoding="async"
data-image-viewer
/>
<figcaption>Заглушка активного импорта внутри проекта — индикатор процесса и кнопка перехода</figcaption>
</figure>
</div>
<div class="case-block" id="decisions">
<h2>Что я решил не делать, и почему</h2>
<ul>
<li><strong>Не стал блокировать кнопки на отдельных страницах</strong> во время активных процессов. Модалка на отдельной странице технически проще, а прогресс виден в соседней вкладке.</li>
<li><strong>Не рисовал новые компоненты</strong>, кроме крайних случаев. Готовая библиотека Ant Design ускоряла разработку и держала интерфейс консистентным.</li>
<li><strong>Не убрал боковые панели редактора совсем</strong>, а сделал сворачиваемыми. Новичкам нужны подсказки на экране, продвинутым — максимум места под документ.</li>
<li><strong>Не заводил отдельную дизайн-систему.</strong> В продукте уже был фреймворк, в разработку передавал ссылки на готовые юзерфлоу в Figma.</li>
</ul>
<h3>Передача в разработку</h3>
<p class="section__prose">
Раз в неделю обсуждали дизайн с командой: список задач, приоритеты, сроки под планы релизов. С верстальщиком уточнял детали макетов тет-а-тет и давал фидбэк после вёрстки, чтобы результат не разошёлся с задуманным поведением.
</p>
</div>
<div class="case-block" id="results">
<h2>Результат</h2>
<aside class="case-callout" data-callout>
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">📈</span>
<div class="case-callout__content">
<p>
Настройка первого проекта: было ~3 дня, стало ~4 часа. 7 из 10 клиентов проходят её без техподдержки.
</p>
</div>
</aside>
<ul>
<li>Обращения к команде внедрения на этапе настройки сократились на <strong>40%</strong>. Базовую настройку клиенты проходят сами.</li>
<li><strong>7 из 10</strong> новых клиентов настроили первый проект без техподдержки. До редизайна — 1 из 10.</li>
<li>Настройка первого проекта: с <strong>~3 дней до ~4 часов</strong>.</li>
<li>Переработано <strong>30+ экранов</strong>: навигация, редактор датасета, обучение моделей, импорт данных.</li>
<li>Заложены паттерны, на которых функционал наращивается без больших переделок.</li>
<li>В компанию наняли второго дизайнера. Я ввёл её в курс дела и курировал результат, после адаптации проект целиком перешёл под её ответственность.</li>
</ul>
</div>
<div class="case-block" id="conclusions">
<h2>Выводы</h2>
<ul>
<li>Жёсткий фреймворк оказался не ограничением, а ускорителем: готовая библиотека компонентов позволила думать о сценариях, а не о пикселях.</li>
<li>Самые ценные инсайты дали эксперты по настройке. В следующий раз вовлёк бы команду внедрения ещё раньше.</li>
<li>Передача проекта новому дизайнеру подтвердила: заложенные паттерны работают, их можно объяснить и поддерживать без автора.</li>
</ul>
</div>
</div>
</main>
{{> projects-related}}{{> projects-section}}
{{> contact-section}}
{{> footer}}
{{> cookie-notice}}
{{> nav-more-floating}}
</body>
</html>