553 lines
34 KiB
HTML
553 lines
34 KiB
HTML
<!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>
|