Изготовление дизайна для сервиса аналитики маркетплейсов

Добрый день!
Необходимо оформить дизайн для проекта сервиса аналитики маркетплейсов.
Есть тестовое задание – оформить главную страницу с дашбордом проекта сервиса.

Техническое задание
UX/UI-дизайн главной страницы личного кабинета
Проект: Сервис аналитики для маркетплейсов (WB, Ozon и др.)
Тип интерфейса: B2B-кабинет для продавцов
Экран: Главная страница с обобщённой аналитикой по магазину
Роли: Владелец / Менеджер

1. Цель дизайна
Разработать информативную и удобную главную страницу личного кабинета, которая даёт пользователю внятную картину по ключевым метрикам магазина за выбранный период.
Страница должна быть ориентирована на быстрое принятие решений: наглядные цифры, графики, фильтрация по датам, понятная визуальная иерархия.

2. Целевая аудитория
Владелец магазина / бизнеса на маркетплейсах
Менеджер, отвечающий за операционные показатели
Возраст: 25–45
Уровень владения интерфейсами: уверенный пользователь B2B-продуктов

3. Содержание страницы
🔎 Фильтрация
по ЮЛ (т.к. пользователь может подключить несколько кабинетов)
выборка дат
категория/предмет
бренд
артикул
группа товаров (настраивается пользователем)

🔢 Блоки с метриками (основные цифры)
Каждая метрика — в 2 единицах: ₽ и шт. Оформить в виде карточек или плиток, визуально сгруппировать по смыслу:
Заказано:
в ₽
в шт

Выкуплено:
в ₽
в шт

В пути к клиенту:
в ₽
в шт

В пути от клиента:
в ₽
в шт

Возвращено:
в ₽
в шт

Отменено:
в ₽
в шт

Важно: визуально отделить положительные (продажи/выкупы) от негативных (отмены/возвраты), можно цветом или блоками.

📈 Графики (динамика показателей по датам)
Оформить в едином стиле, возможность переключения временных отрезков:
Заказано: ₽ / шт
Выкуплено: ₽ / шт
Возвращено: ₽ / шт
Отменено: ₽ / шт

Предпочтительный формат: линейные графики или бар-чарты. Под каждым графиком можно выводить текущие значения за выбранный период.

📊 Соотношение план/факт (график + цифры)
Виджет в формате спидометра / круговой диаграммы

Показывать план и факт по:
Выручке
Маржинальной прибыли

Можно с цветовой маркировкой (зелёная зона — выполнен, жёлтая — почти, красная — не выполнен).

4. Дизайн-ориентиры
Стиль:
Современный B2B: светлая тема (или адаптивная под обе), с акцентом на читаемость

Цветовая дифференциация блоков (например, продажи — синие, возвраты — серые/красные)

Чистая типографика

Интерактивность — при наведении показывать тултипы / подробности

Референсы:
[Looker Studio (ex-Data Studio)] — по визуализации данных
[Finom, Kontur, Miro] — по чистоте и иерархии
[Notion-style cards] — карточки с тенями и минимализмом

5. Технические требования
Дизайн в Figma

Компоненты в виде автолэйаутов

Адаптация под 1440px (десктоп first)

Прототип с кликабельными областями (если необходимо)

Передача в формате: ссылка на макет, экспорт ассетов по необходимости

Макет как видим примерно во вложении