Редизайн таблицы и фильтров в разделе Цен

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

Макеты
Проблема
Детали
Результат

The most brutalist and efficient library by Sidebay Studio

The use of cutting-edge materials and manufacturing processes in the design and production of Elements_Efi has resulted in a product that is both durable and sustainable, reducing the environmental impact of its use.

A Webflow library infused with the brutalist way.

The use of cutting-edge materials and manufacturing processes in the design and production of Elements_Efi has resulted in a product that is both durable and sustainable, reducing the environmental impact of its use.

Launch your portfolio, agency, startup faster than ever

The use of cutting-edge materials and manufacturing processes in the design and production of Elements_Efi has resulted in a product that is both durable and sustainable, reducing the environmental impact of its use.

Just drag, drop and make your first MRR faster

The use of cutting-edge materials and manufacturing processes in the design and production of Elements_Efi has resulted in a product that is both durable and sustainable, reducing the environmental impact of its use.

Фильтры

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

Быстрый вход в онлайн—таблицу цен

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

Таблица цен

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

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

Обновили настройки таблицы, чтобы можно было выклчать колонки как по-отдельности, так и группами

Задачи и проблемы

Фильтры

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

  • Все параметры — показываем все товары и колонки, включенные по умолчанию
  • С высокой ценой — фильтруем товары, цена которых выше, чем у конкурентов
  • Стратегии — показываем только те товары, которые участвуют в стратегии ценообразования
  • Расходы по схемам продаж — показываем товары с расходами на FBO и FBS

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

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

Быстрый вход в онлайн—таблицу цен

Пользователю сложно найти точку входа в онлайн-таблицу для массового редактирования цен

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

Таблица цен

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

Какие проблемы пользователя мы решаем (в порядке приоритетности)?

  • В большой таблице сложно ориентироваться
  • Важные для пользователей колонки находятся далеко
  • Нет возможности настраивать последовательность колонок под себя

Что решили поменять в таблице

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

Рабочий процесс в деталях

👔 Взаимодействие с продакт менеджером

Задачи обсуждались с продакт менеджером. Спринт планниг также проводились с продакт менеджером.

Часто бывало, что менялись приоритеты и выставленные на задачи майки. Поэтому неотъемлемой частью работы было подстраиваться под обстоятельства.

Исследования проводились в паре с исследователем

🎨 Взаимодействие с дизайн-командой

Я работала единственным дизайнером при редизайне таблицы цен и фильтров, однако советовалась с командой при принятии решений

👩 Моя роль на проекте

Я выступала в роли Продуктового Дизайнера. Работала с интерфейсом ЛК Селлера в разделе Цены.

Тесно взаимодействовала с командой разработчиков и дизайнеров в компании, а также с продакт менеджерами.
Проводила дизайн-ревью после того, как задача была имплементирована на тестовом стейдже

🛠️ Инструменты

В работе использовала:

  • Figma как основной инструмент

Итог

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

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

Добавила более очевидную точку входа на онлайн таблицу массового редактирования цен, что привело к 3х-кратному увеличению посещаемости инструмента, которая не снизилась впоследствии.

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

Следующий проект Medical app