B2B SaaS2026EN
AERA Systems
Шар аналітики, який стоїть між інструментами, що компанія вже використовує, — і сайт, який має пояснити це за один екран.
- SaaS
- Продуктовий UI
- Вебзастосунок
- Дизайн-система

- Галузь
- B2B SaaS
- Тривалість
- 10 тижнів
- Команда
- 1 дизайнер · 2 інженери
- Платформи
- Маркетинговий сайт · Інтерактивне демо продукту · Командна палітра
01
Задача
AERA — не дашборд і не заміна чогось. Це шар між наявними системами. Пояснити це справді складно, а категорія переповнена продуктами, які однаково обіцяють перетворити дані на рішення.
Звичайна SaaS-сторінка звела б це до тих самих обіцянок, що й у всіх. Сайт мав показати поведінку продукту, а не описати її.
- Категорія
- Операційна аналітика
- Головна складність
- Продукт — це шар, а не екран
- Вимога
- Показати механіку, а не заяву
02
Рішення
Ми побудували сторінку як послідовність, що повторює власний конвеєр продукту: поле сигналів, куди надходять дані, рушій рішень, який їх опрацьовує, живий воркспейс, де людина діє, і таймлайн, який фіксує те, що сталося.
Кожен етап — інтерактивний компонент, а не ілюстрація. Відвідувач читає аргумент, користуючись зменшеною версією продукту.
Командна палітра K працює на всьому сайті — той самий патерн взаємодії, що і в продукті, тож інтерфейс сам стає частиною пітчу.
- Наратив
- Шість етапів, що дзеркалять конвеєр продукту
- Взаємодія
- Палітра K, спільна з продуктом
- Рендеринг
- Серверні компоненти з клієнтськими островами
03
Архітектура
- L0Next.js App RouterRSC-оболонка
- L1Клієнтські островиПо секціяхКомандна палітраK, на всьому сайті
- L2Шар анімаціїПрив’язаний до скролуМодель контентуТипізовані об’єкти
- L3Запит доступуServer actionАналітикаЗовнішнє
Зв’язки (6)
- Next.js App Router → Клієнтські острови · гідрація у видимій зоні
- Next.js App Router → Командна палітра
- Клієнтські острови → Шар анімації
- Next.js App Router → Модель контенту
- Командна палітра → Запит доступу
- Клієнтські острови → Аналітика
04
UX
Сторінка відповідає на три питання технічного покупця в тому порядку, у якому він їх ставить: над чим це стоїть, що саме воно робить із сигналом і що змінюється в моєму дні.
Кожна інтерактивна секція працює з клавіатури й деградує до статичного читабельного стану — аргумент виживає без JavaScript, а отже виживає і для пошукового робота.
- Порядок читання
- Де стоїть → що робить → що змінює
- Запасний варіант
- У кожного блоку є статичний стан
05
UI
Стриманість приладової панелі: майже монохромні поверхні, один сигнальний колір, моноширинний шрифт для всього, що є вимірюванням.
Числа набрані як дані, а не як прикраса — усі цифри вирівняні за спільною табличною сіткою, тож читаються як система.
06
Розробка
Next.js App Router із серверними компонентами усталено; інтерактивні секції — ізольовані клієнтські острови, що завантажуються при вході у видиму зону. Це тримає початковий пейлоад малим попри щільність сторінки.
Анімація, прив’язана до скролу, працює через один спільний observer замість слухачів у кожному компоненті, а вся хореографія згортається до миттєвих змін стану під prefers-reduced-motion.
07
Що він вміє
Поле сигналів
Інтерактивна візуалізація даних, що надходять з усього стеку компанії.
Рушій рішень
Покроковий розбір того, як сирий сигнал стає рекомендованою дією.
Живий воркспейс
Робоча мініатюра адаптивного дашборда продукту.
Операційний таймлайн
Історія рішень як послідовність, яку можна прокрутити.
Командна палітра
Навігація K на всьому сайті за патерном самого продукту.
Запит доступу
Коротка кваліфікуюча форма на server action.
08
Інтеграції та стек
Інтеграції
- Аналітика
- Конвеєр запитів доступу
- Email-сповіщення
Фронтенд
- Next.js
- React
- TypeScript
- Tailwind CSS
- Motion
Платформа
- Server actions
- Edge rendering
- Vercel
09
Що з цього вийшло
- 6 інтерактивних етапів
- Історія продукту
- K
- Єдність взаємодії
- Тільки острови
- Пейлоад
- Повністю статичний
- Без JS
Механіка показана, а не заявлена
Сайт використовує патерн продукту
Інтерактивний код вантажиться у видимій зоні
Читається без JavaScript
Продуктовий сайт, який доводить демонстрацією. Інтерфейс і є доказом того, що стверджує текст.




Кожен продукт ми проєктуємо під телефон окремо, а не звужуємо десктопну версію.
Є продукт, який давно час зробити?Розкажіть про нього.
Опишіть, що має змінитися у вашому бізнесі. Ми розберемось, що для цього справді потрібно — навіть якщо потрібно менше, ніж здається.