Павел Меньков
← Все кейсы

Продуктовый дизайн

Дашборд прогноза спроса товаров собственного производства

Инструмент для «Ленты». Менеджеры магазинов планируют выпечку и заказ сырья по прогнозу на день. Аналитики сравнивают факт с прогнозом

  • Роль: продуктовый дизайнер, соло
  • Инструмент: Figma
  • Разрешения: 1920 · 1440 · 834
Экран «Прогноз» на десктопе: таблица прогноза продаж хлеба по дням, фильтры по магазину, группе товаров и датам, итоговая строка по 15 товарам

Экраны

2 разрешения десктопа и 1 планшета

У прогноза, статистики продаж и инфографики одна дизайн-система.
Она работает от десктопа 1920 до планшета 834

Задача

Помочь планировать производство

Менеджер магазина каждый день решает, сколько испечь и сколько сырья заказать. Аналитик сравнивает факт с прогнозом и ищет ошибки модели. Один интерфейс для всех

  • Менеджер магазина

    Каждый день решает, сколько испечь и сколько сырья заказать. Сейчас ориентируется на опыт и вчерашние остатки

    Боль: угадывает на глаз, тратит время

  • Аналитик

    Сравнивает факт с прогнозом и ищет ошибки модели

    Боль: сверяет вручную в таблицах

Ограничения

Ограничения дизайна

  • id без названия

    Точка продаж показана как id, например 12345. Названия магазина в интерфейсе нет

  • Только направление

    Отклонение факта от прогноза показано числом и цветом. Направление задаёт дизайн

  • Разная детализация

    Прогноз показан по дням. Факт показан по неделям. Дизайн сводит их в одной таблице

  • Без формулы

    Оценка качества 1–⁠10 показана как есть, без формулы расчёта

Процесс

Путь от бенчмарков до передачи

Сначала исследование и бенчмарки, потом визуальный язык, дизайн-система, экраны и тексты. В конце два цикла ревью. Каждый шаг опирался на предыдущий: ревью возвращало работу на шаг назад. Получилось 125 переменных и 67 компонентов дизайн-системы, 243 кадра в трёх разрешениях

  1. Бенчмарки
  2. Визуальный язык
  3. Дизайн-система
  4. Экраны и тексты
  5. Передача

Решение

Одна таблица вместо 390 строк

15 товаров и 26 точек продаж дают 390 строк, если показать каждую пару отдельно.
Я посчитал иначе. Строка показывает товар: сумма сразу по всем точкам продаж. Точки открываются по клику. Ни одна цифра не пропадает

  • 390 строк, если показать каждую пару
  • 26 точек продаж открываются по клику
Таблица прогноза, где строка товара показывает сумму по 26 точкам продаж, а под ней раскрыты строки магазинов с их id

Решение

Цвет не должен путать

Отклонение прогноза плохо в обе стороны: недостача и списание. Красный и зелёный читаются как «плохо» и «хорошо»

Было

  • выше прогноза
  • ниже прогноза

Стало

  • выше прогноза
  • ниже прогноза

Решение

Топ-5 отклонений вместо всех 26

Инфографика могла показать все 26 точек продаж списком.
Я показываю только пять с самым большим отклонением от прогноза. Дизайн сам подсказывает, где искать проблему

  • 26 точек продаж всего
  • 5 показаны как самые заметные
Инфографика: справа список «Топ-5 отклонений», у каждого товара разница факта и прогноза со стрелкой

Решение

Имя фильтра придумывает дизайн

Сохранить фильтр обычно значит придумать ему имя. Здесь имя собирается само: город, ТК и товар. Остаётся только нажать «Сохранить»

  • 3 части имени: город, ТК, товар
Раскрытый список «Сохранённые фильтры» с именами вида «Москва, id 12345, ржано-пшеничный», ниже пустой экран «Прогноз появится здесь»

Проверка

Два цикла ревью

  • Цикл 1

    Панель фильтров сворачивается после «Применить»

    График на 1440 опущен ниже. Таблице стало больше места

    Экран «Прогноз» на 1440 с открытым графиком продаж по дням: под ним видны только две строки таблицы

    График «Прогноз» на 1440

    Открыто. На 1440 при открытом графике таблице остаётся только 1–⁠2 строки. Исправление готовится

  • Цикл 2

    «Точных прогнозов» переименовано в «Качество 8–⁠10»

    «Топ-5» на планшете сворачивается. Графику достаётся больше места

    Инфографика на планшете 834: показатели в две строки, график уровней качества и свёрнутый «Топ-5 отклонений» из трёх строк со ссылкой «Показать все»

    Инфографика на планшете 834

    Исправлено. На планшете «Топ-5» сворачивается до трёх строк со ссылкой «Показать все». Графику досталось больше места

Состояния

Состояния и крайние случаи

44 кадра состояний, 6 из них критичные (К1–⁠К6): что видит пользователь,
если что-⁠то пошло не так

  • Выбор своего периода: в календаре сообщение, что данных за выбранные даты нет, кнопка «Готово» недоступна

    Свой период

    Даты без данных

    Календарь показывает «Данных за эти даты нет, доступны периоды с 01.01.2023». Кнопка «Готово» недоступна

  • Статистика продаж: в колонке качества у товара с нулевым значением вместо оценки надпись «нет оценки»

    Нулевые значения

    Факт или прогноз равны нулю

    Если прогноз или факт равны нулю, качество не считается. Вместо числа показывается
    «— нет оценки»

  • Ошибка загрузки: сообщение «Не удалось загрузить данные», недоступная кнопка «Загружаем…» и серая заглушка таблицы

    Ошибка сервера

    Повтор после сбоя

    Кнопка «Загружаем…» недоступна, пока идёт повторный запрос. Это не даёт нажать дважды

Передача

Что уходит в разработку

  • 24 иконки-ассета, контуром
  • 10 открытых вопросов
  • Компоненты, переменные и стили названы, как в Figma
  • График не компонент. Это спецификация: оси, цвета, число серий
  • Формула качества прогноза не известна. Открытый вопрос

Топ-3 вопроса:

  • Полный список ТК и городов
  • Приходит ли единица «кг» для весовых товаров
  • Формула и порог для «Отклонения от среднего»
Экран «Прогноз» с графиком продаж по дням над таблицей товаров

Дальше

Юзабилити-тест с реальными менеджерами и аналитиками

Дальше нужна проверка на живых людях. Ещё есть открытые вопросы: формула качества прогноза, привязка id к названию магазина, шаг графика на 1440

  • Юзабилити-тест с реальными менеджерами и аналитиками
  • Уточнить формулу качества и id → название точки продаж
  • Довести график на 1440

Цель: меньше списаний и меньше упущенных продаж

Другие кейсы