Senior Product Designer · Product Builder
Повернутися
UAEN
Повернутися

Agro Controler

Планування та управління агропідприємством

WEB
Agro Controler
Роль: Senior Product DesignerПлатформа: B2B вебзастосунокНапрям роботи: UX, UI, структура продукту, дизайн-система

Agro Controler: комплексний продукт для аграрних компаній, який пов’язує сезонне планування з реальною роботою в полі. Команда може сформувати сівозміну, оцінити економіку культур, перевірити продуктивність техніки, побачити дефіцит потужності й перетворити план на конкретні наряди.

Я працював не над окремою функцією, а над системою взаємозалежних сценаріїв: інформаційною архітектурою, складними таблицями й розрахунками, візуальною ієрархією та переходом від аналітичного рішення до операційної дії.

Операційна модель

Один сезон, одна пов’язана система рішень

Кожен етап змінює наступний. Площа та культура визначають економіку; операції формують навантаження; доступність техніки перевіряє реалістичність плану; підтверджене рішення стає роботою в полі.

  1. 01

    Сівозміна

    Культури, площі та сезонні сценарії

  2. 02

    Економіка

    Врожайність, виручка та маржа

  3. 03

    Техніка

    Продуктивність, пальне й вартість

  4. 04

    План

    Операції та часові вікна

  5. 05

    Обмеження

    Дефіцит ресурсів і робота під ризиком

  6. 06

    Виконання

    Завдання, наряди та відповідальні

01 · Сформувати сезон

Поєднати агрономічне рішення з економічним

Сівозміна не обмежується переліком культур. Користувач розподіляє площу, задає прогнозовану врожайність і ціну та одразу бачить вплив кожної культури на виручку й валову маржу.

Редагування відбувається безпосередньо в таблиці, а підсумки й графіки залишаються в тому самому контексті. Так команда може порівнювати сценарії, не переносячи дані між окремими файлами або екранами.

Планування сівозміни з економічними показниками та графікамиВідкрити повнорозмірний екран ↗

Рішення в контексті

Площа, врожайність, ціна й маржа читаються як одна модель, а не як розрізнені показники.

Пряме редагування

Ключові припущення можна змінювати там, де користувач оцінює результат.

Порівняння сценаріїв

Таблиця відповідає за точність, а підсумки й графіки допомагають швидко побачити різницю.

02 · Перевірити ресурси

Перетворити технічні параметри на операційну відповідь

Продуктивність операції залежить від конфігурації техніки, ширини захвату, швидкості, коефіцієнта завантаження та доступного робочого часу. Детальна таблиця зберігає точність розрахунку, а узагальнені показники роблять конфігурації порівнюваними.

Інтерфейс не ховає складність домену, але розділяє параметри, результат і вартість. Користувач може зрозуміти не лише яка конфігурація швидша, а й скільки гектарів вона обробить, скільки пального використає та якою буде вартість роботи.

Порівняння продуктивності, витрат і параметрів комплектів техніки
Порівняння продуктивності, витрат і параметрів комплектів технікиВідкрити повнорозмірний екран ↗
03 · Знайти обмеження

Показати, коли план перестає бути реалістичним

Технологічний план пов’язує культури, етапи вирощування, операції, площу, машинний час і витрати пального. Але сама таблиця ще не відповідає на головне питання: чи можна виконати всі операції у потрібні строки.

Equipment capacity порівнює необхідну та доступну потужність протягом сезону. Коли попит перевищує ресурс, система показує період дефіциту, його масштаб і обсяг робіт під ризиком. Це переводить складний розрахунок у конкретну точку прийняття рішення.

Дефіцит доступної потужності техніки у виробничому планіВідкрити повнорозмірний екран ↗
04 · Перейти до виконання

Замкнути цикл між планом і роботою в полі

План завершується не звітом, а конкретною роботою. У задачі зібрані дати, операція, культура, залишок обсягу, джерело, матеріали та відповідальна людина.

Work orders розкладають заплановану операцію на контрольовані призначення для конкретного поля й виконавця. Так стратегічна модель сезону переходить у щоденну роботу, а команда зберігає зв’язок між причиною рішення та його виконанням.

Завдання та активні наряди на польові роботи
Завдання та активні наряди на польові роботиВідкрити повнорозмірний екран ↗

