![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g d="M 0 0 L 40 0 L 40 40 L 0 40 Z M 20 40 C 31.046 40 40 31.046 40 20 C 40 8.954 31.046 0 20 0 C 8.954 0 0 8.954 0 20 C 0 31.046 8.954 40 20 40 Z M 8.324 19.826 C 8.324 19.826 18.324 15.723 21.791 14.278 C 23.121 13.7 27.629 11.85 27.629 11.85 C 27.629 11.85 29.711 11.04 29.537 13.006 C 29.48 13.815 29.017 16.648 28.555 19.711 C 27.861 24.046 27.11 28.786 27.11 28.786 C 27.11 28.786 26.994 30.116 26.011 30.346 C 25.029 30.578 23.411 29.538 23.121 29.306 C 22.89 29.133 18.786 26.531 17.284 25.26 C 16.879 24.914 16.416 24.22 17.341 23.41 C 19.401 21.522 21.424 19.595 23.41 17.63 C 24.104 16.936 24.797 15.318 21.907 17.284 C 19.209 19.141 16.492 20.972 13.757 22.775 C 13.757 22.775 12.832 23.353 11.097 22.833 C 9.364 22.313 7.341 21.619 7.341 21.619 C 7.341 21.619 5.954 20.751 8.324 19.826 Z" fill="transparent" height="40px" id="GxMSuylVu" width="40px"><path d="M 0 0 L 40 0 L 40 40 L 0 40 Z" fill="transparent" height="40px" id="pvSyxKlhX" width="40px"/><path d="M 20 40 C 31.046 40 40 31.046 40 20 C 40 8.954 31.046 0 20 0 C 8.954 0 0 8.954 0 20 C 0 31.046 8.954 40 20 40 Z" fill="rgb(52, 170, 223)" height="40px" id="fqjXdMdYW" width="40px"/><path d="M 1.386 8.142 C 1.386 8.142 11.386 4.038 14.854 2.593 C 16.184 2.015 20.691 0.165 20.691 0.165 C 20.691 0.165 22.774 -0.645 22.6 1.322 C 22.542 2.13 22.08 4.963 21.617 8.027 C 20.924 12.362 20.172 17.102 20.172 17.102 C 20.172 17.102 20.056 18.432 19.074 18.662 C 18.091 18.893 16.474 17.853 16.184 17.622 C 15.952 17.448 11.849 14.847 10.346 13.575 C 9.941 13.229 9.479 12.535 10.404 11.725 C 12.463 9.837 14.486 7.91 16.472 5.945 C 17.166 5.252 17.86 3.633 14.97 5.599 C 12.272 7.456 9.555 9.287 6.82 11.09 C 6.82 11.09 5.895 11.668 4.16 11.148 C 2.426 10.628 0.404 9.934 0.404 9.934 C 0.404 9.934 -0.984 9.067 1.386 8.142 Z" fill="rgb(255, 255, 255)" height="18.69485609571008px" id="t2uAwPQcu" transform="translate(6.938 11.685)" width="22.610182127057346px"/></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g d="M 0 0 L 40 0 L 40 40 L 0 40 Z M 20 40 C 31.046 40 40 31.045 40 20 C 40 8.954 31.046 0 20 0 C 8.954 0 0 8.954 0 20 C 0 31.045 8.954 40 20 40 Z M 31.674 21.814 L 31.674 30.06 L 26.894 30.06 L 26.894 22.366 C 26.894 20.435 26.204 19.116 24.472 19.116 C 23.151 19.116 22.367 20.004 22.02 20.864 C 21.895 21.171 21.862 21.598 21.862 22.029 L 21.862 30.059 L 17.081 30.059 C 17.081 30.059 17.145 17.03 17.081 15.681 L 21.862 15.681 L 21.862 17.719 C 21.852 17.735 21.839 17.75 21.831 17.766 L 21.862 17.766 L 21.862 17.719 C 22.497 16.741 23.631 15.344 26.171 15.344 C 29.316 15.344 31.674 17.399 31.674 21.814 Z M 12.08 8.751 C 10.445 8.751 9.375 9.824 9.375 11.234 C 9.375 12.615 10.413 13.719 12.018 13.719 L 12.049 13.719 C 13.716 13.719 14.753 12.615 14.753 11.234 C 14.721 9.824 13.715 8.75 12.08 8.75 Z M 9.659 30.059 L 14.437 30.059 L 14.437 15.68 L 9.659 15.68 Z" fill="transparent" height="40px" id="ISi_LpFSY" width="40px"><path d="M 0 0 L 40 0 L 40 40 L 0 40 Z" fill="transparent" height="40px" id="aitXSklKK" width="40px"/><path d="M 20 40 C 31.046 40 40 31.045 40 20 C 40 8.954 31.046 0 20 0 C 8.954 0 0 8.954 0 20 C 0 31.045 8.954 40 20 40 Z" fill="rgb(0, 122, 185)" height="40px" id="F1i0ZJ804" width="40px"/><path d="M 22.299 13.064 L 22.299 21.31 L 17.519 21.31 L 17.519 13.616 C 17.519 11.685 16.829 10.366 15.097 10.366 C 13.776 10.366 12.992 11.254 12.645 12.114 C 12.52 12.421 12.487 12.848 12.487 13.279 L 12.487 21.309 L 7.706 21.309 C 7.706 21.309 7.77 8.28 7.706 6.931 L 12.487 6.931 L 12.487 8.969 C 12.477 8.985 12.464 9 12.456 9.016 L 12.487 9.016 L 12.487 8.969 C 13.122 7.991 14.256 6.594 16.796 6.594 C 19.941 6.594 22.299 8.649 22.299 13.064 Z M 2.705 0.001 C 1.07 0.001 0 1.074 0 2.484 C 0 3.865 1.038 4.969 2.643 4.969 L 2.674 4.969 C 4.341 4.969 5.378 3.865 5.378 2.484 C 5.346 1.074 4.34 0 2.705 0 Z M 0.284 21.309 L 5.062 21.309 L 5.062 6.93 L 0.284 6.93 Z" fill="rgb(241, 242, 242)" height="21.310000000000002px" id="o6M2aKQ5B" transform="translate(9.375 8.75)" width="22.298750190734836px"/></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g d="M 0 0 L 40 0 L 40 40 L 0 40 Z M 0 20 C 0 8.954 8.954 0 20 0 C 31.046 0 40 8.954 40 20 C 40 31.046 31.046 40 20 40 C 8.954 40 0 31.046 0 20 Z M 26.819 29.38 L 30.795 29.38 C 31.739 29.38 32.5 28.616 32.5 27.676 L 32.5 15.46 L 26.819 19.723 M 9.205 29.38 L 13.181 29.38 L 13.181 19.721 L 7.5 15.46 L 7.5 27.676 C 7.5 28.619 8.264 29.38 9.205 29.38 Z M 13.181 19.721 L 13.181 12.335 L 20 17.45 L 26.818 12.338 L 26.818 19.723 L 20 24.835 M 26.819 12.335 L 26.819 19.723 L 32.5 15.459 L 32.5 13.188 C 32.5 11.08 30.094 9.878 28.409 11.143 M 7.5 13.188 L 7.5 15.46 L 13.181 19.723 L 13.181 12.335 L 11.591 11.143 C 9.904 9.878 7.5 11.08 7.5 13.188 Z" fill="transparent" height="40px" id="aYumWbwqF" width="40px"><path d="M 0 0 L 40 0 L 40 40 L 0 40 Z" fill="transparent" height="40px" id="lF7gvgt0E" width="40px"/><path d="M 0 20 C 0 8.954 8.954 0 20 0 C 31.046 0 40 8.954 40 20 C 40 31.046 31.046 40 20 40 C 8.954 40 0 31.046 0 20 Z" fill="rgb(255, 255, 255)" height="40px" id="RHVuhyowF" width="40px"/><path d="M 0 13.92 L 3.976 13.92 C 4.92 13.92 5.681 13.156 5.681 12.216 L 5.681 0 L 0 4.262" fill="rgb(52, 168, 83)" height="13.919999999999998px" id="tHFmJZ7qz" transform="translate(26.819 15.46)" width="5.68125000000002px"/><path d="M 1.705 13.92 L 5.681 13.92 L 5.681 4.261 L 0 0 L 0 12.216 C 0 13.159 0.764 13.92 1.705 13.92 Z" fill="rgb(66, 133, 244)" height="13.920000000000002px" id="jzClmnIgD" transform="translate(7.5 15.46)" width="5.681249999999984px"/><path d="M 0 7.386 L 0 0 L 6.819 5.115 L 13.636 0.003 L 13.636 7.388 L 6.819 12.5" fill="rgb(234, 67, 53)" height="12.5px" id="o2BEB_XY0" transform="translate(13.181 12.335)" width="13.63624999999999px"/><path d="M 0 1.709 L 0 9.097 L 5.681 4.833 L 5.681 2.562 C 5.681 0.454 3.275 -0.748 1.59 0.517" fill="rgb(251, 188, 4)" height="9.096556008021897px" id="WJhZsc21w" transform="translate(26.819 10.626)" width="5.68125000000002px"/><path d="M 0 2.562 L 0 4.834 L 5.681 9.097 L 5.681 1.709 L 4.091 0.517 C 2.404 -0.748 0 0.454 0 2.562 Z" fill="rgb(197, 34, 31)" height="9.0965560080219px" id="pvylEetGY" transform="translate(7.5 10.626)" width="5.681249999999984px"/></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 0 0.5 L 24 0.5 L 24 24.5 L 0 24.5 Z M 8 24 C 10.208 24 12 22.208 12 20 L 12 16 L 8 16 C 5.792 16 4 17.792 4 20 C 4 22.208 5.792 24 8 24 Z M 4 12 C 4 9.792 5.792 8 8 8 L 12 8 L 12 16 L 8 16 C 5.792 16 4 14.207 4 12 Z M 4 4 C 4 1.792 5.792 0 8 0 L 12 0 L 12 8 L 8 8 C 5.792 8 4 6.208 4 4 Z M 12 0 L 16 0 C 18.208 0 20 1.792 20 4 C 20 6.208 18.208 8 16 8 L 12 8 Z M 20 12 C 20 14.207 18.208 16 16 16 C 13.792 16 12 14.207 12 12 C 12 9.792 13.792 8 16 8 C 18.208 8 20 9.792 20 12 Z" fill="transparent" height="24.5px" id="wQHlPAxGX" transform="translate(0.41 0)" width="24px"><path d="M 0 0 L 24 0 L 24 24 L 0 24 Z" fill="transparent" height="24px" id="CKg5ZfXcb" transform="translate(0 0.5)" width="24px"/><path d="M 4 8 C 6.208 8 8 6.208 8 4 L 8 0 L 4 0 C 1.792 0 0 1.792 0 4 C 0 6.208 1.792 8 4 8 Z" fill="rgb(10, 207, 131)" height="8px" id="HtZyVCuBK" transform="translate(4 16)" width="8px"/><path d="M 0 4 C 0 1.792 1.792 0 4 0 L 8 0 L 8 8 L 4 8 C 1.792 8 0 6.207 0 4 Z" fill="rgb(162, 89, 255)" height="8px" id="EccsK1Fd3" transform="translate(4 8)" width="8px"/><path d="M 0 4 C 0 1.792 1.792 0 4 0 L 8 0 L 8 8 L 4 8 C 1.792 8 0 6.208 0 4 Z" fill="rgb(242, 78, 30)" height="8px" id="ZRMGm5miG" transform="translate(4 0)" width="8px"/><path d="M 0 0 L 4 0 C 6.208 0 8 1.792 8 4 C 8 6.208 6.208 8 4 8 L 0 8 Z" fill="rgb(255, 114, 98)" height="8px" id="KbqG1BGpX" transform="translate(12 0)" width="8px"/><path d="M 8 4 C 8 6.207 6.208 8 4 8 C 1.792 8 0 6.207 0 4 C 0 1.792 1.792 0 4 0 C 6.208 0 8 1.792 8 4 Z" fill="rgb(26, 188, 254)" height="8px" id="I0PoL4reX" transform="translate(12 8)" width="8px"/></g></svg>)
Рабочий процесс
Знакомство с бизнесом
Исследование аудитории
Изучение предметной области
Составление CJM
Формирование HMW's
Выявление сущностей продукта
Составление Sitemap
Составление BPMN
Определение требований к страницам
Создание мудборда
Поиск референсов
Разработка концептов
Разработка интерфейса
Cоздание компонентов дизайн-системы
Отработка технических нужд и краевых ситуаций
Создание адаптивов
LogistIQ — 3PL-провайдер. Является посредником между производителем и его партнёрами. Выстраивает всю логистическую цепь предприятия.
Помогает производителям доставлять автозапчасти, электронные компоненты и инструменты (оптом и в розницу) в магазины, автосервисы и частным лицам.
Контекст
У компании есть продукт — основной сервис доставки, но менеджеры вынуждены управлять большими объёмами данных вручную:
нет единого интерфейса, где менеджер может увидеть информацию по заказам: статусы нужно проверять вручную и невозможно быстро понять, какие заказы выполняются с задержками;
нет возможности удобно отслеживать движение водителей в режиме реального времени (только через звонки и сторонние ПО);
при возникновении проблем информацию приходится искать по разным системам, чтобы выяснить, что случилось;
отчёты собираются вручную из разных источников → аналитика медленная, проблемы выявляются постфактум.
Проблема
1.
Менеджеры погрязли в ручном хаосе и теряют 70‑80% времени на рутину (от 6 до 10 часов в день), при этом страдает качество выполнения основных обязанностей;
2.
Клиенты не задерживаются, переходя к конкурентам.
Задача
Разработать специализированное ПО для менеджеров по логистике сервиса.
Метрика успеха
Сокращение времени менеджера на рутинные процессы на 50% (с 6–10 часов до 3–5 часов в день);
Повышение cNPS (Candidate Net Promoter Score) с +10 до +40 — как индикатора привлекательности компании на рынке труда.
Боли
Потери клиентов, конфликты с поставщиками.
Эмоции
Стресс из-за высокой нагрузки, выгорание от рутины.
Трудности
Коммуникация с водителями, сложности в поиске и обработке информации.
Самостоятельные решения трудностей
Создают чаты в WhatsApp / Telegram для коммуникации с водителями;
Ведут Excel-таблицы с собственными кодами статусов для поиска информации;
Создают файлы Word с шаблонами часто используемых документов;
Используют заметки в телефоне и цветные стикеры для фиксации информации по заказам.
Я составила два вида CJM: для старого процесса — как менеджеры работали до появления централизованного сервиса и для текущего продукта — чтобы увидеть моменты, которые могут потенциально блокировать пользователей и подобрать подходящие решения.
Старый процесс
Отследила, на каких этапах работы у менеджеров возникают трудности и определила их мысли и эмоции в моменте.
Текущий процесс
Для составления использовала сценарии взаимодействия пользователя с системой.
Благодаря CJM удалось отследить блокеры, возникающие у пользователей в процессе прохождения сценариев и подобрать к ним решения — драйверы.
В процессе выявила несколько решений для удовлетворения потребностей бизнеса на соответствующих этапах.
На основании карт CJM составила HMW's для генерации решений и творческих идей.
Разделила их на три приоритета, взяв первый и второй для реализации на MVP-1.
Для определения сущностей вернулась к предметной области и начала размышлять, с какими объектами будут взаимодействовать пользователи и какие из них будут появляться в разных частях продукта с отличающимся набором атрибутов.
Разработала карту страниц и разделов сервиса для наглядного отображения информации, которая должна в нём находиться и логики перехода между разделами.
Sitemap так же показал, как информация будет иерархически вложена и сгруппирована.
Я использовала BPMN-схему, чтобы увидеть, как разные роли, системы и процессы влияют друг на друга и понять, какие экраны нужно будет отобразить при наступлении определённых событий и какие предусмотреть артефакты.
Отобразила в виде схемы, какие элементы пользователь должен увидеть на странице и какие действия может с ними совершить.
Мудборд предназначался не только для поиска визуальных решений, но и как инструмент для команды и стейкхолдеров, чтобы:
показать, как визуальные требования связаны с вводными данными;
синхронизироваться с бизнес-стороной в понимании стилистики и образов.
Благодаря продуманной структуре продукта и детально прописанным требованиям мне не понадобилось дополнительно отрисовывать варфреймы и я сразу приступила к созданию концептов, используя созданные артефакты, мудборд и собранные референсы.
В качестве визуальной метафоры я выбрала пульт управления — как образ для интерфейса сервиса. Захотелось сделать его в формате дашборда, чтобы менеджер сразу видел всю нужную информацию и мог удобно переключаться между разделами с помощью боковой панели.
Первые наброски я сделала на бумаге, чтобы сгенерировать идеи, а затем уже перенесла их в Фигму.
Интерфейс не сразу получился таким, как сейчас — я итеративно дорабатывала и улучшала его под руководством ментора.
Сначала я отрисовала первичные сценарии, указанные на BPMN-схеме, затем вторичные — ответвления от основного пути.
Параллельно с разработкой интерфейса я создавала компоненты, текстовые стили и цветовую схему для всего проекта.
Благодаря технике «А что, если…» я отыскивала краевые ситуации, которые могут возникать у пользователей при взаимодействии с системой и отрисовывала под них интерфейс.
Также я учла технические нужды разработчиков и предусмотрела все возможные состояния элементов, которые могут быть отображены.
Продумала логику поведения интерфейсов на разных экранах — десктопах 1920×1080, десктопах 1440×1024, планшетах 1024×1366 и мобильных устройствах 375×812 для всех страниц.
Заключение
Если бы у меня была возможность собрать метрики по реализованному проекту, я бы ориентировалась в первую очередь на данные показатели для определения успешности продукта:
Сокращение времени менеджера на рутинные процессы на 50% (с 6–10 часов до 3–5 часов в день);
Повышение cNPS (Candidate Net Promoter Score) с +10 до +40 — как индикатора привлекательности компании на рынке труда.
Второстепенные метрики, которые не критичны на старте, но важны для оценки роста и улучшения продукта в будущем:
Снижение оттока клиентов на 40%;
Увеличение NPS (уровня удовлетворённости клиентов) с 20 до 60;
Сокращение скорости обнаружения водителей на карте и понимания маршрута на 80% (с 5–10 минут до 1 минуты);
Ускорение реакции на задержки на 60% (10–15 минут вместо 30);
Ускорение решения проблем на 50% (с 10–30 минут на поиск информации до 5–15 минут);
Уменьшение времени на формирование отчётов на 70% (с 1‑3 часов до 10–30 минут);
Выводы
До работы над данным проектом я предполагала, что есть определённый свод методик, которые всегда нужно использовать для успешной реализации продукта. Но в процессе я поняла, что в первую очередь следует отталкиваться от задач самого проекта и подбирать точечно именно те подходы, которые помогут их решить (или генерировать на их основе свои).
Ещё одним важным инсайтом для меня стало понимание, что невозможно реализовать весь задуманный функционал, каким бы прекрасным и полезным для пользователей он ни был, потому что помимо временных ограничений существуют ограничения бизнеса и технические со стороны разработки. Главная цель для MVP-1 — сделать рабочий продукт, который будет решать поставленную задачу удобно для его пользователей. А «причёсывать» и доводить до идеала можно уже на дальнейших версиях продукта.
