Кейсы
Шоты
Обо мне
релиз mvp —
июнь 2025
b2b-продукт
проектирование —
2024-2025
TMS — это система управления транспортом. Она разрабатывается для крупнейшей 3PL (Third Party Logistics — доставка, хранение, комплектация заказов, управление запасами, доставка потребителям) компании в России
Проблемы и бизнес-задача
Компания управляет транспортом, используя зарубежный софт. Система имеет высокий порог входа из-за сложного и устаревшего интерфейса, не покрывает все необходимые бизнес-задачи, ее нельзя кастомизировать. Также есть риски ухода продукта с рынка. Поэтому необходимо создать свой продукт, который в будущем будут продавать и на внешнем рынке
>150
экранов
пользователей
>400
заказов обрабатывает в день
>100.000
Transport Management System
TMS —
— Команда и моя роль
Моя роль:
  1. Создание информационной архитектуры проекта на основании документации, данных от аналитика, пользовательских интервью
  2. Создание визуальной концепции
  3. Сборка UI-кита и передача его в разработку
  4. Создание прототипов
  5. Тестирование продукта и улучшение пользовательского опыта
Менеджеры
4
Frontend
5
UX/UI дизайнер
1
Backend
4
Системный и бизнес-аналитик
2
— Процесс работы
Идеи
  • Выдвижение гипотез
  • Сборка прототипов
Тестирование
Юзабилити тестирование по ключевым сценариям
Разработка
  • Подготовка документации
  • Передача в разработку
  • Дизайн-ревью
... новые циклы тестирования после релиза
Доработка макетов
Погружение
Изучение документации, бриф от аналитика, экспертные интервью
— Функционал: график волн
— Ограничения для пользовательских исследований
Сценарий формирования волн был настолько сложным, что процесс работы понимает только одни человек в компании
— Отсутствие бенчмарка по рынку
Раздела не было в системе, с которой работали на тот момент. Так же подобного модуля не было и у аналогичных продуктов
Проблемы раздела
— Взаимозаменемость сотрудников
Необходимо упростить сценарий управления волнами — работать с ними должны и сотрудники из смежных отделов
— Сокращение времени на выполнение задачи в 4 раза
Работа с модулем должна занимать около 1−2 часов, вместо полного рабочего дня
Задачи раздела
Для экономической выгоды транспорт не ходит по маршруту из точки A в точку B напрямую

Он проходит через множество транзитных точек, доставляя в них груз или забирая его

Такая логистическая цепочка называется волной
#1 решение
Управление транзитными точками
Результат
На повторном тестировании при добавлении транзитной точки пользователь не отвлекался на другую информацию, быстрее выполнил задачу
Решение
Обособить зону работы от всей основной информации, используя размытие фона.

Дополнительно выделить зону работы и транзитную точку над которой работают в данный момент
Задача
Добавить функционал управления транзитными точками: добавление, удаление, редактирование
Проблема
На первых итерациях тестирования пользователь терялся при добавлении новой транзитной точки.

Экран имеет высокую информационную нагрузку. При этом урезать, скрыть или разбить данные на подразделы нельзя
#2 решение
Просмотр общих данных о графике
Первый вариант раздела до тестирований
Задача
Добавить на экран общую информацию о графике, чтобы пользователь оставался в контексте — волны для какого графика он создает и какая у этого графика специфика
Проблема
Изначально информация была расположена в окне справа. Пользователю было неудобно, т.к. такой вариант сужает рабочую область. Сворачивание информации тоже не подошло
Решение
Информация по графикам размещена сверху, не свернута. При этом используется горизонтальный скролл, чтобы этот блок занимал как можно меньше места. Да, горизонтальный скролл — компромисное решение. Но информация по графикам второстепенна, поэтому допускается такое решение
Результат
Пользователям стало удобнее работать с волнами — компонент информации по графикам не урезает рабочую область. При этом, вся нужная информация перед глазами.

Компонент был переиспользован и в других разделах системы
Финальный вариант
— UI-kit
Библиотека включает 140+ компонентов
— Пример других разделов системы
Всего 150+ экранов