Дизайн-система
для логистической платформы
для логистической платформы
b2e · web · app
30+ компонентов
5 продуктов
Как я помогла превратить дизайн-систему в масштабируемый рабочий инструмент для продуктов и команд
Контекст и проблема
01
Проблема
Во время обслуживания оператор использует
30+ вкладок и систем, включая Скрипт. Что способствует:
- высокой когнитивной нагрузке
- потере времени на переключения
- риску ошибок при работе
Продукт
Скрипт — система диагностик, где оператор во время звонка помогает клиенту решить проблему.
Диагностика состоит из цепочки вопросов, виджетов
и действий со стороны оператора. В системе более 40 диагностик и 146 виджетов.
Блок-схема вопросов одной из диагностик Miro
Задача
02
Основные метрики влияния:
- время обслуживания клиента
- скорость адаптации новеньких
- удовлетворённость использования системы
Пересобрать CRM: провести редизайн и перевести интерфейс на корпоративную дизайн-систему, учитывая, что часть других сервисов уже была на неё переведена.
Подготовить систему к интеграциям и дальнейшему масштабированию.
Мой вклад
03
Ключевые действия
- Пересобрала основной сценарий работы операторов
- Синхронизировала решения с командой и техническими ограничениями
- Провела исследования, обогатив бэклог, и валидировала решение
- Презентовала прогресс стейкхолдерам и согласовывала изменения совместно с PO
- Декомпозировала задачи и подключила junior-дизайнера, распределив часть работы
Основной вызов
Одновременно перерабатывать легаси-продукт с накопленной логикой, погружаться в новую дизайн-систему, а также выстраивать процессы дизайна в продуктовой команде.
Исследо-
вания
вания
Исследования
04
Кабинетное
Перед проектированием изучила текущий продукт и собрала доступные данные:
- скринкасты работы операторов
- пользовательскую обратную связь
- предыдущие исследования команды
Использовала данные о частоте использования информации о клиенте в звонках (часто / иногда / редко), чтобы приоритизировать контент в интерфейсе.
Интервью
Провела интервью с новыми и опытными операторами, чтобы понять, где они теряют время и что помогает им в работе с текущей системой.
Гипотезы собрала на встречах со стейкхолдерами и командой. Дополнила их своими.
Некоторые из инсайтов
Рекомендуемые фразы звучат механически → ухудшается качество общения с клиентом
Сложно определить причину звонка в справочнике → ошибки в выборе категории и искажение статистики
Storyboard новенького
Решение
05
Подход
Сначала проработала low-fi прототипы, чтобы сфокусировать обсуждение на логике
и не уходить в визуальный дизайн.
После согласования с командой и стейкхолдерами перешла к детальной проработке.
Информационная архитектура
На основе исследований собрала архитектуру системы. Выделила ключевые блоки:
- карточка клиента
- список диагностик и страница диагностики
- блок для интеграции с внешними системами
- блок под расширение ролевой модели
Один из набросков low-fi
Валидация
Провела UX-тесты с новыми и опытными операторами, проверила 11 гипотез (термины, навигация, ключевые действия).
В результате:
- подтвердила ключевые сценарии
- выявила проблемные места в тексте и объёме данных
Часть решений доработала перед релизом, часть — вынесла в бэклог после обсуждения с командой и стейкхолдерами.
Сценарии
Фокусировалась на ключевых сценариях:
- консультация по карточке клиента
- выполнение диагностики
Дополнительно проработала сценарий избранных диагностик — на него повлиял инсайт о «ночных операторах» с запросом на специфический набор.
На основе сценариев собрала интерфейс уже на дизайн-системе для тестирования, чтобы быстрее получить обратную связь от пользователей.
Визуализация результатов UX-тестов
Запуск и результаты
Запуск и резуль-
таты
таты
06
Сопровождала разработку: отвечала на вопросы, проверяла интерфейс и заводила баги через тестировщика.
Разработка
После тестирования доработала сценарии и передала макеты в разработку. Команду подключила ещё на этапе low-fi, поэтому внедрение прошло без трений.
После запуска я провела этнографическое исследование и выявила проблему с отображением цвета на рабочих мониторах. Передала её в команду дизайн-системы для доработки токенов.
Параллельно запуску подключила junior-дизайнера и делегировала часть задач по дальнейшей проработке виджетов внутри диагностик.
Количественные результаты планировалось получить после масштабирования решения.
Пилот
Редизайн был запущен на пилотную группу операторов. В результате:
- интерфейс принят операторами без сопротивления
- сценарий избранных диагностик получил сильный отклик и упростил работу в повторяющихся кейсах
- время обслуживания осталось стабильным → изменения не замедлили процесс
- часть сторонних систем перестала использоваться → снизилось количество переключений
- заложена база для масштабирования и интеграций
Пересобрала ключевой сценарий и сократила переключения операторов
Сформировала решения на основе исследований и повлияла на бэклог
Декомпозировала задачи и подключила junior-дизайнера
Перевела продукт на дизайн-систему и подготовила к масштабированию
Другие кейсы
