Как я упростила сложную систему подписок для артистов и их аудитории для SaaS продукта
Система подписки для платформы независимых артистов. Две роли, две разные задачи: артист создает тарифы подписки, а фанат выбирает тарифный план. Мне пришлось разобраться с ценообразованием, чтобы ни одна из сторон не запуталась.
О проекте
UX/UI дизайнер
→ Все флоу и состояния системы подписок
→ Paywall и развилка доступа к контенту
→ Разбор аналогов (Patreon, Boosty, стриминги)
→ Компоненты дизайн-системы web → mobile
→ Прямая коммуникация с клиентом
Проблема
У артиста и у фаната разные задачи. Артисту — собрать тиры и не запутаться. Фанату — выбрать план без трудностей. Одно решение на двоих не работает, систему нужно было разделить по контексту.
Вызовы
Посмотрела, как задачу решают платформы с подписками
Перед проектированием paywall я изучила, как аналогичные задачи решают Patreon, Boosty и стриминговые сервисы. Меня интересовали паттерны: как пользователю предлагают выбрать период оплаты, как объясняют выгоду долгосрочной подписки и как разделяют бесплатный и платный контент.
Что оставила ✅
Переключатель периода оплаты выносят отдельным контролом наверх, а скидку за длинный срок подсвечивают прямо на нём. Это позволяет не плодить отдельную карточку под каждую комбинацию.
От чего отказалась ❌
Сравнительные таблицы «что входит в тир», как у стримингов. У нас доступ к контенту артист настраивает сам в отдельном модуле manage access — тир здесь про уровень доступа, а перечень доступных фич, которые пользователю не нужны
Артист · Создаёт тиры
Понимание продукта
Список тарифов и процесс создания тарифа — это две разные вещи с точки зрения архитектуры, поэтому я с самого начала разделила эти флоу по методологии JBTD. В списке представлены все тарифы с ценами на четыре периода, количеством подписчиков и статусом.
Список тиров. Четыре периода оплаты читаются в одну строку, на карточке — статус и подписчики. Артист видит всю свою монетизацию сразу, без ухода в каждый тир
Заложенное ограничение дизайном. Вместо дополнительных на дубли постфактум система вообще не даёт их создать: артист обязан выбрать уровень тира, а занятые уровни не предлагаются. Двух одинаковых тиров просто не может получиться. Флоу ведёт по шагам, а не оставляет артиста наедине с продуктом.
Фанат · Выбирает тариф
Период — единый переключатель, тиры — сетка
Здесь пригодилось то, что я подсмотрела у Patreon и стримингов. Вместо 24 отдельных карточек период вынесла наверх единым переключателем со скидками, а тиры оставила карточками в сетке. Фанат сначала выбирает период, потом сравнивает тиры внутри срока
Paywall. 24 комбинации свернулись в 6 карточек + выбор периода. Выгода длинной подписки подсвечена на переключателе, состояния тиров (активный / доступный / отмена) читаются с одного взгляда.
Гибкий доступ. К отдельному контенту — развилка: разовая покупка (OTP) или апгрейд тира. Фанат выбирает сам, как он получит доступ к контенту вместо единственного сценария «плати за подписку»
Дизайн-система
Адаптируемые компоненты для веба и мобилки
Общая дизайн-система от веба к мобилке. Переиспользуемые компоненты и единые правила, чтобы платформа была едина на всех девайсах
Результаты
600+
экранов и состояний
26
покрыто сценариев
5 мес
длительность проекта
Гибкий доступ (разовая покупка или обновление) призван снизить порог вхождения и обеспечить доход от фанатов, которые пока не готовы оформить подписку,
Понятная настройка уровней призвана помочь артистам завершить создание уровня и начать монетизацию, а не бросить все на полпути,
Акцент на преимуществах более длительных периодов призван подтолкнуть пользователей к выбору планов на 6–12 месяцев.