Активно ищу работу

Facebook
Shape 01
Facebook
Shape 01
instagram
Shape 01

Активно ищу работу

Facebook
Shape 01
Facebook
Shape 01
instagram
Shape 01

Упрощение paywall re:Kassa

Hero Image

Category:

Product Design

Client:

re:Kassa

Введение

В этом кейсе я работал над упрощением paywall в Рекассе.

Цель: сделать сценарий покупки подписки понятнее и повысить конверсию в успешную оплату.

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

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

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


Проблема

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

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

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

Из анализа старого сценария было видно, что пользователи:

  • Не понимают, какую конкретную ценность даёт подписка для их типа бизнеса.

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

  • Не понимают, где находится раздел «Мои подписки».

  • Сталкиваются с неясными условиями оплаты и подписки.

  • Теряются при переходе из приложения в браузер.

  • Не понимают, на каком этапе сценария находятся и что нужно сделать дальше.

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

Проблема

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


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


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


Из анализа старого сценария было видно, что пользователи:

  • Не понимают, какую конкретную ценность даёт подписка для их типа бизнеса.

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

  • Не понимают, где находится раздел «Мои подписки».

  • Сталкиваются с неясными условиями оплаты и подписки.

  • Теряются при переходе из приложения в браузер.

  • Не понимают, на каком этапе сценария находятся и что нужно сделать дальше.


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

Проблема

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

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

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

Из анализа старого сценария было видно, что пользователи:

  • Не понимают, какую конкретную ценность даёт подписка для их типа бизнеса.

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

  • Не понимают, где находится раздел «Мои подписки».

  • Сталкиваются с неясными условиями оплаты и подписки.

  • Теряются при переходе из приложения в браузер.

  • Не понимают, на каком этапе сценария находятся и что нужно сделать дальше.

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

Исследование и анализ

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


На этом этапе я зафиксировал проблемные точки прямо на экранах, чтобы дальше работать не с общим ощущением, а с конкретными местами в интерфейсе: вход в подписку, появление paywall, поиск раздела «Мои подписки» и переход к платёжным методам.


Ниже показан полный разбор старого сценария с отмеченными проблемными местами.

Исследование и анализ

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


На этом этапе я зафиксировал проблемные точки прямо на экранах, чтобы дальше работать не с общим ощущением, а с конкретными местами в интерфейсе: вход в подписку, появление paywall, поиск раздела «Мои подписки» и переход к платёжным методам.


Ниже показан полный разбор старого сценария с отмеченными проблемными местами.

Исследование и анализ

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


На этом этапе я зафиксировал проблемные точки прямо на экранах, чтобы дальше работать не с общим ощущением, а с конкретными местами в интерфейсе: вход в подписку, появление paywall, поиск раздела «Мои подписки» и переход к платёжным методам.


Ниже показан полный разбор старого сценария с отмеченными проблемными местами.

Бенчмаркинг конкурентов

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


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


В процессе анализа я обращал внимание на несколько вещей:

  • где пользователь впервые видит платный функционал;

  • как объясняется ценность подписки;

  • как устроен выбор тарифа;

  • есть ли акцент на выгоде при выборе длительного периода;

  • как выглядит переход к оплате;

  • какие состояния показываются после покупки.


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


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


Смотреть в Figma

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


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


В процессе анализа я обращал внимание на несколько вещей:


  • где пользователь впервые видит платный функционал;

  • как объясняется ценность ;

  • как устроен выбор тарифа;

  • есть ли акцент на выгоде при выборе длительного периода;

  • как выглядит переход к оплате;

  • какие состояния показываются после покупки.


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


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


Смотреть в Figma

Гипотезы и ICE Score

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

User Flow

После скоринга гипотез я собрал новый User Flow. Нужно было продумать не только сам paywall, но и весь путь пользователя: от первого контакта с платной функцией до активной подписки.


В новом сценарии я оставил два входа в покупку подписки:


  1. С главного экрана: пользователь переходит в личный кабинет, видит раздел «Мои подписки» и открывает экран выбора тарифа.


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


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


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

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

User Flow

После скоринга гипотез я собрал новый User Flow. Нужно было продумать не только сам paywall, но и весь путь пользователя: от первого контакта с платной функцией до активной подписки.


В новом сценарии я оставил два входа в покупку подписки:


  1. С главного экрана: пользователь переходит в личный кабинет, видит раздел «Мои подписки» и открывает экран выбора тарифа.


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


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


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

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

User Flow

После скоринга гипотез я собрал новый User Flow. Нужно было продумать не только сам paywall, но и весь путь пользователя: от первого контакта с платной функцией до активной подписки.


