О том, как мы решили сами сделать редизайн DPD

Предыстория

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

Звонок, как следовало полагать закончился их предложением отправить КП на почту. Я написал им, но ответа естественно не получил. Через пол года бухгалтер, заказывая курьера обратилась ко мне и сказала, что-то в стиле: "Влад, мне очень неудобно пользоваться их личным кабинетов, может вы предложите сделать его удобнее?". Я удивился, что наши мысли с ней сошлись хотя мы не обсуждали DPD до этого. Поэтому мы решили задизайнить их кабинет просто так для своей практики и поделиться результатами с вами.

Процесс

Передаю задачу нашему дизайнеру — Аней Фурсовой, объясняю идею, даю доступы к ЛК DPD. Передаю слово ей)

":) тема сложная, но интересно" - Анна Фурсова, UI UX.

Главная проблема существующего интерфейса даже не в том, что он не соответствует "трендам дизайна 2021", а в том, что несмотря на это он крайне не понятен пользователю.

Мы его пересмотрели и сделали удобным в первую очередь и для нас самих.

Интерфейс просмотра заказов

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

Было:

Стало:

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

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

Теперь они удобные и понятные всем:

- В обработке;

- Доставляется;

- Доставлен;

- Отменен.

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

Еще нас смутили иконки: они устаревшие (и не векторные) и никак не реагируют на поведение пользователя, а также занимают много места. Решением стало всплывающее меню действия - при выделении инпутов доступно взаимодействие со всеми выделенными заказами.

Было:

Стало:

Создание заказа

Ну и главная головная боль — создание заказа.

Первое, что предлагается сделать — заполнить данные о том, кто заполнил заявку.

Но зачем? Ведь есть профиль пользователя, откуда эти данные можно взять.

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

При нажатии на кнопку создания отправителя открывается новое окно с кучей необязательной информации (Обеденные перерыв? А зачем тогда поле “Дополнительная информация”?).

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

Было:

Стало:

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

Было:

Стало:

Тип доставки

Тип доставки и описание мы сделали визуально более приятными

Было:

Стало:

Выбор тарифа

При выборе даты приема отправления в пугающей опции “Дата, услуга и опции” появляется огромная таблица с кучей лишней информация о типах доставки. Но ведь данные о грузе на этом этапе оформления уже есть: известны и вес и габариты. Логично выводить только доступные для данного груза типы доставки и лишь обязательную информацию, интересующую пользователя, а именно срок доставки и сумма.

Было:

Стало:

Данные об оплате

Данные об оплате мы тоже сократили и облагородили.

Было:

Стало:

Дополнительные опции

Помните слово "опции" из огромного подраздела “Дата, услуга и опции”? Мы про него не забыли. Просто мы добавили этот пункт в самый конец, ведь на то эти функции дополнительные (а также оплачиваемые). Удобные переключатели позволят добавить любые дополнительные функции, а также посмотреть как они отразятся на общей стоимости заказа.

После проверки в окне с краткой информации о заказе можно “Оформить заказ”. А также можно сохранить данный заказ (вы же не хотите заполнять все заново?).

САММАРИ

Ну и в целом можно сравнить интерфесы создания заказа до и после: мы переработали концепцию и ушли от кучи попапов и ненужных кликов. Осталась только всегда доступная информация и краткие сведения о заказе справа в закрепленной зоне.

Было:

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

Стало:

Вид на начальном этапе создания заказа.

Вид на конечном этапе создания заказа.

ИТОГ:

Не то, что мы думаем, что к нам обратится DPD, но классно иногда сесть и прокачать себя некоммерческой проектом)

Пишите в комментариях, чьи интерфейсы доставляют вам боль и редизайн чего вы хотели бы увидеть в будущих статьях:)