донат-сервис для стримеров: приём донатов, интерактивные алерты и инструменты монетизации для авторов. Я спроектировал модуль создания и настройки алертов
Модуль создания алертов — это инструмент для стримера, который позволяет создать оповещение на донат, настроить его внешний вид (текст, звук, анимацию, длительность показа) и сразу увидеть, как он будет выглядеть в эфире без отдельного тестового доната
Работал в связке с фаундером-разработчиком: разбирал существующие решения на рынке (DonationAlerts, DonatePay, etc..), собирал требования и продумывал, как сделать настройку алерта проще и нагляднее, чем у конкурентов
Спроектировал весь флоу целиком: от создания алерта до его редактирования и предпросмотра результата. Фокус — сократить путь от настройки до оценки результата: у конкурентов это требовало ухода на отдельный экран / тестирования с помощью реального доната для проверки, я сделал предпросмотр частью самой настройки
До проектирования разобрал существующие сценарии настройки алертов в DonationAlerts и DonatePay: где начинается создание, как устроена структура настроек, когда пользователь видит результат и какие действия приходится делать для проверки
На основе разбора собрал основные точки, в которых сценарий можно упростить: выбор события, последовательность настройки и проверка результата. Дальше переводил их в прототипы и обсуждал с разработчиком до того, как уходить в детальный UI
Работали в формате стартапа: короткие циклы разработки, груминги по ходу работы и постоянная связка с фаундером-разработчиком. Я заранее собирал и прорабатывал сценарии, чтобы к обсуждению разработки уже было понятно, что именно и зачем мы делаем
Параллельно показывал прототипы стримерам и просил выполнить конкретные задачи. Одной из задач было создать оповещение о донате 500 ₽. Смотрел, где человек останавливается, с чем пытается взаимодействовать и какие вопросы возникают. По результатам менял структуру сценария и повторно проверял решения
Собрал двухуровневую навигацию и начал создание с выбора типа оповещения
Основная навигация отвечает за контекст продукта, второй уровень — за конкретный тип инструмента внутри него. Это позволяет не смешивать разные сценарии в одном меню и при этом оставлять их доступными из одного места
В первой версии для создания алерта нужно было сначала открыть группу «Донаты», и стримеры терялись на этом шаге. Теперь создание начинается с кнопки «Создать оповещение», а тип выбирается внутри
Экран выбора сценария наполнен 3 категориями: донаты, подписки и новые зрители. До выбора основная область не перегружена настройками — вместо них маскот объясняет, что набор доступных параметров зависит от выбранного типа оповещения. Получается последовательный сценарий: сначала выбрать, что настраиваем — затем работать только с релевантными настройками
Экран выбора сценария наполнен 3 категориями: донаты, подписки и новые зрители. До выбора основная область не перегружена настройками — вместо них маскот объясняет, что набор доступных параметров зависит от выбранного типа оповещения. Получается последовательный сценарий: сначала выбрать,
что настраиваем — затем работать только с релевантными настройками
Собрал единую систему настроек для разных типов параметров
Настройки разделены по уровню важности: сначала параметры, необходимые для работы оповещения, затем его внешний вид и только после — расширенные возможности
Вместо одинаковых полей для всех настроек каждому типу параметра подобрал свой способ взаимодействия: числовые значения меняются степпером, варианты — через селекты и переключатели, порядок элементов — непосредственно внутри шаблона, а медиа настраивается через отдельные сценарии
Подробнее о состояниях контролов и их системе — в кейсе про дизайн-систему
Добавил поиск по настройкам как отдельную функцию
В модуле много настроек: текст, звук, анимация, длительность показа, цвета, GIF. Поиск позволяет сразу найти нужный параметр по названию, а не искать его по разделам. У конкурентов такой функции нет, это отдельное отличие модуля
Добавил предпросмотр, чтобы проверять результат без запуска тестового доната
Предпросмотр вынес в отдельный переключатель и сделал доступным из любой части настроек. Пользователь может открыть его в нужный момент и сразу увидеть, как изменились текст, размеры, цвета, GIF или анимация
При этом предпросмотр не занимает рабочую область постоянно: большая часть настроек не требует визуальной проверки, поэтому он появляется только по запросу. Это позволяет редактировать параметры и сразу оценивать результат, не выходя из сценария настройки
Проработал пустые состояния и загрузку: «ничего не найдено», скелетон-лоадеры и другие
Для настройки GIF, изображений и звуков спроектировал отдельные медиатеки
Состояния всех типов переключателей и контролов собраны в дизайн-систему
Цифры по пользователям продукта и по тестам с 8 стримерами
В первой версии без вопросов прошли только 4 из 8 стримеров, на шаге с группой «Донаты» люди терялись. Сейчас 98% пользователей самостоятельно доходят до создания первого алерта, а остальные задают вопросы по ходу. На главной после карточек «Донаты / Подписки / Новые зрители» стримеры понимали, зачем экран и что делать дальше
Настройки разделены по важности, а каждый тип параметра получил свой контрол. При первичной настройке пользователи в основном идут по заготовленному флоу. Оповещение на основе существующего создаётся за 7 минут вместо 12: чаще всего меняют сумму, подбирают новые GIF и звук
Поиском пользуются в 80% случаев при редактировании и создании оповещения на основе существующего. При первичной настройке он нужен в основном чтобы вернуться и поправить параметр, о котором вспомнили в конце
При создании первого алерта предпросмотр используют 95% пользователей. Позже реже: базовые настройки текста почти не меняют, а при замене только GIF или звука проверка нужна не всегда
Путь до проверки результата. У конкурентов предпросмотр открывается отдельно, на гринскрине, и его нужно держать открытым в момент запуска. В моём решении его можно включить уже на этапе добавления вариации