03 /2026 · у роботі
КонцептVolta — від енергоспоживання до зрозумілих бізнес-рішень
Панель витрат на електроенергію для малого бізнесу: скільки я витрачу цього місяця, де витік і що з цим зробити. Кейс у роботі.
- #Product Design: усі кейси з цим тегом
- #Data UI: усі кейси з цим тегом
- #UX Research: усі кейси з цим тегом
- Product Design
- UX Research
- Data UI
- Design System
Особистий проєкт у роботі: виріс із моєї власної проблеми, проєктується з розрахунку на малий бізнес. Прототип головного сценарію вже можна відкрити.
Глибина процесу
- Конкуренти
- 8
- Дослідження
- 2
- Спостереження
- 8
- Інсайти
- 4
- Болі
- 5
- Можливості
- 5
- Флоу
- 1
- Екрани
- 7
- Рішення
- 6
Скільки записів кожного етапу є в робочому зошиті проєкту. Це обсяг задокументованої роботи, а не оцінка.
- екранів у клікабельному прототипі
- 7екранів у клікабельному прототипі
- ролі з різними правами доступу
- 3ролі з різними правами доступу
- сценарії збою: лічильник офлайн, нова точка, тариф не задано
- 3сценарії збою: лічильник офлайн, нова точка, тариф не задано
- візуальних напрямів, для прототипу обрано 1c Signal
- 6 → 1візуальних напрямів, для прототипу обрано 1c Signal
Слід рішень
Записи й звʼязки з робочого зошита. Наведіть або натисніть на запис: видно, на що він спирається і до чого веде.
36 записів · 39 звʼязків. Наведіть на запис, щоб побачити його ланцюжок.
Спостереження · 8
Інсайти · 4
Болі · 5
Можливості · 5
Флоу · 1
Екрани · 7
Рішення · 6
01 /10
VOLTA — енергія під контролем бізнесу
Volta — концепт цифрової платформи для моніторингу, аналізу та оптимізації витрат на електроенергію малого бізнесу.
Проєкт почався з особистої задачі. Я сам стикався з тим, що рахунок за електроенергію приходить як факт: сума є, а пояснення, звідки вона і що з нею робити, немає. Я робив Volta насамперед для себе, але з самого початку проєктував його з розрахунку на розширення: та сама проблема ще гостріша в малого бізнесу, де обладнання працює цілодобово, точок кілька, а на цифри дивляться різні люди.
Більшість інструментів енергомоніторингу зосереджуються на технічних показниках: кіловат-годинах, графіках споживання, пікових навантаженнях. Проте власнику кавʼярні, пекарні чи магазину важливіше знати, скільки це коштує і чи можна зменшити витрати.
У Volta я вирішив дослідити інший підхід — побудувати інтерфейс навколо фінансових наслідків енергоспоживання, а не лише навколо показників лічильників.
Продукт орієнтований на три категорії користувачів: власників бізнесу, керівників окремих закладів і бухгалтерів. Кожна роль має власні завдання, рівень доступу та потребу в деталізації інформації.
Головна ідея Volta — перетворювати складні енергетичні дані на зрозумілі бізнес-рішення.
- Категорія
- B2B SaaS · Енергомоніторинг · Малий бізнес
- Продукт
- Мобільний огляд + десктопна панель
- Ролі
- Власник · Керівник точки · Бухгалтер
- Статус
- У роботі: дослідження й прототип головного сценарію
- Моя роль
- Product Designer, самостійний концепт
02 /10
Не кіловати, а гроші
Початкова проблема виглядає очевидною: бізнесу потрібен інструмент для контролю електроспоживання.
Найпростіше рішення — створити дашборд із графіками, показниками кВт·год та історією використання. Але я поставив під сумнів корисність такого підходу.
Сам по собі графік не пояснює користувачу, чи є витрати нормальними та що потрібно робити, якщо вони зростають.
Наприклад, власник пекарні бачить, що за останній тиждень споживання електроенергії збільшилося на 18%. Але цей показник не відповідає на головні запитання: скільки додаткових грошей це коштуватиме, що стало причиною та чи можна уникнути цих витрат.
Тому я сформулював дизайнерську задачу інакше: як допомогти власнику малого бізнесу за 30 секунд оцінити витрати на електроенергію, виявити проблему та зрозуміти наступну дію?
Це рішення визначило інформаційну архітектуру, пріоритети головного екрана та принципи візуалізації даних. Замість демонстрації максимальної кількості показників я зосередив концепцію на інформації, яка допомагає ухвалювати рішення.
- 01
Власник
хоче знати суму в гривнях і одну головну проблему, за 30 секунд з телефона.
- 02
Керівник точки
бачить витрати своєї точки, але не фінанси компанії.
- 03
Бухгалтер
потребує таблиці за період і вивантаження, а не графіків.
03 /10
Три питання, саме в такому порядку
Під час формування продуктової концепції я визначив три запитання, на які інтерфейс повинен відповідати послідовно. Мій основний продуктовий принцип: Data → Insight → Action. Користувач повинен проходити шлях від даних до розуміння проблеми та конкретного рішення з мінімальними зусиллями.
- 01
01. Скільки я витрачу?
Користувач має одразу побачити поточні витрати та прогнозовану суму до кінця місяця. Головна одиниця вимірювання — гривня. Показники кВт·год залишаються доступними для детального аналізу, але не повинні вимагати від користувача самостійних фінансових розрахунків.
- 02
02. Де виникла проблема?
Система має допомагати виявляти відхилення від звичного рівня споживання. Важливо не просто показати зростання витрат, а повʼязати його з конкретним закладом, обладнанням або часовим періодом — якщо наявні дані дозволяють це зробити.
- 03
03. Що я можу зробити?
Кожне важливе попередження повинно супроводжуватися зрозумілою рекомендацією. Наприклад, перевірити холодильне обладнання, проаналізувати нічне споживання або оцінити можливість перенесення енергоємних процесів на інший тарифний період.
04 /10
Обмеження, які формують дизайн
Проєктуючи Volta, я враховував не лише ідеальні сценарії використання, а й технічні обмеження, характерні для систем енергомоніторингу. Саме вони визначають, наскільки чесним і надійним буде інтерфейс.
Ці обмеження впливають на проєктування повідомлень, графіків, прогнозів, системних станів та рольової моделі. Принцип: інтерфейс не повинен приховувати технічні обмеження, якщо вони впливають на достовірність інформації.
- Оновлення даних. Лічильники передають показники з інтервалом приблизно 15 хвилин. Інформація може надходити із затримками.
- Неповні вимірювання. Не кожен електроприлад має власний лічильник. Частину споживання доводиться визначати розрахунковим методом.
- Складні тарифи. Вартість електроенергії залежить від тарифної моделі, часу доби та конкретного обʼєкта.
- Відсутність історії. Для нових користувачів система може не мати достатньої кількості даних для прогнозування.
- Нестабільне зʼєднання. Інтернет може працювати повільно або тимчасово бути недоступним.
- Обмежений час користувача. Власник бізнесу може переглядати інформацію зі смартфона протягом кількох секунд.
- Різні права доступу. Керівник окремої точки не повинен бачити всі фінансові показники компанії.
- Потреба в експорті. Для бухгалтера важлива можливість отримати структуровані дані за визначений період.
05 /10
Як досліджую проблему
Роботу над Volta я організував як послідовний продуктовий процес, у якому візуальному дизайну передує дослідження задачі та формування гіпотез. Мета процесу — обґрунтувати дизайнерські рішення до переходу до фінального UI.
- 01
01 — Problem Discovery
Почав із власного досвіду: записав, що саме мені незрозуміло в рахунках і графіках споживання. Потім відокремив технічну задачу моніторингу електроенергії від реальної потреби — контролю фінансових витрат — і перевірив, чи стосується вона малого бізнесу.
- 02
02 — Desk Research
Для дослідження обрав аналіз відкритих джерел: користувацьких відгуків, довідкових центрів енергетичних продуктів, технічної документації та інформації про тарифи. Цей підхід дозволяє досліджувати проблему без вигаданих інтервʼю або неіснуючого замовника.
- 03
03 — Competitive Analysis
Сформував перелік продуктів для аналізу: Sense, Emporia, Tibber, Shelly, EcoFlow та Home Assistant Energy. Основні критерії порівняння — інформаційна ієрархія, фінансові показники, підключення пристроїв, обробка помилок і зрозумілість аналітики.
- 04
04 — User Scenarios
Визначив три основні ролі: власник бізнесу, керівник закладу та бухгалтер. Для кожної ролі сформулював ключові задачі, інформаційні потреби та можливі обмеження доступу.
- 05
05 — Information Architecture
Побудував концептуальну структуру продукту навколо основних сценаріїв: огляд витрат, аналіз споживання, попередження, тарифи, звітність і налаштування.
- 06
06 — Design Exploration
Перейшов до дослідження візуальної мови продукту. Підготував шість напрямів оформлення інтерфейсу, щоб порівняти підходи до щільності інформації, типографіки та візуальної ієрархії.
06 /10
Пошук візуальної мови
Volta — продукт із великою кількістю числових даних, графіків, таблиць та системних повідомлень. Тому візуальний стиль має не лише створювати сучасний вигляд, а й допомагати користувачу швидко орієнтуватися в інформації. Замість вибору одного референсу я вирішив дослідити шість різних напрямів.
Instrument — інтерфейс, натхненний професійними вимірювальними приладами, з акцентом на точності, контрастності та чіткому відображенні показників.
Ledger — стриманий фінансовий інтерфейс з акцентом на числах, порівнянні витрат, таблицях і структурованій інформації.
Signal — візуальна система, побудована навколо важливих змін та повідомлень. Колір виділяє аномалії, попередження і стани.
Console — щільний професійний інтерфейс для роботи з великими масивами даних, орієнтований на аналітичні задачі та детальне керування.
Calm — мінімалістичний підхід із великою кількістю вільного простору, щоб зменшити когнітивне навантаження.
Editorial — інтерфейс із виразною типографічною ієрархією: великі показники, чіткі заголовки та послідовна структура спрямовують увагу користувача.
Для порівняння напрямів я визначив чотири критерії: швидкість сприйняття основної інформації, зручність роботи з числовими даними, масштабованість інтерфейсу та придатність для мобільних пристроїв. Так дизайн оцінюється не лише за естетикою, а й за відповідністю продуктовим задачам.
Для клікабельного прототипу головного сценарію я обрав напрям Signal.
07 /10
Стани, які проєктую окремо
У складних аналітичних продуктах інтерфейс повинен залишатися зрозумілим навіть тоді, коли система не має повної інформації. Тому для Volta я виділив окремий напрям проєктування — System States & Edge Cases.
Ключове рішення: достовірність інформації важливіша за візуальну ілюзію бездоганної роботи системи.
- 01. First Use / Empty State. Користувач щойно зареєструвався і ще не підключив жодного лічильника. Замість порожнього дашборда система пояснює, з чого почати.
- 02. Insufficient Data. Історії споживання недостатньо для прогнозу. Інтерфейс показує доступні дані й пояснює, коли прогноз може зʼявитися.
- 03. Missing Data. Частина показників за період відсутня. Графік показує розрив, а не штучно зʼєднує точки.
- 04. Device Offline. Лічильник тимчасово не передає дані. Система показує статус пристрою та час останнього оновлення.
- 05. Estimated Values. Частина показників розрахована приблизно. Користувач відрізняє розрахункові значення від виміряних.
- 06. Missing Tariff. Споживання відоме, але тариф не налаштований. Система показує кВт·год, не вигадуючи суму в гривнях.
- 07. Restricted Access. Користувач відкриває інформацію, недоступну для його ролі. Інтерфейс пояснює обмеження, не розкриваючи конфіденційних даних.
- 08. Loading / Slow Network. Дані завантажуються повільно. Є індикатори завантаження й поступове відображення доступних даних.
08 /10
Що планую відкинути й перевірити
Під час проєктування я визначив декілька популярних підходів, які не обовʼязково відповідають задачам Volta. Їх потрібно оцінити до фінального вибору інтерфейсних рішень. Мета — не просто знайти візуально привабливе рішення, а зрозуміти, які підходи дійсно допомагають користувачу.
- 01
01. Гейміфікація енергоспоживання
Рейтинги, бали та досягнення можуть підвищувати залученість, але не обовʼязково допомагають власнику бізнесу зменшувати витрати. Гіпотеза: фінансові рекомендації будуть кориснішими за абстрактний рейтинг енергоефективності.
- 02
02. Кіловати як головний показник
Технічні дані важливі для аналізу, але можуть вимагати додаткової інтерпретації. Гіпотеза: відображення витрат у гривнях скоротить час розуміння ситуації.
- 03
03. Імітація моніторингу в реальному часі
Якщо лічильники передають дані раз на 15 хвилин, постійно анімований графік може створювати неправильне враження. Рішення для перевірки: показувати час останнього оновлення та фактичну частоту надходження даних.
- 04
04. Єдиний індекс ефективності
Умовний показник на кшталт Energy Score може виглядати зручно, але приховувати складну логіку розрахунку. Гіпотеза: конкретні фінансові показники й пояснення будуть зрозумілішими.
- 05
05. AI Chat як основний інтерфейс
Розмовна взаємодія може бути корисною для складних запитань. Однак для швидкого перегляду витрат необхідність формулювати запит створює зайві дії. Рішення для перевірки: готові інсайти як основний сценарій, чат — потенційна додаткова функція.
09 /10
Що стане дизайн-системою
Для Volta я передбачив компонентну архітектуру, яка дозволить підтримувати єдину візуальну мову на всіх екранах продукту. Дизайн-система повинна охоплювати не лише стандартні UI-елементи, а й специфічні компоненти для роботи з енергетичними даними.
Для кожного компонента передбачаю стани Default, Hover, Focus, Active, Disabled, Loading, Empty та Error, а окремо — якість даних: Measured, Estimated, Missing та Outdated. Мобільний і десктопний інтерфейси використовуватимуть спільну компонентну систему, але різну інформаційну щільність: на мобільному пріоритет — швидкість сприйняття, на десктопі — детальний аналіз.
Мета — сформувати масштабовану дизайн-систему, у якій нові функції можна створювати без порушення послідовності інтерфейсу.
Design Foundations
- Color Tokens
- Typography Scale
- Spacing System
- Border Radius
- Shadows & Elevation
- Layout Grids
Core Components
- Buttons
- Inputs
- Selects
- Dropdowns
- Tabs
- Navigation
- Modals
- Notifications
Data Components
- Energy Consumption Charts
- Cost Forecast Cards
- Usage Comparison
- Tariff Timeline
- Anomaly Alerts
- Confidence Indicators
- Data Status Badges
- Financial Data Tables
Documentation
- Призначення компонентів
- Правила використання
- Варіанти та стани
- Адаптивна поведінка
- Принципи доступності
- Специфікації для розробників
10 /10
Що далі
Volta — самостійний продуктовий концепт, у якому я досліджую проєктування складних аналітичних інтерфейсів для малого бізнесу.
На поточному етапі сформовано продуктову ідею, визначено цільову аудиторію, ключові сценарії, технічні обмеження та напрямки візуального розвитку. Окремо підготовлено концепції візуальної мови, визначено архітектуру майбутньої дизайн-системи і зібрано клікабельний прототип головного сценарію.
Наступні кроки. 01 — Research Validation: завершити аналіз конкурентів і користувацьких відгуків, перевірити основні гіпотези й задокументувати висновки. 02 — UX Architecture: деталізувати користувацькі сценарії, навігацію та інформаційну архітектуру. 03 — Interface Design: розробити мобільні та десктопні екрани з урахуванням основних сценаріїв і нестандартних станів системи. 04 — Design System: створити бібліотеку компонентів, дизайн-токени та документацію. 05 — Interactive Prototype: розширити наявний прототип на всі ключові сценарії. 06 — Usability Testing: перевірити, наскільки швидко користувачі розуміють фінансові показники, знаходять проблеми та визначають наступні дії.
Головний висновок: хороший інтерфейс не просто показує інформацію. Він допомагає користувачу зрозуміти її значення та ухвалити рішення.
Для мене Volta — можливість продемонструвати системний підхід до UX/UI: від визначення продуктової проблеми та роботи з обмеженнями до формування візуальної мови й масштабованої архітектури інтерфейсу. Навіть якщо зараз це рішення лише для мене, я проєктую його як продукт, що може вирости: з ролями, кількома точками, дизайн-системою і чесною роботою з даними.
Наступний кейс · 04 / 06
Застосунок бронювання ресторанів
Розкажіть коротко про продукт і терміни — відповім протягом доби.