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
Продуктовый сайт, который доказывает демонстрацией. Интерфейс и есть доказательство того, что утверждает текст.




Каждый продукт проектируется под телефон как отдельный опыт, а не как суженный десктоп.
Есть продукт, который давно пора сделать?Расскажите о нём.
Опишите, что должно измениться в вашем бизнесе. Мы разберёмся, что для этого действительно нужно — даже если нужно меньше, чем кажется.