Проєктування для щільної операційної роботи

У B2B-системі велика кількість даних не є проблемою сама по собі. Проблема виникає, коли користувач не може відрізнити стан, припущення, відхилення й наступну дію. Інтерфейс побудований навколо трьох принципів.

01

Ієрархія перед декором

Структура таблиць, групування та стабільні колонки допомагають сканувати великі масиви без втрати контексту.

02

Винятки перед середнім

Колір і графіки підсвічують дефіцит, ризик або відхилення, а не намагаються однаково акцентувати всі дані.

03

Дія поруч із причиною

Деталі й оптимізація відкриваються з того місця, де користувач помітив проблему.

Дизайн-система

Одна візуальна мова для планування, розрахунків і роботи в полі

Agro Controler поєднує планування, розрахунки й щоденне виконання, тому дизайн-система має однаково добре працювати з щільними таблицями, аналітичними графіками й короткими операційними діями. Foundations задають спільну візуальну мову, семантичні токени відокремлюють роль елемента від конкретного кольору, а продуктові патерни зберігають однакову логіку між модулями.

Система побудована у три шари: примітивні значення, зняті з продукту, семантичні ролі, якими користується кожен екран, і токени компонентів для рішень, що належать одному компоненту.

Нейтральні поверхніШість темних кроків тримають усю ієрархію інтерфейсу. Підйом — це світліша поверхня, а не тінь.
  • neutral.950#0d0d0eФон застосунку
  • neutral.900#1b1b1cРобоча панель
  • neutral.875#212122Смуга рядка, активна навігація
  • neutral.850#252526Картка, підсумок
  • neutral.800#2a2a2bБічна панель
  • neutral.750#323233Обрана вкладка, кнопка

Альфа тексту й меж

  • white.100
  • white.70
  • white.50
  • white.30
  • white.10
  • white.05

Текст і роздільники — білий із фіксованою прозорістю, тому вони однакові на кожній поверхні.

Семантичні токениЕкрани використовують ролі, а не hex-значення.

Фон і поверхні

  • color.background.appneutral.950
  • color.surface.primaryneutral.900
  • color.surface.secondaryneutral.850
  • color.surface.elevatedneutral.800
  • color.surface.selectedneutral.750

Текст

  • color.text.primarywhite.100
  • color.text.secondarywhite.70
  • color.text.mutedwhite.50
  • color.text.disabledwhite.30

Межі

  • color.border.subtlewhite.05
  • color.border.defaultwhite.10
  • color.border.focusblue.400

Статуси

  • color.status.successgreen.300
  • color.status.warningsand.200
  • color.status.criticalred.300
  • color.status.infoslate.400
Візуалізація данихКатегорії й пороги ніколи не мають спільної колірної логіки: колір культури не можна прочитати як попередження.

Категорії культур

  • Кукурудза#518a4d
  • Сорго#edd25b
  • Ріпак#d98a3d
  • Ячмінь#7fb8a4
  • Нут#c7a878
  • Соняшник#6bb1dd
  • Пшениця#ae4da3
  • Соя#9e5050

Поріг потужності

  • Доступна потужність
  • Потрібна потужність
  • Дефіцит

Серії процесів

  • Дискування
  • Культивація
  • Захист рослин

Як оцінювати цінність продукту

Для такого продукту недостатньо рахувати перегляди екранів. Важливо бачити, чи допомагає система створити реалістичний план, вчасно знайти обмеження та перевести рішення у виконану роботу.

Тому модель вимірювання повторює операційний процес. Конкретні значення мають з’явитися лише після впровадження аналітики та перевірки на реальних даних.

  1. 01План створено
  2. 02Ризик виявлено
  3. 03Рішення прийнято
  4. 04Задачу створено
  5. 05Роботу виконано

Що демонструє цей кейс

Agro Controler демонструє роботу зі складним B2B-доменом на рівні цілісної системи: від структури даних і розрахунків до сценаріїв, візуальної ієрархії та операційного виконання.

Ключовий результат дизайну полягає не в окремому екрані. Це безперервний ланцюг, у якому економічне припущення можна перевірити ресурсним обмеженням, перетворити на рішення й довести до конкретної роботи в полі.