Как мы сделали редизайн страницы заказов и упростили жизнь продавцам — и при чём тут ценности Авито

Привет! Я Катя Романова, дизайнер, отвечаю за опыт продавцов в Авито Товарах. Дизайнеры у нас не просто рисуют интерфейсы, а делают удобнее весь сервис и влияют на бизнес.

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

Контекст: как продавцы управляют заказами

Исследовали боли продавцов

Убрали лишнее и добавили важное

Добавили архив заказов и снизили нагрузку на сервер

Повысили удовлетворённость продавцов

Помогаем соседним командам

Как использовать наши ценности в работе

У продавца на Авито два основных интерфейса управления заказами: список и страница каждого заказа.

Список — это все товары, которые у продавца заказали с доставкой. Там же отображаются подробности: дата, название и стоимость товара, способ доставки и статус. Это выглядит так:

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

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

Сложности для всех:

❌ Покупатели и продавцы переписываются в мессенджере Авито: обсуждают заказы и договариваются об условиях сделки.

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

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

❌ Пользователям приходилось долго листать список в поисках нужного заказа из-за отсутствия фильтра и поиска на странице.

Для частников и небольшого бизнеса:

❌ У них были трудности с профессиональным кабинетом Авито Pro. Это рабочее пространство для продавцов, в котором можно следить за статистикой, управлять тысячами объявлениями, автоматизировать однотипные действия.

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

👉 Подробнее про Авито Pro на лендинге

Для крупных продавцов:

❌ Они не могли передавать сотрудникам доступ к управлению заказами — приходилось давать полный доступ к профилю, а это небезопасно.

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

Убрали оповещения о статусах из чатов. Раньше, когда покупатель делал заказ с Авито доставкой, мы присылали оповещения с текстом в чат, на почту и в пуш-уведомлении. Уточняли, что заказ оформлен, и отправляли статусы, когда они менялись. Например: «Заказ оплачен», «Отправлен», «Получен». Статусы копились в диалоге, и сообщения загромождали переписку.

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

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

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

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

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

Добавили в список заказов фильтр и поиск. Раньше продавцы не могли сортировать заказы и искать по названию или статусу — приходилось скроллить весь список.

Мы заметили эту проблему и добавили поиск по номеру или названию заказа, а ещё фильтры по статусам и службе доставки:

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

⭐ На момент написания статьи больше 30% продавцов подтверждают заказы на странице списка — это значит, что фича действительно полезна.

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

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

Так выглядела карточка товара раньше:

У карточки заказа на десктопе и в мобильной версии было ещё несколько проблем. Например, раньше в мобильной версии мы вообще не показывали прошедшие и будущие статусы, а сразу вели пользователей в историю — эта ссылка была в правом верхнем углу страницы.

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

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

Также я убрала всё лишнее, а плашку с важной информацией переместила в верхнюю часть страницы:

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

❌ Передавать доступ от своего аккаунта другим небезопасно. Сотрудники могли украсть личную информацию из профиля.

❌ Собственник не может следить за тем, что делают сотрудники.

❌ Владелец аккаунта не может распределить задачи между подчинёнными — он даёт доступ сразу ко всем объявлениям.

Чтобы решить эту проблему, мы внедрили возможность добавлять сотрудников в личный кабинет Авито Pro и давать им ограниченный доступ:

Владелец аккаунта может зайти в раздел «Сотрудники» в личном кабинете Авито Pro и настроить, что могут и не могут делать другие люди, находясь в его аккаунте. Мы разделили настройку на 3 блока: «Работа с объявлениями», «Продвижение» и «Работа с клиентами».

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

👉 Подробнее про доступ для сотрудников

Мы стали хранить на серверах Авито огромное количество заказов, из-за чего пользователи столкнулись с долгой загрузкой. Проблему надо было решать быстро, так она грозила ошибками и падением страницы.

Чтобы снизить нагрузку на сервер, мы придумали сделать архив заказов. Разделили заказы на актуальные — те, что сейчас в работе, и старые — уже отработанные. Решали мы и правда быстро: деливери-команда попросила меня срочно взять задачу в работу, потому что ситуация была критической. Но вокруг задачи было много споров.

Я нарисовала два варианта интерфейса для архива:

У нас было мало времени на принятие решения, а мнения разделились. Деливери-команда была за табы, потому что они легче и понятнее в разработке. А мой руководитель считал, что нужно делать список. Навык аргументации в команде помог нам быстро выбрать наилучшее решение. Мы остановились на списке.

Customer effort score (CES) или оценка усилий клиента — это метрика, которая показывает, насколько пользователю удобно взаимодействовать с интерфейсом. По ходу работы исследователи из моей команды несколько раз опрашивали продавцов: в итоге метрика пришла к плановому значению, на которое мы ориентировались в начале работы.

Такие результаты были после опроса в июне 2024:

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

🤝 Например, я выясняла у продактов логику арбитража — это когда Авито решает спор между покупателем и продавцом. Это сложный процесс со множеством вариантов развития событий, поэтому было важно учесть все детали.

🤝 Ещё я вела переговоры с командой, отвечающей за флоу доставки силами продавца. Предлагала убрать лишний статус, который не имел смысла для продавца и увеличивал время работы с заказом.

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

После редизайна ребята стали приходить ко мне, чтобы я сделала ревью. Так наш продукт будет оставаться консистентным и удобным для пользователей, а time to market сокращаться.

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

Упрощай! Когда вы упрощаете опыт пользователя, то стоит менять продукт, а не пытаться объяснить сложный продукт с помощью интерфейса. Юзерам должно быть комфортно пользоваться вашим продуктом, поэтому его не стоит загромождать лишними деталями.

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

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

Вместе мы можем больше. Вот девиз, который я люблю использовать: «1+1=11» 😀.

Главное — результат! Неважно, сколько сотен макетов нарисуешь, твою работу всегда будут судить только по тому, что попадёт в продакшен. Не забывайте об этом в процессе работы.