СОДЕРЖАНИЕ

СRM – система для запуска рассылок сообщений и бонусов, а также создания баннеров для продвижения продуктов на платформе

Цель проекта

Научить продавцов общаться с покупателями и дать возможность запускать грамотную и заметную рекламу магазина и товаров на основе анализа аудитории.

Концепты

Затем, проанализировав общий внейшний вид платформ, их особенности и технические ограничения, которые ставил передо мной Ozon, я двинулась в отрисовку концептов для согласования с заказчиками. Вариантов было много (основных около 11), так как требования выстраивались по ходу работы. 

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

Главной целью было предоставить инструмент не только подготовленным продавцам, но и новичкам, которые никогда не сталкивались с понятием «Сегментация». В итоге мы нащупали вариант, вокруг которого выстраивали основные флоу. Если смотреть на экраны ниже, то самый нижний правый угол приближен к тому, что вы увидите далее и что было воплощено в жизнь. На данный этап было заложено около месяца, в этот дедлайн мы уложились. 

Тестирование 1 на прототипе

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

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

Результаты первичных интервью

Позитивные инсайты:

• Лента активностей нужна для того, чтобы просматривать недавние действия с товарами и оперативно запустить рассылку на горячих покупателей;
  
• Сегментирование аудитории действительно помогает лучше понять своих покупателей;
• Было понятно, как создавать комммуникацию и из каких опций есть выбор.

Негативные инсайты:

• Непонятно, что даёт график по сегментам, не увидели корреляции между запуском коммуникации и ростом числа покупателей;
• Термин «Коммуникация» не совсем ясен, из-за этого были сомнения, а запускать ли что-то вообще, если я не понимаю, что это;
• Наша гипотеза, что, если мы раздробим флоу на небольшие итерации, то коммуникацию будет проще запускать, не подтвердилась. На деле оказалось, что шаги слишком маленькие и их слишком много;
• Хотели бы отталкиваться от цели, для чего я это делаю, а не сразу выбирать аудиторию;
• Сложная настройка аудитории сбила с толку и для новичков будет сложна;
• Не увидели кнопки в верхнем правом углу экрана, постоянно нажимали на кнопку "Отмена" внизу экрана.

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

Тестирование 2 на прототипе

После того, как мы проанализировали комментарии после интервью, согласовали внешний вид и логику со стейкхолдерами пошли во второе, более масштабное исследование. Прошлись по новому флоу с 15 респондентами.

Для этого мы поработали над формулировками, обсудили паттерны работы проблемных компонентов с дизайнерами дизайн–системы, сократили флоу создания коммуникации до 3–х шагов. Большее внимание в этот раз было оказано созданию рассылки или баннера, а не CRM в общем. 

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

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

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

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

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

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

Отображение цлючевого сегмента, Новые покупатели

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

Логика показа ключевого сегмента

1. Показываем Новых, если у продавца мало Постоянных или нет Постоянных, но есть Потенциальные.
2. Показываем Потенциальных, если у продавца нет Постоянных покупателей и мало Новых, когда у него нет ни Постоянных, ни Новых покупателей и когда у него нет Постоянных, но есть Новые.
3. Во всех остальных случаях показываем сегмент Постоянных покупателей. 
   

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

Постоянные покупатели

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

Они делятся на 3 подсегмента:

1. Топ покупателей — тех, кто покупают часто с большой суммой заказа. Для каждого продавца величина этой суммы рассчитывается индивидуально с учетом направленности магазина;
2. Лояльных покупателей — тех, кто покупают регулярно со средней суммой заказа;
3. Рискованных покупателей — тех, кто покупают нерегулярно с небольшой суммой заказа.
   

Топ покупатели

Лояльные покупатели

Рискованные покупатели

Новые покупатели

Новые покупатели — это те, кто купили товар у продавца один раз за последние 90 дней. Данный сегмент не разбивается на подсегменты, однако у него свои метрики и рекомендации.

Потенциальные покупатели

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

Они делятся на 3 подсегмента:

1. Спящих — тех, кто покупали ваши товары более 90 дней назад;
2. На тех, кто интересовались вашими товарами. Это покупатели, которые смотрели, добавляли в корзину или избранное ваши товары, но еще не покупали их за последние 90 дней;
3. И на тех, кто интересовался вашими категорями. Это самый далёкий сегмент, однако не менее важный, потому что именно с таких покупателей начинает зарождаться интерес к товарам и в последствии лояльность. Это те покупатели, которые смотрели и заказывали товары вашей категории за последние 90 дней.

