1330 lines
70 KiB
HTML
1330 lines
70 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" 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="Case Study: Redesign of the Primo RPA AI Server — Lowering the Barrier to Entry for Customers Without an Implementation Team."
|
||
/>
|
||
<title>AI Server in Primo RPA — Case Study</title>
|
||
<script>
|
||
(function () {
|
||
var FONT_CSS = {
|
||
merriweather: "/assets/fonts/merriweather.css",
|
||
medeo: "/assets/fonts/medeo.css",
|
||
mono: "/assets/fonts/mono.css",
|
||
};
|
||
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 DEF = { h: 210, s: 90, l: 40 };
|
||
function pickAccent(o) {
|
||
if (!o) return null;
|
||
var h = typeof o.h === "number" ? o.h : typeof o.hue === "number" ? o.hue : null;
|
||
var s = typeof o.s === "number" ? o.s : typeof o.sat === "number" ? o.sat : null;
|
||
var l = typeof o.l === "number" ? o.l : typeof o.light === "number" ? o.light : null;
|
||
if (h === null && s === null && l === null) return null;
|
||
return {
|
||
h: h === null ? DEF.h : h,
|
||
s: s === null ? DEF.s : Math.min(100, Math.max(30, s)),
|
||
l: l === null ? DEF.l : Math.min(70, Math.max(20, l)),
|
||
};
|
||
}
|
||
// Текущий формат: отдельный акцент для светлой и тёмной темы ({light, dark}).
|
||
// Старый плоский формат ({h, s, l}) остаётся совместимым.
|
||
var acc =
|
||
pickAccent(eff === "dark" ? t.dark : t.light) ||
|
||
pickAccent(eff === "dark" ? t.light : t.dark) ||
|
||
pickAccent(t) ||
|
||
DEF;
|
||
d.style.setProperty("--theme-h", String(acc.h));
|
||
d.style.setProperty("--theme-s", String(acc.s));
|
||
d.style.setProperty("--theme-l", String(acc.l));
|
||
var H = (((acc.h % 360) + 360) % 360) / 360;
|
||
var S = Math.min(100, Math.max(0, acc.s)) / 100;
|
||
var Lv = Math.min(100, Math.max(0, acc.l)) / 100;
|
||
var r, g, b;
|
||
if (S === 0) { r = g = b = Lv; }
|
||
else {
|
||
var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S;
|
||
var p = 2 * Lv - q;
|
||
var hue2rgb = function(p, q, t) {
|
||
if (t < 0) t += 1; if (t > 1) t -= 1;
|
||
if (t < 1/6) return p + (q - p) * 6 * t;
|
||
if (t < 1/2) return q;
|
||
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||
return p;
|
||
};
|
||
r = hue2rgb(p, q, H + 1/3);
|
||
g = hue2rgb(p, q, H);
|
||
b = hue2rgb(p, q, H - 1/3);
|
||
}
|
||
var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
||
d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)");
|
||
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") f = "medeo";
|
||
d.dataset.font = f;
|
||
var mb = t.meshBg;
|
||
if (mb === "off") {
|
||
d.dataset.meshBg = "off";
|
||
} else {
|
||
d.dataset.meshBg = "on";
|
||
}
|
||
var href = FONT_CSS[f];
|
||
if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
|
||
var link = document.createElement("link");
|
||
link.rel = "stylesheet";
|
||
link.href = href;
|
||
link.setAttribute("data-theme-font", f);
|
||
document.head.appendChild(link);
|
||
}
|
||
} catch (e) {}
|
||
})();
|
||
</script>
|
||
|
||
<!-- Аналитика грузится только на прод-домене: dev/preview (localhost:4175, dev.mamadaevv.site) в статистику не попадают. -->
|
||
<script>
|
||
(function () {
|
||
var PROD_HOSTS = ["mamadaevv.site", "www.mamadaevv.site"];
|
||
if (PROD_HOSTS.indexOf(location.hostname) === -1) return;
|
||
var s = document.createElement("script");
|
||
s.defer = true;
|
||
s.src = "https://cloud.umami.is/script.js";
|
||
s.setAttribute("data-website-id", "59e8e66e-2dab-4a86-acc6-b97985ad0473");
|
||
document.head.appendChild(s);
|
||
})();
|
||
</script>
|
||
|
||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png" />
|
||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png" />
|
||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png" />
|
||
<link rel="manifest" href="/assets/favicon/site.webmanifest" />
|
||
<link rel="preload" href="/assets/fonts/merriweather.css" as="style" />
|
||
<link rel="preload" href="/css/main.css" as="style" />
|
||
<link rel="preload" href="/js/skill-connectors.js" as="script" />
|
||
<link rel="modulepreload" href="/js/main.js" />
|
||
<link rel="modulepreload" href="/js/modules/ui/page-mesh-shader.js" />
|
||
<link rel="stylesheet" href="/css/main.css" />
|
||
<link rel="canonical" href="https://mamadaevv.site/en/cases/ai-platform-primo-rpa-v2/" />
|
||
<link rel="alternate" hreflang="ru" href="https://mamadaevv.site/cases/ai-platform-primo-rpa-v2/" />
|
||
<link rel="alternate" hreflang="en" href="https://mamadaevv.site/en/cases/ai-platform-primo-rpa-v2/" />
|
||
<link rel="alternate" hreflang="x-default" href="https://mamadaevv.site/cases/ai-platform-primo-rpa-v2/" />
|
||
<link rel="describedby" href="https://mamadaevv.site/llms.txt" title="llms.txt" />
|
||
<meta name="author" content="Nikolai Mamadaev" />
|
||
<meta name="robots" content="index, follow" />
|
||
<meta name="theme-color" content="#0f1115" />
|
||
|
||
<!-- Open Graph -->
|
||
<meta property="og:type" content="article" />
|
||
<meta property="og:site_name" content="Nikolai Mamadaev — Product Designer" />
|
||
<meta property="og:locale" content="en_US" />
|
||
<meta property="og:locale:alternate" content="ru_RU" />
|
||
<meta property="og:title" content="AI Server in Primo RPA — Case Study" />
|
||
<meta property="og:description" content="Case Study: Redesign of the Primo RPA AI Server — Lowering the Barrier to Entry for Customers Without an Implementation Team." />
|
||
<meta property="og:url" content="https://mamadaevv.site/en/cases/ai-platform-primo-rpa-v2/" />
|
||
<meta property="og:image" content="https://mamadaevv.site/assets/og/og-default.png" />
|
||
<meta property="og:image:width" content="1200" />
|
||
<meta property="og:image:height" content="630" />
|
||
<meta property="og:image:alt" content="AI Server in Primo RPA — Case Study" />
|
||
|
||
<!-- Twitter / X -->
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:title" content="AI Server in Primo RPA — Case Study" />
|
||
<meta name="twitter:description" content="Case Study: Redesign of the Primo RPA AI Server — Lowering the Barrier to Entry for Customers Without an Implementation Team." />
|
||
<meta name="twitter:image" content="https://mamadaevv.site/assets/og/og-default.png" />
|
||
<meta name="twitter:image:alt" content="AI Server in Primo RPA — Case Study" />
|
||
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@graph": [
|
||
{
|
||
"@type": "Person",
|
||
"@id": "https://mamadaevv.site/#person",
|
||
"name": "Nikolai Mamadaev",
|
||
"url": "https://mamadaevv.site",
|
||
"jobTitle": "Product Designer",
|
||
"description": "Product designer with 10+ years of experience. Designing digital products, interfaces and design systems.",
|
||
"knowsAbout": [
|
||
"UX/UI design",
|
||
"product design",
|
||
"design systems",
|
||
"prototyping",
|
||
"Figma",
|
||
"no-code"
|
||
],
|
||
"sameAs": [
|
||
"https://t.me/mamadaevv",
|
||
"https://vk.com/mamadaevv",
|
||
"https://github.com/mamadaevv"
|
||
]
|
||
},
|
||
{
|
||
"@type": "WebSite",
|
||
"@id": "https://mamadaevv.site/#website",
|
||
"url": "https://mamadaevv.site/",
|
||
"name": "Nikolai Mamadaev — Product Designer",
|
||
"inLanguage": "en",
|
||
"author": {
|
||
"@id": "https://mamadaevv.site/#person"
|
||
},
|
||
"publisher": {
|
||
"@id": "https://mamadaevv.site/#person"
|
||
}
|
||
},
|
||
{
|
||
"@type": "CreativeWork",
|
||
"@id": "https://mamadaevv.site/en/cases/ai-platform-primo-rpa-v2/#page",
|
||
"url": "https://mamadaevv.site/en/cases/ai-platform-primo-rpa-v2/",
|
||
"name": "AI Server in Primo RPA — Case Study",
|
||
"description": "Case Study: Redesign of the Primo RPA AI Server — Lowering the Barrier to Entry for Customers Without an Implementation Team.",
|
||
"isPartOf": {
|
||
"@id": "https://mamadaevv.site/#website"
|
||
},
|
||
"author": {
|
||
"@id": "https://mamadaevv.site/#person"
|
||
},
|
||
"inLanguage": "en",
|
||
"creator": {
|
||
"@id": "https://mamadaevv.site/#person"
|
||
},
|
||
"datePublished": "2026-10-29",
|
||
"about": "UX/UI design and interface design"
|
||
},
|
||
{
|
||
"@type": "BreadcrumbList",
|
||
"@id": "https://mamadaevv.site/en/cases/ai-platform-primo-rpa-v2/#breadcrumbs",
|
||
"itemListElement": [
|
||
{
|
||
"@type": "ListItem",
|
||
"position": 1,
|
||
"name": "Nikolai Mamadaev — Product Designer",
|
||
"item": "https://mamadaevv.site/"
|
||
},
|
||
{
|
||
"@type": "ListItem",
|
||
"position": 2,
|
||
"name": "Cases",
|
||
"item": "https://mamadaevv.site/cases/"
|
||
},
|
||
{
|
||
"@type": "ListItem",
|
||
"position": 3,
|
||
"name": "AI Server in Primo RPA — Case Study",
|
||
"item": "https://mamadaevv.site/cases/ai-platform-primo-rpa-v2/"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
</script>
|
||
|
||
<script src="/js/skill-connectors.js" defer></script>
|
||
<script type="module" src="/js/main.js"></script>
|
||
|
||
|
||
<link rel="stylesheet" href="/vendor/plyr/plyr.css" />
|
||
|
||
<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>
|
||
<a class="skip-link" href="#case-main">Skip to case content</a>
|
||
<header class="header" data-theme-picker>
|
||
<div class="header__inner">
|
||
<a class="logo" href="../../" aria-label="Home">NM</a>
|
||
<div class="header__cluster">
|
||
<nav class="nav" aria-label="Page sections">
|
||
<a href="#contact">Contact</a>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="fab-stack" aria-label="Quick actions">
|
||
<div class="theme-panel-fab-wrap">
|
||
<button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Style settings">
|
||
<span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
|
||
<svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||
<path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||
</svg>
|
||
</button>
|
||
<div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Theme & appearance" hidden data-theme-panel>
|
||
<div class="theme-picker__stack">
|
||
<section class="theme-picker__section" aria-labelledby="theme-accent-title">
|
||
<h3 id="theme-accent-title" class="theme-picker__section-title">Accent color</h3>
|
||
<div class="colorpicker" data-colorpicker>
|
||
<div class="colorpicker__plane-box">
|
||
<canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Accent saturation and lightness"></canvas>
|
||
<div class="colorpicker__knob" data-sl-knob></div>
|
||
</div>
|
||
<div class="colorpicker__hue-wrap">
|
||
<label class="colorpicker__hue-sr" for="theme-hue-slider">Accent hue</label>
|
||
<input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="theme-picker__section" aria-labelledby="theme-mode-title">
|
||
<h3 id="theme-mode-title" class="theme-picker__section-title">Theme</h3>
|
||
<div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
|
||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="System"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
|
||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Light"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
|
||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Dark"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
|
||
</div>
|
||
</section>
|
||
<section class="theme-picker__section" aria-labelledby="theme-radius-title">
|
||
<h3 id="theme-radius-title" class="theme-picker__section-title">Corner radius</h3>
|
||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
|
||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Soft radius"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
|
||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Medium radius"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
|
||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Strong radius"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
|
||
</div>
|
||
</section>
|
||
<section class="theme-picker__section" aria-labelledby="theme-typography-title">
|
||
<h3 id="theme-typography-title" class="theme-picker__section-title">Typography</h3>
|
||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
|
||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="medeo" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
|
||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
|
||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
|
||
</div>
|
||
</section>
|
||
<section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
|
||
<h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Page background</h3>
|
||
<div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
|
||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Show background gradient"><span class="theme-mesh-bg-seg__label">On</span></button>
|
||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Hide background gradient"><span class="theme-mesh-bg-seg__label">Off</span></button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a class="fab fab--primary" href="#contact" aria-label="Contact">
|
||
<span class="fab-primary__ico" aria-hidden="true"></span>
|
||
</a>
|
||
</div>
|
||
<div class="content-edit-fab-stack" aria-label="Content Edits" data-content-edit-ui>
|
||
<button
|
||
type="button"
|
||
class="fab fab--secondary glass-neutral content-edit-fab"
|
||
data-content-edit-mode-toggle
|
||
hidden
|
||
aria-pressed="false"
|
||
aria-label="Content Editing Mode"
|
||
title="Edit Mode"
|
||
>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||
<path
|
||
d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
|
||
stroke="currentColor"
|
||
stroke-width="1.75"
|
||
stroke-linejoin="round"
|
||
/>
|
||
</svg>
|
||
<span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
|
||
</button>
|
||
</div>
|
||
|
||
|
||
<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">Simplified Primo RPA AI Server setup: customers configure the AI service without an implementation team</h1>
|
||
<p class="case-page__sub">
|
||
A platform for intelligent document<br />
|
||
processing and AI agent orchestration. Requests to the implementation team have dropped by 40%, and the time required to set up the first project has been reduced from ~3 days to ~4 hours.
|
||
</p>
|
||
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="../../../assets/ai-platform-primo-rpa/main-new.webp"
|
||
alt="The updated dataset markup editor—the service's main screen following the redesign"
|
||
width="1200"
|
||
height="675"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
</figure>
|
||
|
||
<dl class="case-meta">
|
||
<dt>Product</dt>
|
||
<dd>AI Server. Neural networks within the company’s internal network, configured via a web interface</dd>
|
||
<dt>Role</dt>
|
||
<dd>UX/UI Designer (the only one on the project)</dd>
|
||
<dt>Objective</dt>
|
||
<dd>Lower the barrier to entry so that the client can configure the service themselves</dd>
|
||
<dt>Stack</dt>
|
||
<dd>Ant Design + React, styled with Hope UI</dd>
|
||
<dt>Format</dt>
|
||
<dd>Redesign of a live product; releases continued uninterrupted</dd>
|
||
</dl>
|
||
|
||
<div class="case-block" id="problem">
|
||
<h2>Only experts could handle the configuration. This slowed down sales</h2>
|
||
<p class="section__prose">
|
||
The AI Server is deployed on the client’s internal servers. The product was actively tested, and the feedback revealed an unpleasant truth: only experts and the Primo RPA implementation team could configure it. Every new client consumed hours of technical support. The product was losing its appeal and didn’t scale well.
|
||
</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>
|
||
Business goal: The client sets up AI Server on their own, without technical support or an implementation team. We measured the success of the redesign based on this criterion.
|
||
</p>
|
||
</div>
|
||
</aside>
|
||
<p class="section__prose">
|
||
I started by getting to know the team and the configuration experts. I divided the scenarios into primary and secondary ones, created a visual representation of user behavior, and worked with the development team to identify areas where the interface could be simplified. I had already worked with AI and similar web platforms, so I quickly got up to speed on the subject matter and was able to speak the same language as the development team.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="case-block" id="constraints">
|
||
<h2>Constraints</h2>
|
||
<ul>
|
||
<li>Customers were already using the product. It wasn’t possible to halt development and completely rebuild the interface.</li>
|
||
<li>Changes had to be incorporated into the release plan; no one allocated time for a separate “redesign sprint.”</li>
|
||
<li>Strict tech stack: Ant Design on top of React, styled after Hope UI. We only created new components as a last resort; first, we made the most of the existing library.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="case-block" id="navigation">
|
||
<h2>Navigation was confusing: project sections were mixed in with the main menu</h2>
|
||
<p class="section__prose">
|
||
The service used a layout common to admin panels: a sidebar on the left, content on the right. Space was wasted, and when opening a project, navigation through its sections was intermixed with the main navigation. Users got lost.
|
||
</p>
|
||
<aside class="case-callout" data-callout>
|
||
<span class="case-callout__emoji" aria-hidden="true">💡</span>
|
||
<div class="case-callout__content">
|
||
<p>
|
||
Having two navigation systems in a single sidebar forced users to figure out “where they were” every time. I organized them by level: the main navigation at the top, and project-specific navigation within each project.
|
||
</p>
|
||
</div>
|
||
</aside>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="../../../assets/ai-platform-primo-rpa/main-new.webp"
|
||
alt="The AI Server home screen with a compact top navigation bar"
|
||
width="1200"
|
||
height="675"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption>The AI Server home screen with a compact top navigation bar—the list of projects takes up almost the entire width of the screen</figcaption>
|
||
</figure>
|
||
<p class="section__prose">
|
||
I moved the main navigation to the top and condensed it. The content now has noticeably more space, while the layout remains familiar. Projects now have their own navigation that doesn’t overlap with the main navigation.
|
||
</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="../../../assets/ai-platform-primo-rpa/nav-project-nlp.webp"
|
||
alt="Internal Navigation of the NLP Project"
|
||
width="1200"
|
||
height="675"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption>Internal navigation for the NLP project—horizontal step-by-step items below the main menu</figcaption>
|
||
</figure>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="../../../assets/ai-platform-primo-rpa/nav-project-ocr.webp"
|
||
alt="Internal Navigation for the OCR Project"
|
||
width="1200"
|
||
height="675"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption>Internal navigation for the OCR project—the same pattern with its own set of sections</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>
|
||
The arrow-shaped icons suggest a configuration order but do not enforce it: the sections remain standard tabs. A suggestion, not a requirement.
|
||
</p>
|
||
</div>
|
||
</aside>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="../../../assets/ai-platform-primo-rpa/nav-secondary-detail_view.webp"
|
||
alt="Close-up of secondary navigation—arrow-shaped markers"
|
||
width="1200"
|
||
height="675"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption>Close-up of secondary navigation—items in the form of arrows pointing from left to right</figcaption>
|
||
</figure>
|
||
</div>
|
||
|
||
<div class="case-block" id="editor">
|
||
<h2>Dataset Editor: the screen where users spend most of their time</h2>
|
||
<p class="section__prose">
|
||
This is where users spend most of their time. Annotating fields on hundreds of images is monotonous work, but the quality of the data used to train the model depends on it. The previous editor didn’t fit the overall style, looked cluttered, and made working with fields confusing.
|
||
</p>
|
||
<p class="section__prose">
|
||
I broke the editor down into microscenarios, organized them by priority and interdependencies. Together with the team, we designed a smoother and more intuitive user experience, reserved space for future features, and aligned the design with the service’s overall style.
|
||
</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="../../../assets/ai-platform-primo-rpa/dataset-editor.webp"
|
||
alt="Dataset Markup Editor — the document being marked up in the center, with field and tool panels on either side"
|
||
width="1200"
|
||
height="675"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption>Dataset markup editor—the document being marked up is in the center, with field and tool panels on either side</figcaption>
|
||
</figure>
|
||
<p class="section__prose">
|
||
The page became symmetrical. Almost all the space is devoted to the image being annotated, and actions are grouped by panels: the desired function can be found quickly.
|
||
</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="../../../assets/ai-platform-primo-rpa/dataset_editor-wireframe-default_mode.webp"
|
||
alt="A schematic overview of the editor's layout—the central workspace and side panels"
|
||
width="1200"
|
||
height="675"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption>Schematic layout of the editor—central workspace and side panels, default mode</figcaption>
|
||
</figure>
|
||
<p class="section__prose">
|
||
For advanced users, I’ve added a “Full Screen” mode. The side panels collapse, and you work using keyboard shortcuts and the bottom panel. This is a lifesaver on small monitors.
|
||
</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="../../../assets/ai-platform-primo-rpa/full-screen-mode-with-panels.webp"
|
||
alt="Full-screen editor mode with side panels open"
|
||
width="1200"
|
||
height="675"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption>Full-screen editor mode with side panels expanded</figcaption>
|
||
</figure>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="../../../assets/ai-platform-primo-rpa/full-screen-mode-zen.webp"
|
||
alt="Full-screen mode without panels—only the document being marked up and the bottom panel"
|
||
width="1200"
|
||
height="675"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption>Full-screen mode without panels—only the document being edited and the bottom toolbar are visible on the screen</figcaption>
|
||
</figure>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="../../../assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-both_panels.webp"
|
||
alt="Four Full-Screen Mode Frame Options"
|
||
width="1200"
|
||
height="675"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption>Four full-screen layout options: both panels, no panels, left panel only, right panel only</figcaption>
|
||
</figure>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="../../../assets/ai-platform-primo-rpa/dataset_editor-main_toolbar.webp"
|
||
alt="Bottom toolbar — switch between images and quick markup actions"
|
||
width="1200"
|
||
height="675"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption>Bottom toolbar—switch between images and quick markup actions</figcaption>
|
||
</figure>
|
||
</div>
|
||
|
||
<div class="case-block" id="mapping">
|
||
<h2>Dozens of fields on a single scan, without sacrificing document space</h2>
|
||
<p class="section__prose">
|
||
Related task: Configure unique field settings for the dataset. A large area is needed for the document scan, with dozens of fields, each having its own types and dependent settings.
|
||
</p>
|
||
<figure class="case-media" style="margin: 0.85rem 0 1.2rem">
|
||
<div class="case-video-shell">
|
||
<video
|
||
controls
|
||
preload="metadata"
|
||
playsinline
|
||
poster="../../../assets/ai-platform-primo-rpa/fields-maping.webp"
|
||
data-case-video-player
|
||
style="display: block; width: 100%; height: auto; margin: 0"
|
||
>
|
||
<source src="../../../assets/ai-platform-primo-rpa/fields-maping.webm" type="video/webm" />
|
||
<source src="../../../assets/ai-platform-primo-rpa/fields-maping.mp4" type="video/mp4" />
|
||
Your browser does not support video.
|
||
</video>
|
||
</div>
|
||
<figcaption>Field mapping prototype—the user selects a field on the document scan and configures its parameters in a compact panel</figcaption>
|
||
</figure>
|
||
<p class="section__prose">
|
||
The interface turned out to be compact. The mechanics aren’t immediately obvious at first glance, but after a short learning curve, working with it becomes quick and comfortable.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="case-block" id="learning">
|
||
<h2>Training cards: a pattern that has spread throughout the product</h2>
|
||
<p class="section__prose">
|
||
After annotating the dataset, the model undergoes fine-tuning. We analyzed all user actions and explored several page layouts. We settled on a card feed.
|
||
</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="../../../assets/ai-platform-primo-rpa/in_project-learn-overview.webp"
|
||
alt="Model Training Section — Vertical Card Strip"
|
||
width="1200"
|
||
height="675"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption>The model training section is a vertical card feed, with a new training setup card at the top</figcaption>
|
||
</figure>
|
||
<p class="section__prose">
|
||
At the beginning of the feed is a configuration card: the annotation results for the active dataset, parameters, and the option to start fine-tuning.
|
||
</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="../../../assets/ai-platform-primo-rpa/in_project-learn-card-new.webp"
|
||
alt="Training Configuration Card — Dataset Quality Matrix and Run Parameters Block"
|
||
width="1200"
|
||
height="675"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption>Training configuration card—dataset quality matrix and launch parameters section</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>
|
||
The annotation quality matrix shows the dataset’s readiness for training on a single screen. Previously, we had to manually review fields across all documents.
|
||
</p>
|
||
</div>
|
||
</aside>
|
||
<p class="section__prose">
|
||
A separate card appears for each running process. You can start multiple processes with different parameters and compare which configuration performed better.
|
||
</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="../../../assets/ai-platform-primo-rpa/in_project-learn-card-learning_process.webp"
|
||
alt="Active Learning Process Card — Status, Progress, and Metrics"
|
||
width="1200"
|
||
height="675"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption>Card for a running training process—status, progress, and metrics organized into logical blocks</figcaption>
|
||
</figure>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="../../../assets/ai-platform-primo-rpa/in_project-learn-card-learning_process_wireframe.webp"
|
||
alt="Learning Process Card Template"
|
||
width="1200"
|
||
height="675"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption>The framework of a training process card—a layout of information blocks and actions</figcaption>
|
||
</figure>
|
||
<p class="section__prose">
|
||
Cards can be collapsed; the title and status remain visible in the header.
|
||
</p>
|
||
<figure class="case-media case-media--natural">
|
||
<img
|
||
src="../../../assets/ai-platform-primo-rpa/in_project-learn-card-сollapsed.webp"
|
||
alt="A collapsed training card—a single line showing the name and status of the process"
|
||
width="1200"
|
||
height="675"
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
<figcaption>Collapsed training card—a single line showing the process name and status</figcaption>
|
||
</figure>
|
||
<p class="section__prose">
|
||
Patterns from these cards were later applied to other sections of the product. It became easier to maintain a consistent style.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="case-block" id="processes">
|
||
<h2>Long processes—in a separate tab</h2>
|
||
<p class="section__prose">
|
||
Some tasks run in parallel with other work. For such scenarios, a modal window opens on a separate page.
|
||
</p>
|
||
<aside class="case-callout" data-callout>
|
||
<span class="case-callout__emoji" aria-hidden="true">💡</span>
|
||
<div class="case-callout__content">
|
||
<p>
|
||
The user keeps the process window open in a neighboring tab to monitor progress while continuing to work on the project in the available sections.
|
||
</p>
|
||
</div>
|
||
</aside>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="../../../assets/ai-platform-primo-rpa/fullscreen_modal-import_dataset.webp"
|
||
alt="Importing a dataset in a modal window on a separate page"
|
||
width="1440"
|
||
height="1024"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption>Importing a dataset in a modal window on a separate page—a full-screen upload form</figcaption>
|
||
</figure>
|
||
<p class="section__prose">
|
||
Meanwhile, a placeholder with a button to navigate to the process remains on the project page.
|
||
</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img
|
||
src="../../../assets/ai-platform-primo-rpa/fullscreen_modal-in_project-import_dataset.webp"
|
||
alt="Active Import Placeholder Within a Project"
|
||
width="1200"
|
||
height="675"
|
||
loading="lazy"
|
||
decoding="async"
|
||
data-image-viewer
|
||
/>
|
||
<figcaption>Placeholder for active import within the project—progress indicator and "Go to Process" button</figcaption>
|
||
</figure>
|
||
</div>
|
||
|
||
<div class="case-block" id="decisions">
|
||
<h2>What I Decided Not to Do, and Why</h2>
|
||
<ul>
|
||
<li><strong>I chose not to disable buttons on individual pages</strong> during active processes. A modal on a separate page is technically simpler, and progress is visible in the adjacent tab.</li>
|
||
<li><strong>I didn’t create new components</strong> except in extreme cases. The ready-made Ant Design library sped up development and kept the interface consistent.</li>
|
||
<li><strong>I didn’t remove the editor’s side panels entirely</strong>; instead, I made them collapsible. Beginners need on-screen hints, while advanced users need as much space as possible for their document.</li>
|
||
<li><strong>I didn’t set up a separate design system.</strong> The product already had a framework, so I passed links to the existing user flows in Figma to the development team.</li>
|
||
</ul>
|
||
<h3>Handoff to Development</h3>
|
||
<p class="section__prose">
|
||
Once a week, we discussed the design with the team: the task list, priorities, and deadlines aligned with release plans. I went over the details of the mockups one-on-one with the front-end developer and provided feedback after the layout was completed to ensure the result matched the intended behavior.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="case-block" id="results">
|
||
<h2>Result</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>
|
||
Setup for the first project: it used to take ~3 days, now it takes ~4 hours. 7 out of 10 customers complete the setup without technical support.
|
||
</p>
|
||
</div>
|
||
</aside>
|
||
<ul>
|
||
<li>Requests to the implementation team during the setup phase decreased by <strong>40%.</strong> Clients complete the basic setup on their own.</li>
|
||
<li><strong>7 out of 10</strong> new clients set up their first project without technical support. Before the redesign, it was 1 out of 10.</li>
|
||
<li>Setting up the first project: from <strong>~3 days to ~4 hours</strong>.</li>
|
||
<li><strong>Over 30 screens</strong> were redesigned: navigation, dataset editor, model training, and data import.</li>
|
||
<li>We established design patterns that allow functionality to be expanded without major rework.</li>
|
||
<li>The company hired a second designer. I brought her up to speed and oversaw the results; after she became familiar with the project, it was entirely transferred to her responsibility.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="case-block" id="conclusions">
|
||
<h2>Conclusions</h2>
|
||
<ul>
|
||
<li>The rigid framework turned out to be an accelerator rather than a limitation: the ready-made component library allowed us to focus on scenarios rather than pixels.</li>
|
||
<li>The most valuable insights came from configuration experts. Next time, I would involve the implementation team even earlier.</li>
|
||
<li>Handing the project over to a new designer confirmed that the established patterns work and can be explained and maintained without the original author.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<section class="section section--surface" data-reveal>
|
||
<div class="section__inner">
|
||
<h2 class="section__title">See also</h2>
|
||
<ol class="mini-projects-grid" data-mini-projects-list>
|
||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="ai-platform-primo-rpa">
|
||
<a class="mp-card mp-card--link mp-card--stack" href="../ai-platform-primo-rpa/" aria-label="AI Platform — Open a Case">
|
||
<div class="mp-card__media" aria-hidden="true">
|
||
<img
|
||
class="mp-card__image"
|
||
src="../../../assets/ai-platform-primo-rpa/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
<div class="mp-card__body">
|
||
<h3 class="mp-card__title">Primo AI Server</h3>
|
||
<ul class="mp-card__tags" aria-label="Project Type">
|
||
<li class="mp-card__tag">UX/UI</li>
|
||
<li class="mp-card__tag">Web App</li>
|
||
</ul>
|
||
<p class="mp-card__desc">An interface for training and using AI models in business processes: working with data, automation scenarios, and Smart OCR.</p>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="lunacy">
|
||
<a class="mp-card mp-card--link mp-card--stack" href="../lunacy/" aria-label="Lunacy Image Editor — Open a Case">
|
||
<div class="mp-card__media" aria-hidden="true">
|
||
<img
|
||
class="mp-card__image"
|
||
src="../../../assets/lunacy/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
<div class="mp-card__body">
|
||
<h3 class="mp-card__title">Lunacy</h3>
|
||
<ul class="mp-card__tags" aria-label="Project Type">
|
||
<li class="mp-card__tag">UX/UI</li>
|
||
<li class="mp-card__tag">Desktop App</li>
|
||
</ul>
|
||
<p class="mp-card__desc">Worked on the Lunacy interface as part of the Icons8 team: user flow, complex prototypes, and improvements to functionality and interface logic.</p>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="manu-game-maker" hidden>
|
||
<a class="mp-card mp-card--link mp-card--stack" href="../manu-game-maker/" aria-label="MANU Game Engine — Open a Case">
|
||
<div class="mp-card__media" aria-hidden="true">
|
||
<img
|
||
class="mp-card__image"
|
||
src="../../../assets/manu-game-maker/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
<div class="mp-card__body">
|
||
<h3 class="mp-card__title">MANU Game Engine</h3>
|
||
<ul class="mp-card__tags" aria-label="Project Type">
|
||
<li class="mp-card__tag">Product Design</li>
|
||
<li class="mp-card__tag">Desktop App</li>
|
||
</ul>
|
||
<p class="mp-card__desc">Redesign and development of the game engine’s user interface: a new operational concept, an updated visual system, and the development of hundreds of complex user scenarios.</p>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="mobile-clinic-app" hidden>
|
||
<a class="mp-card mp-card--link mp-card--stack" href="../mobile-clinic-app/" aria-label="Mobile app for a network of clinics — open a case">
|
||
<div class="mp-card__media" aria-hidden="true">
|
||
<img
|
||
class="mp-card__image"
|
||
src="../../../assets/mobile-clinic-app/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
<div class="mp-card__body">
|
||
<h3 class="mp-card__title">Mobile app for a network of clinics</h3>
|
||
<ul class="mp-card__tags" aria-label="Project Type">
|
||
<li class="mp-card__tag">UX/UI</li>
|
||
<li class="mp-card__tag">Mobile App</li>
|
||
</ul>
|
||
<p class="mp-card__desc">Design of a mobile app for scheduling doctor appointments and managing medical services. Focus on a simple user journey, intuitive navigation, and quick access to necessary actions.</p>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="orc-automation-panel">
|
||
<a class="mp-card mp-card--link mp-card--stack" href="../orc-automation-panel/" aria-label="Web Panel for Automation Orchestration — Open a Case">
|
||
<div class="mp-card__media" aria-hidden="true">
|
||
<img
|
||
class="mp-card__image"
|
||
src="../../../assets/orc-primo-rpa/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
<div class="mp-card__body">
|
||
<h3 class="mp-card__title">Primo Orc</h3>
|
||
<ul class="mp-card__tags" aria-label="Project Type">
|
||
<li class="mp-card__tag">Mentoring and Coaching</li>
|
||
</ul>
|
||
<p class="mp-card__desc">Primo RPA orchestrator’s web dashboard: projects, deployment, and monitoring of RPA robots. Redesign of key screens for production without interrupting releases.</p>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="task-distribution-concept" hidden>
|
||
<a class="mp-card mp-card--link mp-card--stack" href="../task-distribution-concept/" aria-label="The concept of a task-assignment service—open a case">
|
||
<div class="mp-card__media" aria-hidden="true">
|
||
<img
|
||
class="mp-card__image"
|
||
src="../../../assets/task-distribution-concept/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
<div class="mp-card__body">
|
||
<h3 class="mp-card__title">Task Distribution Service Concept</h3>
|
||
<ul class="mp-card__tags" aria-label="Project Type">
|
||
<li class="mp-card__tag">UX/UI</li>
|
||
<li class="mp-card__tag">Analytics</li>
|
||
</ul>
|
||
<p class="mp-card__desc">Product concept for a service to create, assign, and track tasks, with an emphasis on process transparency and seamless teamwork.</p>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li class="mini-projects-grid__item" data-mp-cells="3" data-mp-cells-sm="2" data-related-slug="task-tracker" hidden>
|
||
<a class="mp-card mp-card--link mp-card--stack" href="../task-tracker/" aria-label="Task Tracker for the Back-Office System — Open a Case">
|
||
<div class="mp-card__media" aria-hidden="true">
|
||
<img
|
||
class="mp-card__image"
|
||
src="../../../assets/task-tracker/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
<div class="mp-card__body">
|
||
<h3 class="mp-card__title">Task tracker for a back-office system</h3>
|
||
<ul class="mp-card__tags" aria-label="Project Type">
|
||
<li class="mp-card__tag">Product Design</li>
|
||
<li class="mp-card__tag">Web App</li>
|
||
</ul>
|
||
<p class="mp-card__desc">An interface for planning and assigning tasks in the operations department: shared pool, personal to-do list, overview by assignee; tabs, filters, board/list/table views, and drag-and-drop functionality.</p>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</section>
|
||
<section hidden class="section section--surface" aria-hidden="true">
|
||
<div class="section__inner">
|
||
<div class="projects__heading">
|
||
<h2 class="section__title projects__title">Portfolio</h2>
|
||
<div class="projects__controls" aria-label="Portfolio card navigation">
|
||
<button type="button" class="projects__nav-btn" data-projects-prev aria-label="Scroll left" aria-controls="projects-viewport">
|
||
<span class="projects__nav-ico projects__nav-ico--left" aria-hidden="true"></span>
|
||
</button>
|
||
<button type="button" class="projects__nav-btn" data-projects-next aria-label="Scroll right" aria-controls="projects-viewport">
|
||
<span class="projects__nav-ico projects__nav-ico--right" aria-hidden="true"></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="projects-carousel">
|
||
<div id="projects-viewport" class="projects-carousel__viewport" data-projects-viewport>
|
||
<div class="projects-carousel__track">
|
||
<div class="projects-carousel__spacer" aria-hidden="true"></div>
|
||
<article class="projects-carousel__item">
|
||
<a class="portfolio-card" data-glass="false" href="../orc-automation-panel/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">Web panel for automation orchestration</h3>
|
||
<p class="portfolio-card__summary">
|
||
Primo RPA orchestrator web console: projects, launch and control of RPA bots. Redesign of key screens for production without halting releases.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Key tags">
|
||
<li class="portfolio-card__tag">UX/UI</li>
|
||
<li class="portfolio-card__tag">Web App</li>
|
||
</ul>
|
||
</div>
|
||
<div class="portfolio-card__cover" aria-hidden="true">
|
||
<img
|
||
class="portfolio-card__image"
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
data-defer-src="../../../assets/orc-primo-rpa/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
</a>
|
||
</article>
|
||
<article class="projects-carousel__item">
|
||
<a class="portfolio-card" data-glass="false" href="../ai-platform-primo-rpa/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">Platform for working with AI</h3>
|
||
<p class="portfolio-card__summary">
|
||
Interface for training and using AI models in business processes: data work, automation scenarios, and Smart OCR.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Key tags">
|
||
<li class="portfolio-card__tag">UX/UI</li>
|
||
<li class="portfolio-card__tag">Web App</li>
|
||
</ul>
|
||
</div>
|
||
<div class="portfolio-card__cover" aria-hidden="true">
|
||
<img
|
||
class="portfolio-card__image"
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
data-defer-src="../../../assets/ai-platform-primo-rpa/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
</a>
|
||
</article>
|
||
<article class="projects-carousel__item">
|
||
<a class="portfolio-card" data-glass="false" href="../task-tracker/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">Task tracker for a back-office system</h3>
|
||
<p class="portfolio-card__summary">
|
||
Interface for planning and distributing tasks in the operations department: shared pool, personal ToDo, per-assignee overview; tabs, filters, board / list / table views, drag & drop.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Key tags">
|
||
<li class="portfolio-card__tag">Product Design</li>
|
||
<li class="portfolio-card__tag">Web App</li>
|
||
</ul>
|
||
</div>
|
||
<div class="portfolio-card__cover" aria-hidden="true">
|
||
<img
|
||
class="portfolio-card__image"
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
data-defer-src="../../../assets/task-tracker/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
</a>
|
||
</article>
|
||
<article class="projects-carousel__item">
|
||
<a class="portfolio-card" data-glass="false" href="../manu-game-maker/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">MANU game engine</h3>
|
||
<p class="portfolio-card__summary">
|
||
Redesign and evolution of the game engine interface: a new working concept, refreshed visual system, and hundreds of complex user scenarios worked through.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Key tags">
|
||
<li class="portfolio-card__tag">Product Design</li>
|
||
<li class="portfolio-card__tag">Desktop App</li>
|
||
</ul>
|
||
</div>
|
||
<div class="portfolio-card__cover" aria-hidden="true">
|
||
<img
|
||
class="portfolio-card__image"
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
data-defer-src="../../../assets/manu-game-maker/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
</a>
|
||
</article>
|
||
<article class="projects-carousel__item">
|
||
<a class="portfolio-card" data-glass="false" href="../lunacy/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">Graphics editor Lunacy</h3>
|
||
<p class="portfolio-card__summary">
|
||
Work on the Lunacy interface at Icons8: user flows, complex prototypes, improved functionality and interface logic.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Key tags">
|
||
<li class="portfolio-card__tag">UX/UI</li>
|
||
<li class="portfolio-card__tag">Desktop App</li>
|
||
</ul>
|
||
</div>
|
||
<div class="portfolio-card__cover" aria-hidden="true">
|
||
<img
|
||
class="portfolio-card__image"
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
data-defer-src="../../../assets/lunacy/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
</a>
|
||
</article>
|
||
<article class="projects-carousel__item">
|
||
<a class="portfolio-card" data-glass="false" href="../mobile-clinic-app/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">Mobile app for a clinic network</h3>
|
||
<p class="portfolio-card__summary">
|
||
Design of a mobile app for booking doctors and managing medical services. Focus on a simple user path, clear navigation, and quick access to the right actions.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Key tags">
|
||
<li class="portfolio-card__tag">UX/UI</li>
|
||
<li class="portfolio-card__tag">Mobile App</li>
|
||
</ul>
|
||
</div>
|
||
<div class="portfolio-card__cover" aria-hidden="true">
|
||
<img
|
||
class="portfolio-card__image"
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
data-defer-src="../../../assets/mobile-clinic-app/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
</a>
|
||
</article>
|
||
<article class="projects-carousel__item">
|
||
<a class="portfolio-card" data-glass="false" href="../task-distribution-concept/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">Task distribution service concept</h3>
|
||
<p class="portfolio-card__summary">
|
||
A product concept for a service to set, distribute and track tasks, with emphasis on process transparency and comfortable teamwork.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Key tags">
|
||
<li class="portfolio-card__tag">UX/UI</li>
|
||
<li class="portfolio-card__tag">Analytics</li>
|
||
</ul>
|
||
</div>
|
||
<div class="portfolio-card__cover" aria-hidden="true">
|
||
<img
|
||
class="portfolio-card__image"
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
data-defer-src="../../../assets/task-distribution-concept/cover.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
</a>
|
||
</article>
|
||
<article class="projects-carousel__item">
|
||
<a class="portfolio-card" data-glass="false" href="../obsidian-plugin-columns-view/">
|
||
<div class="portfolio-card__body">
|
||
<h3 class="portfolio-card__title">Columns view — plugin for Obsidian</h3>
|
||
<p class="portfolio-card__summary">
|
||
Interface for multi-column note work: convenient navigation, filtering and column-view settings right inside the Obsidian editor.
|
||
</p>
|
||
<ul class="portfolio-card__tags" aria-label="Key tags">
|
||
<li class="portfolio-card__tag">UX/UI</li>
|
||
<li class="portfolio-card__tag">Plugin</li>
|
||
</ul>
|
||
</div>
|
||
<div class="portfolio-card__cover" aria-hidden="true">
|
||
<img
|
||
class="portfolio-card__image"
|
||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||
data-defer-src="../../../assets/obsidian-plugin-columns-view/filter use.webp"
|
||
alt=""
|
||
width="400"
|
||
height="225"
|
||
decoding="async"
|
||
/>
|
||
</div>
|
||
</a>
|
||
</article>
|
||
<div class="projects-carousel__spacer" aria-hidden="true"></div>
|
||
</div>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
class="projects-carousel__edge-hit projects-carousel__edge-hit--left"
|
||
data-projects-edge-prev
|
||
aria-label="Scroll portfolio left"
|
||
></button>
|
||
<button
|
||
type="button"
|
||
class="projects-carousel__edge-hit projects-carousel__edge-hit--right"
|
||
data-projects-edge-next
|
||
aria-label="Scroll portfolio right"
|
||
></button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contact" class="section section--surface section--footerish" data-reveal>
|
||
<div class="section__inner">
|
||
<h2 class="section__title">Contact</h2>
|
||
<ul class="contact-grid">
|
||
<li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../../assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">I'll reply today</span></span></a></li>
|
||
<li><a class="contact-card contact-card--link contact-card--brand-whatsapp" href="https://wa.me/qr/E2AWW5ZHE3ANJ1" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../../assets/shared/icons/whatsapp.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">WhatsApp</span><span class="contact-card__hint">Stable connection</span></span></a></li>
|
||
|
||
<li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5zaXRl" data-hint-default="Copy address" aria-label="Copy email address to clipboard"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Email</span><span class="contact-card__hint" data-contact-copy-hint>Copy address</span></span></button></li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="footer">
|
||
<div class="footer__inner">
|
||
<span class="footer__chunk footer__chunk--date">© 2015–2026<span class="footer__sep" aria-hidden="true"> ·
|
||
</span></span>
|
||
<span class="footer__chunk footer__chunk--main">Website design and development — Nikolay Mamadaev</span> ·<span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> </span><a href="../../cases/design-system/">Design System</a><span class="footer__sep" aria-hidden="true">·
|
||
</span><a href="../../cookie-policy/">Cookie policy</a></span> ·<span class="footer__chunk footer__chunk--lang"><span class="footer__sep" aria-hidden="true">
|
||
</span><nav class="lang-switch" aria-label="Choose language" data-lang-switch>
|
||
<a class="lang-switch__btn" data-lang="ru" href="/">Русский</a>
|
||
</nav>
|
||
<script>
|
||
(function () {
|
||
var p = location.pathname.replace(/^\/+/, "");
|
||
var isEn = p.indexOf("en/") === 0;
|
||
var base = isEn ? p.slice(3) : p;
|
||
var links = document.querySelectorAll("[data-lang-switch] [data-lang]");
|
||
for (var i = 0; i < links.length; i++) {
|
||
var l = links[i].getAttribute("data-lang");
|
||
links[i].setAttribute("href", (l === "en" ? "/en/" : "/") + base);
|
||
}
|
||
})();
|
||
</script>
|
||
</span></div>
|
||
</footer>
|
||
|
||
<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
|
||
<p class="cookie-notice__text">
|
||
This site uses cookies to ensure a smooth user experience. For more information, see the
|
||
<a href="../../cookie-policy/" data-cookie-policy-link>cookie policy</a>.
|
||
</p>
|
||
<button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
|
||
<span>Accept</span>
|
||
|
||
<span class="cookie-notice__accept-icon" aria-hidden="true"><img src="../../../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" /></span>
|
||
|
||
</button>
|
||
</aside>
|
||
|
||
<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
|
||
|
||
</body>
|
||
</html>
|