В новом сценарии я оставил два входа в покупку подписки:


  1. С главного экрана: пользователь переходит в личный кабинет, видит раздел «Мои подписки» и открывает экран выбора тарифа.


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


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


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

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

Wireframes

После User Flow я перешёл к wireframes, чтобы проверить структуру ключевых экранов до работы над визуалом.


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


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


После этого я перешёл к детализации текстов, состояний и финального UI


Смотреть в Figma

Wireframes

После User Flow я перешёл к wireframes, чтобы проверить структуру ключевых экранов до работы над визуалом.


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


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


После этого я перешёл к детализации текстов, состояний и финального UI


Смотреть в Figma

Wireframes

После User Flow я перешёл к wireframes, чтобы проверить структуру ключевых экранов до работы над визуалом.


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


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


После этого я перешёл к детализации текстов, состояний и финального UI


Смотреть в Figma

Hi-Fi

После проверки структуры в wireframes я перешёл к финальным экранам.


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


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


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

Hi-Fi

После проверки структуры в wireframes я перешёл к финальным экранам.


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


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


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

Hi-Fi

После проверки структуры в wireframes я перешёл к финальным экранам.


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


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


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

Юзабилити тестирование

После сборки hi-fi экранов я провёл usability-тестирование, чтобы проверить понятность сценария покупки подписки.


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


Формат: удалённое интервью по кликабельному прототипу в Figma, 20-25 минут на одного респондента.


Я проверял 7 задач: найти подписку, понять платные функции, перейти к paywall, разобраться в составе подписки, выбрать тариф, перейти к оплате и понять статус после покупки.


Всего получилось 105 пользовательских действий. Успешно выполнено 91 действие. Общая успешность сценария составила 87%.


Ключевые результаты:

15 из 15 нашли раздел «Мои подписки».

13 из 15 заметили платные функции в калькуляторе.

12 из 15 поняли состав подписки.

13 из 15 выбрали тариф без дополнительных вопросов.

10 из 15 сразу поняли переход к оплате.

13 из 15 поняли, что подписка активна после оплаты.


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

Юзабилити тестирование

После сборки hi-fi экранов я провёл usability-тестирование, чтобы проверить понятность сценария покупки подписки.


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


Формат: удалённое интервью по кликабельному прототипу в Figma, 20-25 минут на одного респондента.


Я проверял 7 задач: найти подписку, понять платные функции, перейти к paywall, разобраться в составе подписки, выбрать тариф, перейти к оплате и понять статус после покупки.


Всего получилось 105 пользовательских действий. Успешно выполнено 91 действие. Общая успешность сценария составила 87%.


Ключевые результаты:

15 из 15 нашли раздел «Мои подписки».

13 из 15 заметили платные функции в калькуляторе.

12 из 15 поняли состав подписки.

13 из 15 выбрали тариф без дополнительных вопросов.

10 из 15 сразу поняли переход к оплате.

13 из 15 поняли, что подписка активна после оплаты.


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

Юзабилити тестирование

После сборки hi-fi экранов я провёл usability-тестирование, чтобы проверить понятность сценария покупки подписки.


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


Формат: удалённое интервью по кликабельному прототипу в Figma, 20-25 минут на одного респондента.


Я проверял 7 задач: найти подписку, понять платные функции, перейти к paywall, разобраться в составе подписки, выбрать тариф, перейти к оплате и понять статус после покупки.


Всего получилось 105 пользовательских действий. Успешно выполнено 91 действие. Общая успешность сценария составила 87%.


Ключевые результаты:

15 из 15 нашли раздел «Мои подписки».

13 из 15 заметили платные функции в калькуляторе.

12 из 15 поняли состав подписки.

13 из 15 выбрали тариф без дополнительных вопросов.

10 из 15 сразу поняли переход к оплате.

13 из 15 поняли, что подписка активна после оплаты.


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

Результат

Результат


  • Paywall View: 42,3 тыс. → 44,1 тыс.

  • Start Checkout: 18,4% → 24,7%

  • Purchase Success: 9,8% → 14,1%

В результате изменений удалось улучшить ключевые показатели воронки. Число просмотров paywall выросло с 1,34 тыс. до 1,80 тыс., что соответствует приросту на 34,3%. Конверсия на этапе Start Checkout увеличилась с 12,8% до 15,1% (+17,6%), а Purchase Success — с 6,7% до 8,3% (+23,9%).


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

Create a free website with Framer, the website builder loved by startups, designers and agencies.