Спящие покупатели

Интересовались вашими товарами

Интересовались вашими категориями

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

По среднему чеку

По географии

По популярным категориям

По возрасту и полу

Выбор цели коммуникации

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

Как мы можем заметить, работа с потенциальными покупателями полностью бесплатная. То есть Озон даёт возможность попробовать систему перед тем, как вкладывать в неё денежные средства. 

Шаг 1: Настройка аудитории

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

Мы даём описание каждого сегмента, если пользователь забыл, что каждый сегмент означает

Я также учла корнер кейсы, к примеру, если в сегменте ещё нет покупателей

Шаг 2: Настройка аудитории

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

1. Предложить скидку (готовая акция или новая);
2. Подарить бонусы;
3. Прорекламировать товар без дополнительных предложений.

Предложение скидки

Скидки в Озоне бывают разные. Можно предложить: 

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

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

Скидка от суммы заказа

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

Скидка по промокоду

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

Беспроцентная рассрочка

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

Предложение бонусов

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

На итоговую стоимость могут влиять внутренние скидки платформы, к примеру: скидка по подпискам Premium и PremiumPlus, единоразовая скидка на рассылку, скидка от объёма и тд. 
В этих настройках можно выбрать разное количество получаетелей и бонусов, срок действия бонусов. 

Рекламирование товара

Если продавец выбирает рекламировать товар, то он автоматически ничего не предлагает, просто напоминает о товаре в заброшенной корзине, или говорит о новинке. 

Шаг 3: Формат коммуникации

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

Баннер

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

Если выбрана любая акция, то мы увидим нередактируемую ссылку на целевую страницу (выбранную акцию) и настройки самого баннера. Сразу показывается прогноз охвата и траты на размещение баннера, а также информация, в каких именно местах данный баннер будет показан.

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

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

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

Если выбрано промотирование товара на 2 шаге, то у продавца появится выбор ссылки на целевую страницу, то есть куда именно он хочет вести с баннера: на конкретный товар, на подборку (к примеру товары на 1 сентября) или на свой магазин, если он хочет продвигать именно его. 

Рассылка

Рассылка в свою очередь работает на все виды коммуникации, что на скидку, что на бонусы. То есть селлер в рассылке может описывать и рекламировать всё, что угодно.

В рассылке можно настроить количество получателей из выбранного на первом шаге сегмента, дату отправки, заголовок и подзаголовок, а также баннер (не обязательный). Важная функция данной страницы не только настройка рассылки, но и предпросмотр, чтобы продавец понимал, как его сообщение будет выглядеть на телефоне в пуше и в чате уведомлений от Озон. По подписке Premium Plus у продавца есть лимит сообщений на месяц. Без подписки этой функцией воспользоваться нельзя.

Подтверждение

После заполнения всех шагов и при нажатии на кнопку на последнем шаге «Отправить на модерацию» открывается дровер, где кратко описаны все выбранные ранее опции, чтобы у продавца была возможность ещё раз проверить данные. Наполнение этого дровера зависит от выбранных ранее опций. К примеру, здесь мы показываем траты на месяц за крутилку баннера.

А здесь мы показываем селлеру количество получателей сообщений, так как выбрана рассылка. Здесь уже нет трат, так как рассылки по подписки бесплатные (25 000 шт в месяц).

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

Пользователь также может отфильтровать по интересующим параметрам: Сегменту, Статусу и Дате отправки. Фильтры на протяжении всей платформы имеют одинаковую логику работы, в данном случае я лишь подстраивала компоненты под конкретный флоу, к примеру, добавила дерево подсегментов в фильтре по сегменту. Изначально дровер такое поведение не поддерживал.

Фильтрация по статусу рассылки

Фильтрация по дате запуска

Фильтрция по сегментам покупателей

Рассылку можно удалить, пока она на модерации, а также повторить, если не хотим заполнять заново все параметры. Для более удобной работы с таблицей я добавила кнопку «Вернуться назад» при скролле и настройки таблицы для управления столбцами.

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

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

Фильтрация предусмотрена по сегменту, действиям покупателей и дате последней рассылке, чтобы не спамить сообщениями одного покупателя.

Сегменты покупателей

Состояния данной страницы зависили в основном от двух вещей: есть сегменты или нет, есть подписка Premium Plus или её нет. Если сегментов не было (каких–то, или всех), то мы ставили эмпти стейты.

