1373 lines
76 KiB
HTML
1373 lines
76 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="Task interface for the operations department: tabs, filters, view modes, Figma prototypes, and research scenarios."
|
||
/>
|
||
<title>Task Tracker for a Back-Office System — 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/task-tracker/" />
|
||
<link rel="alternate" hreflang="ru" href="https://mamadaevv.site/cases/task-tracker/" />
|
||
<link rel="alternate" hreflang="en" href="https://mamadaevv.site/en/cases/task-tracker/" />
|
||
<link rel="alternate" hreflang="x-default" href="https://mamadaevv.site/cases/task-tracker/" />
|
||
<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="Task Tracker for a Back-Office System — Case Study" />
|
||
<meta property="og:description" content="Task interface for the operations department: tabs, filters, view modes, Figma prototypes, and research scenarios." />
|
||
<meta property="og:url" content="https://mamadaevv.site/en/cases/task-tracker/" />
|
||
<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="Task Tracker for a Back-Office System — Case Study" />
|
||
|
||
<!-- Twitter / X -->
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:title" content="Task Tracker for a Back-Office System — Case Study" />
|
||
<meta name="twitter:description" content="Task interface for the operations department: tabs, filters, view modes, Figma prototypes, and research scenarios." />
|
||
<meta name="twitter:image" content="https://mamadaevv.site/assets/og/og-default.png" />
|
||
<meta name="twitter:image:alt" content="Task Tracker for a Back-Office System — 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/task-tracker/#page",
|
||
"url": "https://mamadaevv.site/en/cases/task-tracker/",
|
||
"name": "Task Tracker for a Back-Office System — Case Study",
|
||
"description": "Task interface for the operations department: tabs, filters, view modes, Figma prototypes, and research scenarios.",
|
||
"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/task-tracker/#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": "Task Tracker for a Back-Office System — Case Study",
|
||
"item": "https://mamadaevv.site/cases/task-tracker/"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
</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.15rem, 2vw, 1.35rem);
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
}
|
||
.case-article h3 {
|
||
font-size: 1.05rem;
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
}
|
||
.case-article .section__prose {
|
||
margin-bottom: 0.75rem;
|
||
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;
|
||
}
|
||
.case-article a:not(.btn) {
|
||
color: var(--accent);
|
||
}
|
||
</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 data-current-case="task-tracker">
|
||
<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">Test Assignment · Back Office</p>
|
||
<h1 class="case-page__h1">Task Tracker for an Internal Back-Office System</h1>
|
||
<h2 id="zadanie">Assignment</h2>
|
||
<p class="section__prose">
|
||
Implement an interface for planning and assigning tasks to employees in the operations department who work in a back-office system. There are a large number of diverse tasks that can be grouped into the following categories: Type-1, Type-2, Type-3, Type-4, Type-5, Type-6, Type-7. Each task has its own automatically assigned priority. Users have access only to tasks from specific categories.
|
||
</p>
|
||
<p class="section__prose">The following needs to be implemented:</p>
|
||
<ul>
|
||
<li>
|
||
Main screen:
|
||
<ul>
|
||
<li>where the user can view all open general tasks and select some for themselves.</li>
|
||
<li>A personal to-do list displaying both manually selected tasks and automatically assigned ones.</li>
|
||
<li>For a selected task, there is the option to assign it to another employee or return it to the general list.</li>
|
||
</ul>
|
||
</li>
|
||
<li>A screen where users can see what tasks each person is working on.</li>
|
||
</ul>
|
||
|
||
<h2 id="vvedenie">Introduction</h2>
|
||
<p class="section__prose">
|
||
Since I personally have extensive experience working with task trackers, I’m drawing on my own experience and that of my colleagues, while taking the project requirements into account.
|
||
</p>
|
||
|
||
<h2 id="referensy">References</h2>
|
||
<figure class="case-media case-media--wide">
|
||
<img src="../../../assets/task-tracker/refs.webp" alt="References" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
|
||
</figure>
|
||
<ul>
|
||
<li>Task trackers (Trello, Monday, YouTrack, etc.)</li>
|
||
<li>Services for visual database management (Notion, Airtable, etc.)</li>
|
||
</ul>
|
||
|
||
<h2 id="reshenie">Solution</h2>
|
||
|
||
<h3 id="skrinkast">Screencast</h3>
|
||
<figure class="case-media" style="margin: 0.85rem 0 1.2rem">
|
||
<div class="case-video-shell">
|
||
<video controls preload="metadata" playsinline poster="../../../assets/task-tracker/full_preview.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
|
||
<source src="../../../assets/task-tracker/full_preview.webm" type="video/webm" />
|
||
<source src="../../../assets/task-tracker/full_preview.mp4" type="video/mp4" />
|
||
Your browser does not support video.
|
||
</video>
|
||
</div>
|
||
</figure>
|
||
<div class="case-links-grid">
|
||
|
||
|
||
<a
|
||
class="case-link-card"
|
||
href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-(Factoring)?page-id=0%3A1&node-id=20%3A1291&viewport=-5744%2C876%2C1.35&scaling=contain&starting-point-node-id=20%3A1291"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
><span class="case-link-card__media"><img src="../../../assets/task-tracker/tab_all-tasks.webp" alt="Figma Prototype Preview" width="1200" height="800" loading="lazy" decoding="async" /></span></a>
|
||
|
||
|
||
<a
|
||
class="case-link-card"
|
||
href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-(Factoring)?page-id=0%3A1&node-id=20%3A1291&viewport=-5744%2C876%2C1.35&scaling=contain&starting-point-node-id=20%3A1291"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
><span class="case-link-card__body"><span class="case-link-card__title">Figma Prototype</span>
|
||
<span class="case-link-card__meta">Interactive scenario based on tasks and views</span>
|
||
<span class="case-link-card__url">figma.com/proto/.../STENN-(Factoring)</span>
|
||
|
||
|
||
</span></a></div>
|
||
<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>It is assumed that an employee cannot create tasks but can view and partially edit them; therefore, an administrator or manager configures which tasks will be available to the employee.</p>
|
||
</div>
|
||
</aside>
|
||
|
||
<h3 id="tabs">Tabs</h3>
|
||
<p class="section__prose">On the <strong>All Tasks</strong> tab, the employee can view all available tasks.</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img src="../../../assets/task-tracker/tab_all-tasks.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
|
||
</figure>
|
||
<p class="section__prose">
|
||
The "<strong>My tasks</strong>" tab displays only those tasks assigned to the current employee. Tasks are grouped by status (the status is hidden in the task card).
|
||
</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img src="../../../assets/task-tracker/tab_my-tasks.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
|
||
</figure>
|
||
<p class="section__prose">The <strong>“Task by Assignee”</strong> tab displays all tasks broken down by assignee.</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img src="../../../assets/task-tracker/tab_tasks-by-assign.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
|
||
</figure>
|
||
<p class="section__prose">Options for the current tab are located on the right-hand side.</p>
|
||
<figure class="case-media case-media--natural">
|
||
<img src="../../../assets/task-tracker/actions_for_page.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" />
|
||
</figure>
|
||
<p class="section__prose">
|
||
All changes are saved when you leave the tab and when you close the entire <strong>Tasks</strong> page. These settings are individual, and each employee can customize the page as they see fit.
|
||
</p>
|
||
<ul>
|
||
<li>Group—allows you to create additional groupings based on task properties (category, priority, assignee, status, creation date, modification date).</li>
|
||
<li>View—allows you to change the display of current tasks to a different view: board, list, or table.</li>
|
||
<li>Filter—allows you to hide tasks based on their properties.</li>
|
||
<li>
|
||
Sort—allows you to determine the order in which tasks are displayed based on their properties. If sorting by status (High, Medium, Low) is enabled, you can choose either alphabetical order or reverse order, or you can create your own order. Dates and numbers are sorted in ascending or descending order.
|
||
</li>
|
||
<li>
|
||
Search on page — allows you to display only those tasks whose title or description contains a specific search word or phrase. (Search functionality can be improved by adding search operators if research demonstrates the need.)
|
||
</li>
|
||
</ul>
|
||
<p class="section__prose">
|
||
The page uses lazy loading for tasks. As you scroll down, new tasks will load. The number of tasks is displayed in the headers; this can be helpful for estimating how far you need to scroll to see everything. There may be a large number of tasks, in which case it might make sense to add pagination as well.
|
||
</p>
|
||
|
||
<h3 id="views">Display Options (Views)</h3>
|
||
<p class="section__prose">
|
||
Different views of the same tasks can be useful for various contexts in which the <strong>Tasks</strong> page is used, as well as to accommodate employees’ personal preferences, which increases their efficiency. An employee who isn’t annoyed by the interface works more productively and contributes more.
|
||
</p>
|
||
<figure class="case-media case-media--natural">
|
||
<img src="../../../assets/task-tracker/dropdown_menu_for_views.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" />
|
||
</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>When you change the view, the icon next to the <strong>“View”</strong> option also changes.</p>
|
||
</div>
|
||
</aside>
|
||
<p class="section__prose">
|
||
The <strong>Board</strong> view makes it easier to use the drag-and-drop feature (see below). It’s also visually easier to determine the number of tasks in a category, which I imagine could be helpful. When tasks are grouped by completion status, moving cards from left to right creates a natural horizontal flow of tasks from point A to point B.
|
||
</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img src="../../../assets/task-tracker/view_board.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
|
||
</figure>
|
||
<p class="section__prose">
|
||
The <strong>List</strong> view allows you to see more information in a smaller screen area. At the same time, this view is visually and functionally simpler than the table view, which means less cognitive load on the user. Also, all task titles start at the far left, making it easy <em>to scan</em> the list.
|
||
</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img src="../../../assets/task-tracker/view_list.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
|
||
</figure>
|
||
<p class="section__prose">
|
||
The <strong>Table</strong> view allows you to work with all task fields immediately, without having to open the task in a modal window or a separate page. The table allows you to customize the width and order of columns, which can be convenient in certain use cases.
|
||
</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img src="../../../assets/task-tracker/view_table.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
|
||
</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>Sections can be collapsed to fit only the necessary amount of content on the screen. (It might even make sense to save the collapsed/expanded state after switching views, tabs, or reloading the page.)</p>
|
||
</div>
|
||
</aside>
|
||
<figure class="case-media" style="margin: 0.85rem 0 1.2rem">
|
||
<div class="case-video-shell">
|
||
<video controls preload="metadata" playsinline poster="../../../assets/task-tracker/expand-collapse_group.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
|
||
<source src="../../../assets/task-tracker/expand-collapse_group.webm" type="video/webm" />
|
||
<source src="../../../assets/task-tracker/expand-collapse_group.mp4" type="video/mp4" />
|
||
Your browser does not support video.
|
||
</video>
|
||
</div>
|
||
</figure>
|
||
<div class="case-links-grid">
|
||
|
||
|
||
<a
|
||
class="case-link-card"
|
||
href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-(Task-Tracker)?page-id=0%3A1&node-id=39%3A700&viewport=-1875%2C-125%2C0.55&scaling=min-zoom&starting-point-node-id=20%3A1291&hide-ui=1"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
><span class="case-link-card__media"><img src="../../../assets/task-tracker/view_board.webp" alt="Preview of the "Board" View Prototype" width="1200" height="800" loading="lazy" decoding="async" /></span></a>
|
||
|
||
|
||
<a
|
||
class="case-link-card"
|
||
href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-(Task-Tracker)?page-id=0%3A1&node-id=39%3A700&viewport=-1875%2C-125%2C0.55&scaling=min-zoom&starting-point-node-id=20%3A1291&hide-ui=1"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
><span class="case-link-card__body"><span class="case-link-card__title">Prototype in Figma</span>
|
||
<span class="case-link-card__meta">Display options: Board, List, Table</span>
|
||
<span class="case-link-card__url">figma.com/proto/.../STENN- (Task Tracker)</span>
|
||
|
||
|
||
</span></a></div>
|
||
|
||
<h3 id="drag">Drag & Drop</h3>
|
||
<p class="section__prose">
|
||
In all views, you can drag and drop elements (cards, list items, and table rows and columns). This promotes more productive work and feels natural to the user. For example, if you need to distribute tasks among employees (for an admin or manager), change the status of multiple tasks at once, or do so within a short period of time.
|
||
</p>
|
||
<p class="section__prose"><strong>Board view</strong></p>
|
||
<figure class="case-media" style="margin: 0.85rem 0 1.2rem">
|
||
<div class="case-video-shell">
|
||
<video controls preload="metadata" playsinline poster="../../../assets/task-tracker/drag-drop-item_board-view.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
|
||
<source src="../../../assets/task-tracker/drag-drop-item_board-view.webm" type="video/webm" />
|
||
<source src="../../../assets/task-tracker/drag-drop-item_board-view.mp4" type="video/mp4" />
|
||
Your browser does not support video.
|
||
</video>
|
||
</div>
|
||
</figure>
|
||
<div class="case-links-grid">
|
||
|
||
|
||
<a
|
||
class="case-link-card"
|
||
href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-Task-Tracker?node-id=108%3A970&viewport=2248%2C341%2C0.33&scaling=contain&starting-point-node-id=108%3A1968&show-proto-sidebar=1"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
><span class="case-link-card__media" aria-hidden="true"><img src="../../../assets/task-tracker/view_board.webp" alt="" width="1200" height="800" loading="lazy" decoding="async" /></span></a>
|
||
|
||
|
||
<a
|
||
class="case-link-card"
|
||
href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-Task-Tracker?node-id=108%3A970&viewport=2248%2C341%2C0.33&scaling=contain&starting-point-node-id=108%3A1968&show-proto-sidebar=1"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
><span class="case-link-card__body"><span class="case-link-card__title">Figma prototype</span>
|
||
<span class="case-link-card__meta">Drag & Drop, Board view</span>
|
||
<span class="case-link-card__url">figma.com/proto/.../STENN-Task-Tracker</span>
|
||
|
||
|
||
</span></a></div>
|
||
<p class="section__prose"><strong>List view</strong></p>
|
||
<figure class="case-media" style="margin: 0.85rem 0 1.2rem">
|
||
<div class="case-video-shell">
|
||
<video controls preload="metadata" playsinline poster="../../../assets/task-tracker/drag-drop-item_list-view.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
|
||
<source src="../../../assets/task-tracker/drag-drop-item_list-view.webm" type="video/webm" />
|
||
<source src="../../../assets/task-tracker/drag-drop-item_list-view.mp4" type="video/mp4" />
|
||
Your browser does not support video.
|
||
</video>
|
||
</div>
|
||
</figure>
|
||
<div class="case-links-grid">
|
||
|
||
|
||
<a
|
||
class="case-link-card"
|
||
href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-Task-Tracker?node-id=108%3A970&viewport=2248%2C341%2C0.33&scaling=contain&starting-point-node-id=108%3A2607&show-proto-sidebar=1"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
><span class="case-link-card__media" aria-hidden="true"><img src="../../../assets/task-tracker/view_list.webp" alt="" width="1200" height="800" loading="lazy" decoding="async" /></span></a>
|
||
|
||
|
||
<a
|
||
class="case-link-card"
|
||
href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-Task-Tracker?node-id=108%3A970&viewport=2248%2C341%2C0.33&scaling=contain&starting-point-node-id=108%3A2607&show-proto-sidebar=1"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
><span class="case-link-card__body"><span class="case-link-card__title">Prototype in Figma</span>
|
||
<span class="case-link-card__meta">Drag & Drop, List view</span>
|
||
<span class="case-link-card__url">figma.com/proto/.../STENN-Task-Tracker</span>
|
||
|
||
|
||
</span></a></div>
|
||
<p class="section__prose"><strong>Advanced interactive prototype in ProtoPie</strong></p>
|
||
<p class="section__prose">
|
||
A schematic representation of how Drag & Drop works. This type of prototype helps designers better understand the nuances that need to be considered in the user flow, as well as when preparing specifications for developers. Also, by testing this prototype, you may realize that the feature needs to work completely differently and decide to redesign it right away. This saves overall development time.
|
||
</p>
|
||
<figure class="case-media" style="margin: 0.85rem 0 1.2rem">
|
||
<div class="case-video-shell">
|
||
<video controls preload="metadata" playsinline poster="../../../assets/task-tracker/drag-drop-action_example.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
|
||
<source src="../../../assets/task-tracker/drag-drop-action_example.webm" type="video/webm" />
|
||
<source src="../../../assets/task-tracker/drag-drop-action_example.mp4" type="video/mp4" />
|
||
Your browser does not support video.
|
||
</video>
|
||
</div>
|
||
</figure>
|
||
<div class="case-links-grid">
|
||
|
||
|
||
<a
|
||
class="case-link-card case-link-card--favicon"
|
||
href="https://cloud.protopie.io/p/e7a45bd3f2?touchHint=false&ui=false&scaleToFit=false&cursorType=arrow&mockup=false&bgColor=%23F5F5F5&playSpeed=1&playerAppPopup=true"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
><span class="case-link-card__media" aria-hidden="true"><img src="https://www.google.com/s2/favicons?domain=cloud.protopie.io&sz=128" alt="" width="24" height="24" decoding="async" /></span></a>
|
||
|
||
|
||
<a
|
||
class="case-link-card case-link-card--favicon"
|
||
href="https://cloud.protopie.io/p/e7a45bd3f2?touchHint=false&ui=false&scaleToFit=false&cursorType=arrow&mockup=false&bgColor=%23F5F5F5&playSpeed=1&playerAppPopup=true"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
><span class="case-link-card__body"><span class="case-link-card__title">Prototype | drag_drop | ProtoPie Cloud</span>
|
||
<span class="case-link-card__meta">Interactive</span> <span class="case-link-card__title">prototype</span><span class="case-link-card__meta"> in the ProtoPie cloud</span>
|
||
cloud<span class="case-link-card__url">.protopie.io/...</span>
|
||
|
||
|
||
</span></a></div>
|
||
<p class="section__prose">
|
||
In the prototype, only the blue card can be moved, and not all positions work correctly. You can view the recording, which is available on the same prototype page.
|
||
</p>
|
||
|
||
<h2 id="stil">Style</h2>
|
||
<p class="section__prose">
|
||
The visual style can be anything you like without changing <em>the framework</em> itself<em>.</em> For example, it could be a bit more colorful with more expressive fonts.
|
||
</p>
|
||
<p class="section__prose">Light-colored theme</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img src="../../../assets/task-tracker/light_theme_color.webp" alt="Light-colored theme" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
|
||
</figure>
|
||
<div class="case-links-grid">
|
||
|
||
|
||
<a
|
||
class="case-link-card case-link-card--favicon"
|
||
href="https://www.figma.com/file/aFvwvTZuksD0JTo6yFXyUz/STENN-(Task-Tracker)?node-id=174%3A5703"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
><span class="case-link-card__media" aria-hidden="true"><img src="https://www.google.com/s2/favicons?domain=www.figma.com&sz=128" alt="" width="24" height="24" decoding="async" /></span></a>
|
||
|
||
|
||
<a
|
||
class="case-link-card case-link-card--favicon"
|
||
href="https://www.figma.com/file/aFvwvTZuksD0JTo6yFXyUz/STENN-(Task-Tracker)?node-id=174%3A5703"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
><span class="case-link-card__body"><span class="case-link-card__title">Figma Frame</span>
|
||
<span class="case-link-card__meta">Light-colored theme</span>
|
||
<span class="case-link-card__url">figma.com/file/.../STENN- (Task-Tracker)</span>
|
||
|
||
|
||
</span></a></div>
|
||
<p class="section__prose">Neutral dark theme</p>
|
||
<figure class="case-media case-media--wide">
|
||
<img src="../../../assets/task-tracker/dark_theme.webp" alt="Neutral Dark Theme" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
|
||
</figure>
|
||
<div class="case-links-grid">
|
||
|
||
|
||
<a
|
||
class="case-link-card case-link-card--favicon"
|
||
href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN--Task-Tracker-?node-id=135-5400&t=BzGQOTE0ty7u2E50-1"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
><span class="case-link-card__media" aria-hidden="true"><img src="https://www.google.com/s2/favicons?domain=www.figma.com&sz=128" alt="" width="24" height="24" decoding="async" /></span></a>
|
||
|
||
|
||
<a
|
||
class="case-link-card case-link-card--favicon"
|
||
href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN--Task-Tracker-?node-id=135-5400&t=BzGQOTE0ty7u2E50-1"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
><span class="case-link-card__body"><span class="case-link-card__title">Frame in Figma</span>
|
||
<span class="case-link-card__meta">Neutral dark theme</span>
|
||
<span class="case-link-card__url">figma.com/proto/.../STENN--Task-Tracker-</span>
|
||
|
||
|
||
</span></a></div>
|
||
|
||
<h2 id="issledovaniya">Research</h2>
|
||
<p class="section__prose">
|
||
During the Figma prototyping phase, you can conduct interviews with several employees—for example, 5 people. First, add real tasks from the current system to the prototype; about 20 should be enough. Next, you can hold a video call with the respondent’s screen shared or meet in person to present a few tasks and ask some questions. During the session, the respondent can interact with the prototype, but if something doesn’t work, the interviewer can note the attempt and explain that this feature isn’t working yet, as well as ask what the respondent expects to see next.
|
||
</p>
|
||
<h3 id="zadania">Tasks</h3>
|
||
<ol>
|
||
<li>Find your current tasks on the <strong>Tasks</strong> page under the <strong>All Tasks</strong> tab</li>
|
||
<li>Assign tasks to yourself to work on</li>
|
||
<li>Find a task related to a specific topic (the interviewer provides an example) that they have already completed</li>
|
||
<li>Show tasks that belong only to a specific category and must be completed by the end of the week</li>
|
||
<li>Request that the priority of several tasks be changed at once</li>
|
||
<li>Rate the visual appeal of the interface on a scale of 1 to 10</li>
|
||
<li>Rate your overall impression of the proposed concept on a scale of 1 to 10</li>
|
||
<li>Suggest additional features that would be useful</li>
|
||
</ol>
|
||
<h3 id="analitika">Analytics</h3>
|
||
<p class="section__prose">To assess the relevance of the implemented features, the following metrics must be collected.</p>
|
||
<ul>
|
||
<li>
|
||
Number of page views for the "<strong>Tasks"</strong> page <code>page_views_tasks</code> with the option to break them down
|
||
<ul>
|
||
<li>
|
||
by tabs
|
||
<ul>
|
||
<li>All tasks <code>all_tasks_tab</code></li>
|
||
<li>My tasks <code>my_tasks_tab</code></li>
|
||
<li>Tasks by Assignment <code>tasks_by_assign</code></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
by role
|
||
<ul>
|
||
<li>Admin <code>admin</code></li>
|
||
<li>Manager <code>manager</code></li>
|
||
<li>User <code>user</code></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
by search attempts
|
||
<ul>
|
||
<li>Search Used <code>search used</code></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
Number <strong>of</strong> enabled custom settings <code>custom_settings</code> with the option to group
|
||
<ul>
|
||
<li>
|
||
by tabs
|
||
<ul>
|
||
<li>All tasks <code>all_tasks_tab</code></li>
|
||
<li>My tasks <code>my_tasks_tab</code></li>
|
||
<li>Tasks by Assignment <code>tasks_by_assign</code></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
by role
|
||
<ul>
|
||
<li>Admin <code>admin</code></li>
|
||
<li>Manager <code>manager</code></li>
|
||
<li>User <code>user</code></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
by type
|
||
<ul>
|
||
<li>Group <code>group</code></li>
|
||
<li>Filter <code>filter</code></li>
|
||
<li>Sort <code>sort</code></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
Number of included species <strong>View Used</strong> <code>view_used</code> with the option to break down
|
||
<ul>
|
||
<li>
|
||
by tabs
|
||
<ul>
|
||
<li>All tasks <code>all_tasks_tab</code></li>
|
||
<li>My tasks <code>my_tasks_tab</code></li>
|
||
<li>Tasks by Assignment <code>tasks_by_assign</code></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
by role
|
||
<ul>
|
||
<li>Admin <code>admin</code></li>
|
||
<li>Manager <code>manager</code></li>
|
||
<li>User <code>user</code></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<p class="section__prose">
|
||
Then, over the next six months (or sooner, depending on user activity), we’ll be able to see the results and conduct a study (in the form of interviews) on the features that are used least frequently and those that have received complaints, in order to gather high-quality data and get a complete picture of what’s happening.
|
||
</p>
|
||
|
||
<h2 id="dop">Additional details</h2>
|
||
<p class="section__prose">
|
||
When creating mockups in Figma, the following were used: auto-layout features; interactive components; plugins (<a href="https://www.figma.com/community/plugin/735098390272716381/Iconify">Iconify</a>, <a href="https://www.figma.com/community/plugin/917796239623005893/Fitter">Fitter</a>, <a href="https://www.figma.com/community/plugin/1021879782774011952">Protofly</a>, <a href="https://www.figma.com/community/plugin/889676455045507628/Shadow-Maker">Shadow Maker</a>, <a href="https://www.figma.com/community/plugin/986289377230504703">Dark Side</a>, etc.); and the Community file (<a href="https://www.figma.com/community/file/831142089959745518">+40 Types of Cursor</a>). About 60% of the layers are named and organized for easier workflow. An 8pt grid is used, with additional sizes of 2pt and 4pt. Color styles are available for light and dark themes. The design adapts to changing window sizes (no mobile version).
|
||
</p>
|
||
<div class="case-links-grid">
|
||
|
||
|
||
<a
|
||
class="case-link-card case-link-card--favicon"
|
||
href="https://www.figma.com/file/aFvwvTZuksD0JTo6yFXyUz/STENN-(Task-Tracker)"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
><span class="case-link-card__media" aria-hidden="true"><img src="https://www.google.com/s2/favicons?domain=www.figma.com&sz=128" alt="" width="24" height="24" decoding="async" /></span></a>
|
||
|
||
|
||
<a
|
||
class="case-link-card case-link-card--favicon"
|
||
href="https://www.figma.com/file/aFvwvTZuksD0JTo6yFXyUz/STENN-(Task-Tracker)"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
><span class="case-link-card__body"><span class="case-link-card__title">Source file in Figma</span>
|
||
<span class="case-link-card__meta">STENN Project (Task-Tracker)</span>
|
||
<span class="case-link-card__url">figma.com/file/.../STENN- (Task-Tracker)</span>
|
||
|
||
|
||
</span></a></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>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded',function(){
|
||
var s=document.body.dataset.currentCase;
|
||
if(!s)return;
|
||
document.querySelectorAll('[data-related-slug="'+s+'"]').forEach(function(el){el.hidden=true;});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|
||
|
||
|
||
|