Нигина НематоваОткрыта к работе

Кейс 02Веб-дашборд

Дашборд для «Ленты»прогноз и статистика продаж

Внутренний аналитический дашборд для сотрудников торговой сети — прогноз продаж по дням и сравнение прогноза с фактом, 36 экранов в трёх брейкпоинтах.

  • B2B
  • Web
  • Дашборд
  • Таблицы и фильтры
  • Визуализация данных
  • Адаптив
  • Дизайн-система
  • Figma
Роль
UX/UI-дизайнер
Платформа
Web · 1920 / 1440 / 834
Инструменты
Figma
Год
2026
Дашборд: прогноз и факт продаж

Задача

Спроектировать внутренний веб-дашборд с двумя разделами. «Прогноз» — таблица прогноза продаж каждого товара на каждый день периода, в разрезе торгового комплекса и категории. «Статистика» — сравнение прогноза с фактом: продажи, прогноз, разница, качество прогноза, ключевые показатели.

Все данные строятся через три обязательных фильтра — Город/ТК, Период, Продукция — с сохранением наборов, графиками по выбранным строкам, сравнением и экспортом.

Аудитория

Сотрудники сети, которые планируют закупку и производство: категорийные менеджеры, менеджеры торговых комплексов, аналитики. В макетах — хлеб собственного производства.

01этап

Принципы из референсов

Четыре ряда референсов, и к каждому — что беру в проект. Все четыре принципа дошли до финала.

01Сдержанная палитра

Синяя доминанта и модульная сетка CRM-дашбордов: цифры читаются, цвет не спорит с данными.

02Компактные таблицы

Плотная подача табличных данных с планшетных мокапов — больше строк в кадре без потери читаемости.

03Графики рядом с KPI

Графики блоками в сочетании с карточками показателей: сначала итог, потом динамика.

04Контекст не теряется

Модальные окна с затемнением и подсветка активной строки — пользователь видит, откуда пришёл.

02этап

Структура экрана

Пять вайрфреймов раздела «Прогноз»: пустое состояние с подсказкой, три состояния с раскрытыми фильтрами и таблица с чипами. Структура зафиксирована здесь и больше не менялась.

СайдбарШапкаФильтрыЧипыKPIТаблица

Сайдбар + шапка + панель фильтров + чипы применённых фильтров + KPI + таблица. При входе таблица пустая: данные появляются после трёх фильтров.

03этап

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

Палитра Neutrals / Primary / Secondary / Error, логотип в трёх вариантах, 19 иконок, 16 компонентов с 45 вариантами: кнопки сайдбара, фильтр-кнопки, чекбоксы, строки-дропдауны таблицы, дропдауны периода и сохранённых фильтров, date-picker.

#003C96Primary
#001E64Primary dark
#0F1218Dark bg
#8FB3FFPrimary light
#3DD68CФакт
#FFB900Серия графика
#6E237DСерия графика
#FF6B6BError
Навигация
Кнопка сайдбараВкладки разделов
Фильтры
Город / ТКПериодПродукцияСохранённыеЧип фильтраDate-picker
Таблица
Строка ТКСтрока категорииСтрока товараЧекбоксСортировка
Действия
Построить графикСравнитьЭкспортировать

04этап

Адаптив

36 экранов: по 12 на десктоп, ноутбук и планшет — полный флоу «Прогноз», флоу «Статистика» и системные состояния.

1920Полная панель фильтров, таблица на всю ширину
1440«Применить» сворачивается в иконку-лупу
834Сайдбар до иконок, фильтры в два ряда, таблица со скроллом

Решение

Дашборд построен на принципе «сначала фильтры, потом данные». При входе таблица не грузится: пользователь настраивает три фильтра — Город/ТК с поиском, Период с пресетами и календарём, Продукцию в три уровня. Применённые фильтры становятся чипами над таблицей, набор можно сохранить и переиспользовать.

Таблица иерархическая: ТК → категория → товар, каждую ветку можно свернуть. Чекбоксы выбирают товары для трёх действий — построить график, сравнить, экспортировать. Над таблицей — KPI-карточки со спарклайнами. Графики открываются поверх таблицы, контекст не теряется.

Визуально — корпоративный синий в шапке и сайдбаре, монохромные таблицы, чтобы читались цифры, и secondary-цвета только для серий графиков. Дашборд собран в светлой и тёмной теме.

Ключевые решения

  1. Пустое состояние вместо автозагрузки — данные появляются только после трёх фильтров.
  2. Чипы применённых фильтров и сохранённые наборы — срез всегда виден.
  3. KPI-карточки над таблицей и графики поверх неё — пользователь не покидает контекст.
  4. Два типа графиков под две задачи: линейный для динамики, столбчатый для «факт vs прогноз».
  5. Цвет только для смысла: таблицы монохромные, акценты — под серии графиков.

Что дальше

Следующий шаг — проверить дашборд с категорийными менеджерами: сколько времени уходит на настройку среза и читается ли иерархия при сотнях SKU. По результатам — доработать сохранённые фильтры и пороги подсветки отклонений.

Следующий кейсOrganic & Natural →
Написать в Telegram