company_banner

Может ли дизайн повлиять на скорость доставки?

    Внутренние интерфейсы редко бывают дружелюбными, понятными и красивыми. А зря — c их помощью можно влиять на ключевые метрики бизнеса. Под катом история о доставке, курьерах, мышлении и дизайне.



    Об авторе статьи: Мурад Гаммадов, лидер B2B-дизайна Додо Пиццы.

    Заказывая еду на доставку, люди уже не готовы ждать час. Это слишком долго. Полчаса — вот максимум, который клиент готов потратить на ожидание. В 2018 году мы возили пиццу в среднем за 43 минуты, а хотели за 30!

    Чтобы добиться цели нам пришлось расширить транспортную линейку (добавили бензоскутеры, электросамокаты и велотрайки), пересмотреть зоны доставки, научиться прогнозировать время поездок. А ещё переделать терминал курьеров и с помощью дизайна изменить парадигму восприятия с «успеть за 60 минут» на «доставить как можно быстрее».

    Это статья про дизайн. В ней я покажу весь путь работы с интерфейсом: с чего всё начиналось, куда двигалось, и чем дизайнерское сердце успокоилось.

    С чего всё начиналось


    В каждой пиццерии между кухней и зоной для курьеров стоит моноблок, на котором открыта «касса доставки» — раздел Dodo IS, отвечающая за взаимодействие с курьерами:



    Это старый интерфейс кассы доставки, с которого мы начали свой проект по ускорению. Зелёным подсвечиваются заказы, готовые к отправке клиенту, белым — те, что ещё в работе. Чёрный и синий цвет номера — это разделение на доставку/самовывоз. Время слева вверху ячейки — обратный отсчет от 60 минут с момента поступления заказа в пиццерию. Бейджик справа вверху ячейки показывает статус заказа или время до приготовления.

    Прежде чем брать заказы, курьеру нужно было «встать в очередь» — по сути, зачекиниться. Это делалось с помощью штрих-кодов: каждому курьеру распечатывали штрих-код, и он сканировал его при входе в пиццерию. Система сама определяла первого в очереди курьера и делала его «активным» — то есть тем, кто должен брать заказ.

    Когда курьер собирается доставить заказ, он должен выбрать его в интерфейсе и отправиться в путь. Чтобы выбрать заказ, нужно сначала нажать на ячейку, а потом нажать «Выбрать заказ», и тогда уже он привязывался на тебя. Дальше, либо ты берёшь еще один заказ, либо нажимаешь «Отправить курьера» и выезжаешь.

    Не изобретаем велосипед


    Общую конструкцию интерфейса мы решили не менять — это в какой-то мере колесо, далеко от него не уйдешь. Всегда приходится выбирать между двумя классическими вариантами отображения: либо плитки, либо список. Список неудобен – слишком мелко и нажимать неудобно. В общем, годно, оставляем плитку и идём думать над содержанием ячеек.

    Весь проект «Доставка» был выстроен вокруг работы со временем, как со стороны менеджмента/бизнесовых решений, так и со стороны дизайна. Для нас было очень важно, чтобы таймер был виден издалека, прямо от двери, как только курьер заходит в пиццерию. И мы стали прорабатывать разные варианты визуализации. Можно сделать горизонтальный таймер и красить его в зависимости от оставшегося времени:



    Вроде неплохо, но нет. Само наличие таймера создает ощущение, что у тебя ещё есть время для прокрастинации. А мы хотим, чтобы заказы брали сразу же, как только они будут готовы.

    А что если убрать горизонтальный таймер и красить сам номер заказа? Он большой, хорошо заметен:



    Не, не айс. Теперь акцент сместился к проблемным заказам. А если нет проблемных, нет и мотивации выезжать сразу. Пойдём в другую сторону…

    А что, если считать, сколько времени уходит на выбор заказа? Как только курьер становится активен, у него начинает тикать время. Если выбираешь себе заказ больше 30 секунд — подсвечиваем красным. Можно ещё давать подсказки вроде «Берите заказ», «Пора выезжать». Всегда приятно, когда система общается с тобой:



    Но мы не учли, что курьеры часто ждут второго и третьего заказа, чтобы отвезти всё сразу. И трудно понять, сколько времени тратится на простой, а сколько на ожидание.
    Может тогда считать время простоя заказа, а не курьера? Так мы даём гибкость на выбор и одновременно намекаем не тянуть слишком долго. Будем показывать его в дополнение ко времени заказа и подсвечивать: две минуты — жёлтым, пять — красным:



    Так как заказы ждут курьеров на тепловой полке, мы так и назвали это время «временем на тепловой полке». Оставили так и пошли думать дальше.

    Как считать время


    Потом мы подумали: а правильно ли вообще считать время в обратном порядке от 60 минут? Это было логичным, когда нужно было просто уложиться в час, но сейчас курьер должен доставлять заказ как можно быстрее. И тут мнения разделились:

    1. Продакт хотел показывать прогноз общего времени из разных интервалов: приготовление (желтый цвет), тепловая полка (зеленый), доставка (синий). Время приготовления бралось как стандартное (7 минут), но обновлялось в процессе; время на тепловой полке начинало идти, только когда заказ попадал туда; для доставки показывался прогноз.
    2. Тайный советник тоже предлагал показывать прогноз общего времени, но только числом, и показывать отдельно время на тепловой полке.
    3. Дизайнер думал просто ограничить время 30 минутами. Раньше был обратный отсчет от 60, теперь будет от 30. Жёстко, но просто.




    Большинство сотрудников нашего офиса проходили гембу, поэтому мы решили сначала потестить все три варианта на них:

    1. Уже в самом начале выяснилось, что вариант продакта слишком сложный. Ни один человек так и не понял его самостоятельно, да и после объяснения мало кто понял.
    2. Вариант дизайнера поняли быстро, но он показался (сюрприз!) слишком жестким.
    3. Вариант тайного советника понравился больше всего, и мы решили взять его за основу.

    Правда, в процессе обсуждений мы поняли, что его тоже стоит доработать. Во-первых, мы забыли про статус заказа. Во-вторых, показывать два времени в ячейке — плохая идея. Все время хочется мысленно как-то сопоставить их, сложить/вычесть. Поэтому от времени на тепловой полке мы все же отказались, оставив только общее время заказа:



    Распечатали доработанный вариант и пошли показывать курьерам. Всё прошло благополучно, они быстро поняли, как считается новое время заказа. Конечно, привычка всё равно остаётся, и потребуется время, чтобы перестроиться. Но перестраиваться всё равно придётся, и тут важнее было понять, не слишком ли сложна новая логика.

    К новой логике мы добавили ещё и красоту:

    • Вернули все дополнительные контролы со старой кассы.
    • Собрали полноценную сетку из ячеек и выделили статус.
    • Очередь курьеров сделали контрастной и перенесли её налево — читаем же слева направо.




    Как курьеру понять, что он молодец: метрики


    Ещё один важный момент — метрики, а именно среднее время заказа. Это та метрика, ради которой всё и затевалось. Мы начали экспериментировать с тем, как показывать статистику заказов. Сначала было просто среднее время:



    Но не суховато ли? Попробуем показывать количество заказов, доставленных вовремя и не вовремя:



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

    Попробуем показывать через полоски и их соотношение, для этого придётся перенести статистику вниз:



    Значения не могут быть на границе полосок (будут накладки), поэтому детализацию приходится сдвигать вправо. Но когда они стоят так близко, всё время пытаешься соотнести полоски с кружками — это напрягает. Да ещё и низ частенько выпадает из поля зрения. В общем, сверху нагляднее.

    В итоге оставили проценты без пояснений и вернули среднее время:



    Мы долго спорили, как показывать заказы – количеством или процентами? В итоге остановились на процентах, потому по процентам можно ставить цели. На количество ты не можешь влиять прямо, и пиццерии бывают разные (старые/новые, разные локации). А с процентами таких проблем нет.

    Потом продакт подкинул ещё одну идею: вести рейтинг курьеров за смену. У рейтинга нет каких-либо последствий (штрафов/премий), это чисто соревновательный элемент. Вроде мелочь, но добавляет азарта в работу:



    Ну и старая пиналка вернулась в новом обличии.

    В самом конце дизайнер пришел к мысли, что если важно содержание самих списков, заголовки выделять не обязательно. Заодно подтюнили статус — он должен быть заметен издалека, поэтому сделали его ярче и вписали в общую гамму:



    Идём тестить на живых курьерах


    Итак, мы собрали работающую модель и выкатили её на несколько пиццерий. И сразу же стали заметны недочеты.

    Первая проблема — всё очень мелко. У моноблоков кассы большая плотность пикселей, но нет автоматического масштабирования, как на телефонах или планшетах. При текущих размерах читать что-то на расстоянии совсем трудно.

    Вторая проблема — в очереди всё слилось из-за маленьких заголовков, взгляду не за что зацепиться. Заголовки играют роль указателей и помогают ориентироваться, поэтому должны быть крупными и хорошо заметными.

    Третья проблема — плохо видно время заказа и готовность. Везде приходится вчитываться.

    С первыми двумя пунктами всё ясно, а вот с третьим пришлось подумать. Выделить время как статус не получалось, две похожие сущности путали бы. С другой стороны, в статусе главное знать готов заказ, или нет. Поэтому мы решили вернуться к старому варианту — готовность показывать зелёным фоном, а статус просто текстом. Это позволило и выделить время.



    Добавим красок


    В один момент пришёл арт-директор и говорит: а давайте сделаем все метрики гигантскими и зафигачим в полоску слева? Дизайнер сначала спорил и пытался вразумить арт-дира, а потом попробовал и ему понравилось:



    Потому что так гораздо заметнее. Тут уже не сможешь забить на них.

    Примерно в тот же момент решили сделать тему тёмной. На сером фоне из-за малой контрастности ячейки немного сливались, а на тёмном фоне белую ячейку видно издалека. Да, мы ещё сделали это из-за оптического эффекта — белый текст на тёмном фоне кажется больше, чем чёрный на белом (тут стройного объяснения у меня нет, но кажется это связано со «светлотой» — белый цвет своей яркостью как-бы «съедает» чёрные буквы; но это не точно). И всё же мы не уверены, хорошо ли делать всё темным, но решили попробовать в качестве длительного эксперимента.

    Для сравнения — попытка «осветлить» все обратно:



    А это уже докрученный вариант, который в итоге и вышел в продакшн:



    Сравните, что было в самом начале и что получилось в результате:



    Спустя год средняя скорость доставки по всей сети снизилась с 43 до 35 минут. Какова была в этом заслуга нового терминала? Сложно оценить, но свою роль он сыграл. В таких глобальных проектах сам по себе дизайн не может (да и не должен) быть киллер-фичей. Но это действенный инструмент, который помогает облечь суть в нужную форму и правильно расставить акценты.
    Dodo Pizza Engineering
    О том как IT доставляет пиццу

    Похожие публикации

    Комментарии 24

      +3
      Смотря со стороны, вариант «было» кажется куда удачнее варианта «стало». Сильно увеличилось нагроможение информацией, текст в целом уменьшился, прямоугольники с заказами начали занимать заметно меньшее количество экрана.
      Если это админка — ок, да. Если это для курьеров… курьерам точно надо знать сколько из них ездит, сколько не ездит кто опаздывает, кто вовремя, среднее время по плинтусу и всё то, что вы вывели для них в левую панель? Со стороны кажется, что он должен прийти, надёргать заказов и уйти их развозить, а остальное — клёвые шашечки для офис-менеджеров и красивых графиков в отчётах. И тут то что было — более интуитивно закрывает эту задачу.
        +2
        Не совсем пойму, почему текст в целом уменьшился? Единственное, что видно в старом варианте в отдалении — номер заказа. Это важная информация, но не единственно важная. Даже наоборот, курьеры часто в ожидании смотрят не на номер заказа, а на адрес и время. В старом варианте их гораздо труднее прочитать.

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

        А что касается метрик, то да, они нужны менеджерам. Но по ним ставятся цели, и курьеры не могут не обращать на них внимание. Метрики как раз могут повлиять на премии (штрафов нет), поэтому они активно вовлечены в них :)
        +1
        «Раньше было лучше», как уже сказали выше.

        Но я все же не пойму, а зачем вообще этот интерфейс? Курьеры — это не случайные прохожие. В чем проблема выдать каждому по приложению в телефон и слать туда уведомления. За 5 минут — готовься к отправке. По готовности — пилик, пиццу в зубы и вперед.

        Для кого эти мониторы то?

        > У рейтинга нет каких-либо последствий (штрафов/премий), это чисто соревновательный элемент
        Если нет премий, то люди будут думать, что будут штрафы (даже если их реально нет). Так уж привыкли.
          +1
          На самом деле проблема была в легаси и ресурсах :)

          Весь проект по ускорению доставки включал много всего, и в то время переделать терминал было гораздо выгоднее, чем создавать приложение. Нет, само приложение сделать не трудно, трудно правильно связать его с Dodo IS. А терминал уже был, свои функции выполнял. А еще оказалось, что распределять заказы самим — совсем не тривиальная задача (хотя мы очень хотели). Там столько пограничных кейсов, что пришлось пока запарковать эту идею и оставить распределение самим курьерам.

          Насчет штрафов не соглашусь. Я понимаю, что вы говорите о глобальной привычке, но мне кажется она быстро нивелируется реальным отсутствием штрафов. Ну или к рейтингу просто появится безразличность, но это не так страшно.
            +2
            Да, курьеры это не прохожие. Прежде всего курьеры — это как ни странно, инструмент в руках менеджера смены. А курьер, планирующий свой маршрут для оптимизации сего действа, должен иметь соответствующий инструментарий.
            0
            Выше пишут, что раньше было лучше, а на мой взгляд, по существу ничего и не поменялось – дизайнер «поигрался со шрифтами» и сделал список контактов в Телеграм, заставив курьеров страдать переучиваться. Хотя, более читаемый адрес доставки и позитивное изменение, вопрос, как он вообще мог быть таким нечитаемым?

            Расскажите, зачем нужны на экране выбора заказа номера заказов ВОТ ТАКИ КЕГЛЕМ и зачем вообще курьеру при выборе заказа видеть эти номера.

            ?
              +1
              Если «по существу» означает что была таблица заказов и осталась таблица заказов — то да, ничего не изменилось. Но в мелочах изменилось многое: лучше видно адрес, фокусировка на времени, быстрая печать чека, упрощенная механика выбора заказа (правда, в статье об этом не сказано), ушел самовывоз из общего списка, добавилось время прибытия следующего курьера, и так далее. Все вместе это сильно упростило жизнь курьерам.

              Да, при переучивании мы всегда страдаем, но здесь не было особых проблем. Именно потому, что мы принципиально ничего не изменили, но добавили много мелких удобств, негативной обратной связи практически не было (жаловались только на темноту интерфейса).

              По поводу номера заказа: курьер не постоянно стоит прямо у терминала, ему важно видеть номер заказа и факт готовности издалека. Когда он видит что такой-то заказ готов, то идет к тепловой полке (которая обычно рядом, но не всегда) и забирает его оттуда (по номеру).
                0
                Я бы такой интерфейс не принял, уж извините, но мне кажется вам стоит заказать проект у настоящего UI дизайнера, а не мучить штатного дезигнера клеем кеглем.

                239 (2) читается лучше чем 239–2
                Если важно видеть номер заказа и факт готовности издалека – сделайте эти элементы равнозначными по заметности! Толку, что номер заказа видно с другого конца кухни, если состояние – мелким шрифтом в правом нижнем углу (а не рядом с номером, почему то).
                И тд и тп, но я работаю не в Додо, так что, засим, откланиваюсь )

                Update: Moorat, вы так быстро ответили, что я позволю себе продолжить диалог в том же сообщении, ввиду ограничений на свободу слова на Хабре.
                Факт готовности считывается не по тексту, а по зеленому фону )
                А, то есть вы и меня запутали ) Выходит у вас двойная сигнализация – есть фон, который меняет цвет и есть плашка со временем, которая тоже меняет цвет. Как то многовато на цвете у вас завязано, вы курьеров часом на дальтонизм не тестируете? Шутка )
                На самом деле это плохо. Проблемы интерфейса разным цветом не решаются, а наоборот, подсвечиваются.
                  0
                  Факт готовности считывается не по тексту, а по зеленому фону )
                    0
                    Не пишите ерунды.
                    239 (2) читается лучше чем 239–2

                    Проблемы интерфейса разным цветом не решаются
                      0
                      1. Факт. Если вам непонятно, сделайте пару шагов от монитора. Вам нужен номер заказа.
                      2. Покажите мне «светофор в светофоре», это ровно то, что на плитках Додо.
                      3. Не пишите ерунды.
                +1
                Дизайнер в интерфейсах должен разделять автомат и секс.
                Автомат Калашникова — это интерфейс, который спасает жизнь. Любой рабочий интерфейс для своих внутренних нужд это автомат, который помогает бизнесу.
                Секс — это современные интерфейсы, материал дизайны, призваные погрузить человека в транс чувственных удовольствий. Секс. Вау. Красивый интерфейс.
                У вас раньше был автомат — а потом нарисовали секс.
                В чем минусы — я все же настаиваю что рабочие интерфейсы должны быть элементарны в техническом исполнении. Чуть ли не на дефолтных стилях браузера.
                Это позволит снизить стоимость поддержки, уменьшить килограмы js.

                И Второе. Если вы это понимаете, объясняете руководству. Может быть мы перестанем доить друг друга маркетингом в рабочих инструментах.

                Так, особых предьяв нет. Сториз аналитики дизайнера продемонстрировали.
                  0
                  Соглашусь, такое разделение справедливо. Но я считаю что «секс» — это просто более поздняя стадия развития продукта. Наш терминал доставки был сделан еще на заре Додо, и с тех пор практически не менялся. Не трогали его как раз потому, что вносить и поддерживать даже мелкие изменения было дорого. А сейчас мы готовы тратить на это ресурсы, и видим в этом ценность. В первую очередь это вопрос конкурентного преимущества — многие крупные B2B-системы уже начали двигаться в сторону хорошего дизайна.

                  Да и в целом, мы в Додо считаем что внутренняя эстетика влияет на бизнес. Я бы сравнил это с тем, как мастодонты айти борятся за красоту своих офисов — не меньше, чем за сами таланты. При прочих равных (а конкуренция давит и будет давить еще сильнее) удобная, красивая и понятная система будет создавать положительные впечатления, повышая доверие и лояльность.
                    0
                    первую очередь это вопрос конкурентного преимущества

                    Я про это и писал. Пожирать друг друга маркетингом. В мире — когда чувственные удовольствия — цель жизни. Бизнес работает на спрос. Т.е. секс. Выходит, что интерфейсы делаются только чтобы уделать конкурентов, поскольку большинство должно испытовать оргазм именно от наших интерфейсов. В принципе, ничего ужасного в интерфейсе с которым приятно работать нет. Но опять же первично очень правильно ориентироваться на аналитику подгрузки контента, парсинга css, рендеринг, отклик кнопок. Сложность поддержки. Все это красиво можно сделать и не в ущерб этим параметрам.И на это нужно обязательно делать акцент в метриках — дизайн не в ущерб смыслу. Спрос бессмысленен и неосознан. Смелость заявить об этом дорогого стоит — технически реализовывать, вызовет много внимания среди специалистов.

                    А сейчас мы готовы тратить на это ресурсы, и видим в этом ценность.

                    Любая команда определяет ценности и реализует их. Главное понимать, что при ресурсах у вас есть возможность обоснованно противопоставляться общему спросу, тем самым задавать тренды.
                    мастодонты айти борятся за красоту своих офисов — не меньше, чем за сами таланты.

                    Офисы не тормозят, как их не обустраивай) Это демонстрация успеха — создание эдема — цель человеческого труда — райский сад. Ну если конечно не перегораживать мебелью проходы)
                    +1
                    Дизайнер в интерфейсах должен стремится к максимальной эффективности. И ни в коем случае не разделять эффективность пользования интерфейсом и эффективность его создания и поддержки. Вредно думать, что раз это не айфон для клиента, а экран для персонала, то можно сделать дешево и сердито «нортоновские таблицы».
                      0
                      Нортон коммандер?
                    0
                    Можете, для полноты картины, написать физический размер экрана?
                      0
                      В основном 11-дюймовые моноблоки (16:9, 1920х1080), но есть часть старых 15-дюймовых (4:3, 1024х768)
                      0
                      Когда появится пицца с анчоусами?
                        0
                        Я думаю, что как только мы увидим, что предпочтения людей поменялись и люди внезапно захотели анчоусов.

                        Сама по себе рыба вида Анчоусовых не типична для наших регионов. В России нет поставщиков подобных рыб (может и есть, но мы не находили). Будем держать в уме этот вопрос. Когда вернёмся к разработкам морской пиццы – будем искать анчоусы)
                        0
                        Вопрос по номеру. Что означают эти два числа? Если второе число — район города, тогда наглядно видно, что нужно брать, чтобы адреса были ближе. А если какой-нибудь тип заказа (ну хз, теплое/холодное, большое/маленькое, жидкое/твердое), то уже не так важно и может не смысла так выделать.

                        Еще непонятно есть ли ограничения по весу/объему. Ну чисто физически любое количество заказов всегда помещается в транспортное средство? Не бывает ситуаций, когда сумка не вмещает часть пятого заказа или вес превышает разумный (для большого количества напитков, наверное, актуально)?

                        Мне кажется, что тут важнее всего не улица, а близость эти улиц. Конечно, когда небольшой город, то ситуация простая, но всегда случается «новая улица», которая вообще непонятно где и тут как раз подойдет разбивка по районам. Даже для клиентов у некоторых компаний на сайте есть наглядная разбивка по районам со временем и/или ценой доставки. Для доставщиков разве это не важно?
                          0
                          Вторая цифра в номере заказа показывает количество продуктов в заказе. Интуитивно от него и правда хочется отказаться, но на практике эта цифра часто пригождается.

                          Ограничения есть физические — размеры сумок (большая и маленькая). Но обычно берут 1-2 заказа на поездку (5-6 позиций), поэтому особых проблем не возникает. Иногда бывают очень большие заказы, их могут везти по частям.

                          Насчет близости согласен, учтем. Спасибо!
                          0
                          Вот еще вопрос: в списке курьеров под именем курьера есть цифра — так называемый рейтинг курьера, меняющийся в процессе доставок от 5,0 — курьер прибывает вовремя, без опозданий, и снижающийся по мере задержек в процессе доставки. Как рассчитывается этот рейтинг, по каким алгоритмам, что на него влияет? Учитывается ли дорожная обстановка (пробки), наличие более 1 пункта доставки в процессе одной поездки, время ожидания клиента?
                            0
                            Рейтинг — это процент поездок за смену, попавших в прогноз (с запасом в 5 мин). Прогноз дают карты с учетом пробок. Количество продуктов в заказе не учитывается, потому что по факту практически не влияет на скорость.

                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                            Самое читаемое