Состояние, когда у селлера нет сегментов

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

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

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

Лимит рассылок закончился

Если у пользователя есть подписка Premium Plus, но при этом не осталось рассылок до конца периода, то при нажатии на кнопку «Создать рассылку» всплывает уведомление, в котором мы рассказываем, когда именно лимит обновится и можно будет снова запускать рассылки на пользователей. 

Подсказки

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

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

Если большие числа в динамике, то:

1. Выравниваем динамику по самому длинному значению;
2. Выравниваем значение числа по самому длинному значению;
3. Названия значений в таком случае обрезаются под многоточие;
4. Необходимо добавить нативный тултип с полным названием метрики.

Страницы сегментов

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

Подсказки

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

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

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

Портрет покупателя

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

Графики

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

Ошибка при загрузке данных

Нет покупателей в выбранном сегменте

Подсказки

Пояснений у каждого графика много. С их помощью мы поясняем, на основе каких данных и алгоритмов выстраиваются графики.

Здесь мы, к примеру, рассказываем подробно про охват сегмента

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

Мы также подробно показываем соотношение мужчин и женщин среди покупателей

География

Средний чек

Популярные категории

Создание коммуникации

Это самый масштабный и сложный флоу в данном проекте. Будем разбирать его по шагам.

Шаг с выбором цели

Если нет подписки Premium Plus, то я говорила ранее, что некоторые действия мы заменяем, а некоторые помечаем иконкой премиума. Так вот, сейчас я вам поближе покажу эту иконку и её пояснение в тултипе при ховере.

Если нет сегмента, то мы оставляем кнопку «Сменить сегмент», при нажатии на которую произойдет смена таба на «Увеличивайте базу покупателей», то есть на потенциальных покупателей, так как они есть у селлера почти всегда.

1 Шаг: Выбор аудитории

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

Высота поповера не меняется при переключении табов, чтобы не скакал поповер

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

2 Шаг: Выбор предложения

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

Готовая акция

Не дизейблим кнопку «Далее». Когда селлер пытается на неё нажать при условии, что не выбрал обязательные поля (с *), то подсвечиваем незаполненный обязательный инпут.

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

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

Если при поиске и фильтрации ничего не нашлось. Высоту дровера не меняем

Скидка от суммы

Здесь я покажу вам побольше дропдаунов–контроллов для выбора различных опций на механике скидки от суммы.

Если селлер нажимает на кнопку «Далее», но какое-то обязательное поле не заполнено, то подсвечиваем такие поля. Если селлер меняет что-то в инпуте, он перестаёт быть красным.

Дровер выбора механики акции

Дропдаун выбора даты

Дропдаун выбора размера скидки

Скидка по промокоду

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

Меняем название промокода вручную

Если выбрали рубли в купоне. Информер при нажатии на крестик закрывается на время сессии.

Если селлер нажимает на кнопку Далее, но какое-то обязательное поле не заполнено, то подсвечиваем такие поля.

Тултип пояснения механики содним промокодом на заказ

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

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

Беспроцентная рассрочка

Поле «Максимальный срок рассрочки» сразу заполняется автоматически, его нельзя поменять.

Если селлер нажимает на кнопку «Далее», но какое-то обязательное поле не заполнено, то подсвечиваем такие поля

При наведении на инпут показываем тултип, поясняющий, почему инпут неактивен

Бонусы

500 бонусов предзаполнено автоматически. 14 дней предзаполнено автоматически. Максимальное количество клиентов, которые получат бонусы предзаполнено автоматически (1 000).

Дропдаун выбора срока действия бонусов

Тултип пояснения итоговой стоимости, есть есть влияющие на неё скидки

Иконка айки в инпуте появляется только при состояниях ховер и эктив

Если селлер нажал на «Далее» и обязательные поля не заполнены

Если селлер ввёл больше или меньше значений в количестве баллов

Если селлер ввёл больше или меньше значений в количестве клиентов

3 Шаг: Настройка коммуникации

Состояние, если на 2 шаге выбрали «Скидки». В названии шага — название готовой акции. Ограничиваем длину названия (если слишком длинное) до 320 пкс, потом срезаем текст под многоточие. Тултип показываем на любую акционную подборку.

Если длинное название в подзаголовке шагов

Пример акционной подборки. Генерируется после отправки рассылки или баннера на модерацию.

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

Состояние генерации по всей области вместе с кнопками

Баннер сгенерировался. Храним два последних сгенерированных значения и даём возможность переключаться между ними. Начиная со второго сгенерированного изображения появляется кнопка Назад (иконка стрелочки).

При нажатии на иконку стираем эту генерацию и показываем предыдущую

Тултип с пояснением, что такое прогноз охвата

Тултипы с пояснением бета версии генерации и инпута с необходимой юридической информацией

Поповер с пояснением того, что входит в траты на баннер

Если селлер нажал на кнопку «Далее», но не все обязательные поля заполнены

Если селлер ввёл больше значений, чем предусмотрено

Если пользователь захотел посмотреть своё место баннера на Озон

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

Не получается сгенерировать баннер. Возможно, у вас включён AdBlock

Пользователь ничего не сгенерировал и нажал на кнопку «Отправить на модерацию»

Вид экрана, если селлер хочет загрузить свой баннер

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

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

Тащим файл в область

Баннер загружается

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

Если селлер нажал на кнопку «Далее», но не все обязательные поля заполнены

Вид экрана, если выбрали рассылку

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

Название рассылки в предпросмотре если ничего не заполнено генерируется автоматически

Состояния инпутов (обязательных)

Если название длинное, то при наведении на сам текст, а не на весь блок показываем контекстный тултип

При состоянии Ховер показываем иконку инфо. При наведеии на неё — тултип, поясняющий количество получателей

При состоянии Ховер показываем иконку инфо. При наведеии на неё — тултип, поясняющий когда сможем отправить рассылку, а когда нет

Тултип, поясняющий, что количество получателей может поменять и по какой причине

Открытие памятки по написанию текста

Если селлер нажал на кнопку «Далее», но не все обязательные поля заполнены. Ограничения по минимальной длине заголовка нет, можно не вводить ничего вообще, можно ввести хоть один символ, ошибкой это не будет. Есть только максимум. Минимальное ограничение по тексту сообщения есть — 10 символов.

Набрали больше символов, чем отводится

Если дата отправки рассылки позднее чем дата окончания акции

Если набрали меньше символов в тексте сообщения

Если загрузили файл больше 10 MB

Если загрузили некорректное разрешение изображения

Если это селлер не Premium Plus, то отправить рассылку нельзя. Появляется заглушка с предложением сделать медийку или отправить бонусы шаблонно

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

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

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

Когда дизейблим даты в прошлом и когда Ozon исчерпал лимит рассылок в день (з млн)

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

Если уже заполнили 2 и 3 шаги, но потом вернулись на 2 шаг в акциях и поменяли акцию, теперь даты её действия поменялись 

Когда есть подписка, но селлер израсходовал лимит сообщений в месяц

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

Если хотим вести на товар и открываем список доступных товаров

Фильтр по категории 

Если при поиске и фильтрации ничего не нашлось. Высоту дровера не меняем

Если хотим вести не на товар, а на подборку товаров и хотим выбрать подборку из доступных

Правило с выбранной опцией работает на все дроверы — не показываем выбранную строку при поиске и фильтрации, если её нет в списке

Закрепляем при скролле поиск, вертикальный скролл только в таблице

Состояние когда нет готовых подборок

Выбрали бонусы и ведём на витрину магазина

Дровер подтверждения

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

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

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

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

Если селлер выбрал отправить рассылку сообщений и предложить клиентам скидку

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

Если селлер выбрал отправить рассылку сообщений и отрекламировать товар без усиления

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

Если селлер выбрал отправить рассылку сообщений и отрекламировать витрину магазина без усиления

После того, как в дровере нажали на кнопку «Отправить на модерацию», открываем в этом же окне страницу со всеми рассылками и показываем нотификацию, что рассылка успешно создана и отправлена на модерацию

Правила поведения шагов наверху страницы

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

Текущий шаг, первый заход. На всех шагах если селлер ещё не нажимал кнопку «Далее» и не сохранял выбранную опцию, пишем
«Не заполнено». Следующие шаги не кликабельные.

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

Если в таком случае текущий шаг остался незаполненным (селлер не нажал «Далее»), то у него остаётся подпись «Не заполнено» и на него можно переключиться как через кнопку «Далее», так и через нажатие на шаг

Если мы всё таки решили пока не отправлять коммуникацию на модерацию и в последнем дровере нажали «Отмена», то попадаем на 3 заполненный шаг

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

Правая часть при скролле также закрепляется на расстоянии 32 пкс от закреплённых шагов и скроллится только левая часть контента

Лоадеры

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

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

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

Это в случае, если долго грузится контент при открытии дровера

Это в случае, если выбрали фильтр и подгружаются данные в таблице

Страница рассылок

По умолчанию показываем по 50 строк. Ссылки при наведении на строку подсвечиваем синим цветом.

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

1. Скидка №% от суммы заказа № ₽ на все товары с 29.08.2024 по 15.09.2024;
2. Купон на скидку № ₽ или №% по промокоду с 29.08.2024 по 15.09.2024;
3. Беспроцентная рассрочка с 29.08.2024 по 15.09.2024;
4. Бонусы № бонусов на каждого из № клиентов;
5. Без скидок и бонусов.

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

1. Название акционной подборки;
2. Товар и его SKU;
3. Название подборки;
4. На витрину магазина.
   

Копирование кликом на текст

Не обязательно наводить на иконку, можно кликнуть на текст артикула или SKU — значение скопируется, а иконка сменится на состояние «Скопировано». Хитзоны:

При нажатии на иконку происходит следующее:

1. Иконка копирования заменяется на галочку;
2. Показываем уведомление, что артикул скопирован;
3. Галочка меняется обратно на иконку копирования как только мы убираем с неё курсор.
   

Если нажали на иконку копирования или на всю строку с СКУ и СКУ скопировался, показываем уведомление.

Закрепление хедера таблицы при вертикальном скролле

Когда таблица занимает весь вьюпорт, при скролле добавляем кнопку «Вернуться наверх». При нажатии на неё перемещаем в начало таблицы. Она показывается, когда пользователь не скроллит 3 сек. При скролле кнопка пропадает.

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

Когда долистали до низа таблицы (до пагинации), скролл начинает закрепляться не снизу страницы, а снизу таблицы

Когда нет данных

Когда ничего не нашли в фильтрах (независимо от таба)

Ошибка на сервере

Настройки таблицы

Когда таблица занимает весь вьюпорт, при скролле добавляем кнопку «Вернуться наверх». При нажатии на неё перемещаем в начало таблицы. Она показывается, когда пользователь не скроллит 3 сек. При скролле кнопка пропадает.

В настройке таблицы можно управлять отображением столбцов:

1. Отключение — если привести чекбокс в неактивное состояние, то столбец пропадает из таблицы, сразу после того, как пользователь выйдет из настроек таблицы;
2. Включение — аналогично отключению.

Кнопка «Вернуть по умолчанию» — возвращает все позиции в дефолтное положение и состояние. Высота дропдауна фиксированная — 584 рх. Есть нативный скролл. Кнопку «Вернуть по умолчанию» закрепляем при скролле, показываем только тогда,
когда настройки отличаются от установленных по умолчанию.

Фильтры

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

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

Список покупателей

В таблице отображаются только те клиенты, которые совершили хотя бы 1 покупку. По умолчанию показываем 50 строк в таблице.

Фильтры

В данной таблице фильтры работают также, как и на странице с срассылками. Та же логика с тегами и отведённым для фильтров местом во фрейме.

Средний чек. Если пользователь не нажал на кнопку «Применить» в дропдауне, выбранные опции не применятся.

Действия покупателей. В исходном состоянии всегда 1 товар. Его можно поменять вручную при повторном заходе опять меняем на 1. 

Открыли дропдаун по действиям покупателей

Опции дропдауна настройки действий с товаром

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

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

Последняя коммуникация. Максимальный период не более 3 месяцев назад. Все более ранние даты дизейблим

Добавление выборочной очистки фильтров. Ограничиваем вывод выбранных тегов 2 строками. Если все теги не умещаются в 2 строки — ограничиваем их число и в конце строки делаем кнопку «Показать ещё» с разворачиванием всех фильтров.

Пока что нет покупателей

Когда по фильтрам или в поиске ничего не найдено

Если не загрузились данные

Всё доступно, селлер не заблокирован и прошёл верификацию

Всё доступно, селлер не заблокирован и прошёл верификацию, но конкретный покупатель заблокировал селлера

При наведении на ячейку рассказываем, почему чат заблокирован

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

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

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

Селлеру заблокировал возможность написать антифрод. Кнопок написать нет. В этом случае ничего не поясняем, просто нет кнопок. Правая часть не стикается.

На этом всё

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

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

ANASTASIA VIKHAREVA

Dribble

Medium

VC.ru

Habr.articles

Are.na

Behance

Habr.career

LinkedIn