Нестандартная задача. Проектирование товарной накладной.

В апреле 2017 Rademade внедрила CRM-систему управления заказами для компании Ping-Pong — сервис доставки еды в Киеве. Детали заказов в CRM структурированны таким образом, чтобы помочь операторам колл центров и администраторам точек доставки обрабатывать, мониторить приготовление и доставку заказов.
В мае, когда начали работу над новым блоком CRM-ки, так кайфонули от процесса и результата, что захотелось написать о ней статью. Речь идет о товарной накладной заказа.
Что бы правильно начать, нужно что-то заказать.
Отправной точкой для начала работы стал заказ доставки еды от Ping-Pong. Вместе с коллегами, работающими над проектом, изучили накладную и записали первые впечатления. Дальше предстояла встреча с заказчиком, что бы вместе определить бизнес-задачи для накладной.

На встрече с заказчиком определили бизнес задачи для будущей накладной и нагенерили гипотез:
- Ускорить сборку заказа, улучшив читабельность деталей по заказу;
- Помочь курьеру верно принимать решения в ежедневно повторяющихся ситуациях, уменьшив кол-во акцентов и выделив главное;
- Привлечь новых клиентов и повысить частоту заказов постоянных клиентов;
- Увеличить кол-во способов оплаты заказа, добавив оплату через QR-код с накладной. (решит не редкую проблему отсутствия налички у клиента);
- Повысить информативность накладной, добавив детали заказа и адреса, дополнительные сведения по блюдам — модификаторы;
- Внести универсальный цифровой код (далее — основной код) для накладной, что решит ряд проблем по ускорению общения между курьерами и Колл-центром.

Для сокращения объема статьи не будем приводить гипотезы по полной формуле, т.к. в ряде случаев не скажем почему так решили — коммерческая тайна, и в ряде случаев гипотеза выдвигалась без железного аргумента, с пониманием того, что нужно попробовать и собрать отклик курьеров . То же касается и «проверим»… Проверим запустив. Тогда и поймем как еще улучшить. :)
Начинаем работу
Набрасываем 2 варианта. Закрепляем условие, что для работы с текстом используем только 2 цвета — контрастный черный и контрастный серый.
Таблицу пока копируем из вайрфрейма, который сделали на первой встрече с заказчиком. На первом этапе важно правильно определить пространство блокам, что бы не потерять время, позже, на перегруппировке.

Анализируем свою работу, показываем клиенту, даем пользоваться курьерам, собираем фидбек, делаем выводы…

Итерация 1.2
Перед началом работы над вторым этапом, озвучиваем ряд гипотез и задач:
- Введя универсальный код заказа мы в дальнейшем сможем скрывать ряд информации с накладной, но пока лучше всю информацию показывать, т.к. можем усложнить работу курьера в ряде кейсов.
- Клиенту покажем на чеке время принятия заказа и имена оператора и курьера, которые обрабатывали заказ. Это должно повысить доверие к компании и открытость.
- В таблицу добавим номера блюд, и модификаторы (составные бренчбокса, изменения в блюде). Это должно увеличить скорость считывания накладной на кухне и сборку заказов.
- Сэкономим вертикальное пространство в блоке над таблицей. Выделим главное. Что-то соединим по смыслу.

В процессе работы добавились микро бизнес-задачи. Макет стал объемней. Результат показали заказчику и курьерам, сами посмотрели на свою работу со стороны и собрали следующие выводы:

Итерация 1.3
Перед началом работы в Sketch генерируем гипотезы и задачи:
- В шапке выделим телефон и уменьшим акцент на ФОП, это поможет выделить в шапке главное.
- В логотип добавим подпись и слоган, это увеличит запоминание логотипа и ассоциацию с брендом.
- Блок о клиенте сделаем меньше по высоте, нам нужно вмещать минимум 10 позиций в таблице.
- Тип оплаты, статус и сдачу попробуем в горизонтальном режиме показать.
- Слова основной и дополнительный код ни о чем не говорят. Покажем разницу визуально. Создадим отдельную конструкцию.

Фидбек и выводы по этой иттерации мы записали на бумаге.

Расшифруем основные.

Итерация 1.4
В четвертой итерации новых гипотез было не много. Взяли в работу выводы и комментарии, паработали с акцентами и размещением элементов внутри смысловых блоков.

Выводы по итерации получились следующими:

Итерация 1.5 и финализация
На основе фидбека, инсайтов и собственных наблюдений решили:
- Времени заказа заказа придать большего акцента и перенести в шапку накладной;
- Плашку для информации в шапке сделать как производную из логотипа;
- Комментарий и детали доставки сделать меньше чем данные о клиенте и адрес;
- Сетку в подвале перестроить, что бы таблица могла максимально низко «опускаться».

В ходе ряда микро-итераций мы пришли к финальному виду накладной.

Отдельно проработали еще и разные способы и статусы оплаты, выделив важное для клиента и курьера.

Было-стало
Сравнение до и после…

Послесловие
Rademade гордится проделанной работой. Накладные уже печатаются на кухнях Ping-Pong, мы получаем первый фидбек от пользователей, и первые данные, о том что получилось улучшить в работе логистики и кухни, и что будем улучшать в итерации 2.0.
Заходите и ставьте лайки на наш Беханс.
Всем добра (:

