re:Kassa Сложный paywall

Category:

Product design

Client:

re:Kassa

The Challenge

Design Pulse envisioned a platform that could pulse with creativity—merging editorial-style layouts with immersive design storytelling. The challenge was to balance expressive visual design with a clear, structured presentation of content.

The Solution

We approached the project with a focus on visual rhythm and hierarchy. Gridded layouts, layered imagery, and smooth motion transitions were combined to give life to the content. The interface was refined to feel editorial yet distinctly digital.

The Result

The final experience captured the essence of creative momentum, earning recognition from design communities and driving more collaboration requests from agencies and creators worldwide.

Спойлер: Влияние на метрики

Проблема

На этапе выбора способа оплаты обнаружилось «бутылочное горлышко» — значительное снижение конверсии с шага выбора оплаты до фактической оплаты. За месяц в Яндекс Метрике мы увидели, что провал конверсии на этом шаге составляет 80.27% (если выражаем разницу как процент от конверсии на этапе).

Проблема

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

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

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

Ревью, CJM, HeatMap

Выводы ревью экрана:

На мобильной версии приходится скроллить до этапа реги/покупки.
Кнопки для авторизации через OpenAuth-сервисы (Google и VK) расположены ниже основной кнопки продолжения и могут остаться незамеченными, что снижает удобство выбора авторизации. Кнопка VK задисейблена, что вызывает дополнительные вопросы
Текст кнопки «Продолжить» не отражает следующий шаг, что может создавать неопределенность для пользователей, не зная, что их ожидает при нажатии
Опция «Карты российских банков» выглядит слишком обобщенно без иконок карт (Visa, MasterCard, МИР), что может снизить доверие и привлекательность выбора способа оплаты
Способ оплаты всего один

CJM (старый сценарий)

Первым шагом был составлен CJM проблемного сценария для мобильной и десктопной версий.

CJM (старый сценарий)

Первым шагом был составлен CJM проблемного сценария для мобильной и десктопной версий.

CJM (старый сценарий)

Первым шагом был составлен CJM проблемного сценария для мобильной и десктопной версий.

IF CaseStudy Flow покупки

Комментарии прикреплены к каждому экрану стикером

IF CaseStudy Flow покупки

Комментарии прикреплены к каждому экрану стикером

IF CaseStudy Flow покупки

Комментарии прикреплены к каждому экрану стикером

HeatMap

Mobile Version

Выводы ревью экрана:

На мобильной версии приходится скроллить до этапа реги/покупки.
Кнопки для авторизации через OpenAuth-сервисы (Google и VK) расположены ниже основной кнопки продолжения и могут остаться незамеченными, что снижает удобство выбора авторизации. Кнопка VK задисейблена, что вызывает дополнительные вопросы
Текст кнопки «Продолжить» не отражает следующий шаг, что может создавать неопределенность для пользователей, не зная, что их ожидает при нажатии
Опция «Карты российских банков» выглядит слишком обобщенно без иконок карт (Visa, MasterCard, МИР), что может снизить доверие и привлекательность выбора способа оплаты
Способ оплаты всего один

Итого. Выводы этапа:

Коды подтверждения приходили с задержкой или вообще не приходили.

По тепловой карте видно что мало пользователей кликает на гугл авторизацию. К сожалению есть только тепловая карта, аналитика у нас здесь не собирается:(
Многие пользователи сбивались с процесса и уходили на экран «Вход».
Всего один способ оплаты, и тот выглядит обобщенно, без иконок карт (Visa, MasterCard, МИР), что может снизить доверие и привлекательность выбора способа оплаты.
Найден баг, код который введен со второй попытки является невалидным (сразу передал разработчикам).
Не очевидно что произойдет по клику на кнопку “Продолжить” на странице выбора оплаты.

Итого. Выводы этапа:

Коды подтверждения приходили с задержкой или вообще не приходили.

По тепловой карте видно что мало пользователей кликает на гугл авторизацию. К сожалению есть только тепловая карта, аналитика у нас здесь не собирается:(
Многие пользователи сбивались с процесса и уходили на экран «Вход».
Всего один способ оплаты, и тот выглядит обобщенно, без иконок карт (Visa, MasterCard, МИР), что может снизить доверие и привлекательность выбора способа оплаты.
Найден баг, код который введен со второй попытки является невалидным (сразу передал разработчикам).
Не очевидно что произойдет по клику на кнопку “Продолжить” на странице выбора оплаты.

Итого. Выводы этапа:

Коды подтверждения приходили с задержкой или вообще не приходили.

По тепловой карте видно что мало пользователей кликает на гугл авторизацию. К сожалению есть только тепловая карта, аналитика у нас здесь не собирается:(
Многие пользователи сбивались с процесса и уходили на экран «Вход».
Всего один способ оплаты, и тот выглядит обобщенно, без иконок карт (Visa, MasterCard, МИР), что может снизить доверие и привлекательность выбора способа оплаты.
Найден баг, код который введен со второй попытки является невалидным (сразу передал разработчикам).
Не очевидно что произойдет по клику на кнопку “Продолжить” на странице выбора оплаты.

Юзабилити-тестирование текущего сценария

В рамках юзабилити-тестирования я решил проверить весь сценарий: от Главного лендинга до Страницы оплаты и перехода в Личный кабинет. Цель тестирования заключалась в том чтобы определить, где пользователи сталкиваются с трудн,остями и на каких этапахони могут прерывать процесс.

Юзабилити-тестирование текущего сценария

Прошлый опыт

Результат юзабилити-теста

Выводы:

4 из 5 респондентов негативно отреагировали на отсутствие возможности ознакомиться с продуктом перед оплатой полной стоимости подписки.
1 из 5 респондентов заметил гугл-авторизацию.
Всем респондентам коды приходили с задержкой и падали в папку “спам” или в раздел “промоакции”.
Одного из респондентов смутило что нужно регистрировать аккаунт прям под выбором способа оплаты, отметил такой паттерн непривычным.
Некоторые респонденты отметили что не хватает способов оплат, в частности карт зарубежных банков.
Респонденты ожидают увидеть знакомые способы оплаты (или их значки), хотят сразу выбрать СБП или сберпэй, или понимать что они их ожидают на следующем этапе.
Один респондент начал нажимать на фоновые цифры (бэкграунд-текстура), думая что они кликабельные.

Выводы:

4 из 5 респондентов негативно отреагировали на отсутствие возможности ознакомиться с продуктом перед оплатой полной стоимости подписки.
1 из 5 респондентов заметил гугл-авторизацию.
Всем респондентам коды приходили с задержкой и падали в папку “спам” или в раздел “промоакции”.
Одного из респондентов смутило что нужно регистрировать аккаунт прям под выбором способа оплаты, отметил такой паттерн непривычным.
Некоторые респонденты отметили что не хватает способов оплат, в частности карт зарубежных банков.
Респонденты ожидают увидеть знакомые способы оплаты (или их значки), хотят сразу выбрать СБП или сберпэй, или понимать что они их ожидают на следующем этапе.
Один респондент начал нажимать на фоновые цифры (бэкграунд-текстура), думая что они кликабельные.

Коммуникация с другими отделами

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

С командой маркетинга и отделом продаж погенерили варианты улучшения сценария:
1. Если пользователь оставит свой номер телефона на первом этапе, команда по работе с клиентами сможет связаться с ним для продажи подписки и предложения маркетингового бонуса. Это поможет увеличить возвращаемость пользователя в сценарий.
2. После получения E-mail пользователя можно возвращать его в сценарий с помощью рассылки писем. Например отправлять письма через час, затем через день и через три дня.

Коммуникация с другими отделами

С командой маркетинга и отделом продаж погенерили варианты улучшения сценария:
1. Если пользователь оставит свой номер телефона на первом этапе, команда по работе с клиентами сможет связаться с ним для продажи подписки и предложения маркетингового бонуса. Это поможет увеличить возвращаемость пользователя в сценарий.
2. После получения E-mail пользователя можно возвращать его в сценарий с помощью рассылки писем. Например отправлять письма через час, затем через день и через три дня.

Коммуникация с другими отделами

С командой маркетинга и отделом продаж погенерили варианты улучшения сценария:
1. Если пользователь оставит свой номер телефона на первом этапе, команда по работе с клиентами сможет связаться с ним для продажи подписки и предложения маркетингового бонуса. Это поможет увеличить возвращаемость пользователя в сценарий.
2. После получения E-mail пользователя можно возвращать его в сценарий с помощью рассылки писем. Например отправлять письма через час, затем через день и через три дня.

Бенчмаркинг

Цели бенчмаркинга:

— Подсмотреть, как конкуренты решают схожие задачи, и выделить сильные и слабые стороны.

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

Бенчмаркинг

Цели бенчмаркинга:

— Подсмотреть, как конкуренты решают схожие задачи, и выделить сильные и слабые стороны.

Бенчмаркинг

Цели бенчмаркинга:

— Подсмотреть, как конкуренты решают схожие задачи, и выделить сильные и слабые стороны.

IF CaseStudy Flow покупки

Выводы бенчмаркинга:

Предоставление бесплатного доступа перед покупкой: Многие пользователи не готовы платить за продукт, не попробовав его функциональность заранее. Большинство сервисов, особенно в магазинах приложений, используют модель freemium или предлагают бесплатный пробный период. Они работают по принципу soft-paywall, позволяя пользователям ознакомиться с продуктом перед оплатой. Согласно модели AARRR (Acquisition, Activation, Retention, Revenue, Referral), после активации пользователя сервисы предлагают перейти на платную версию, что повышает конверсию и лояльность.
Использование социального доказательства в онбординге: В процессе онбординга или на странице входа эффективно подсветить элементы социального доказательства (social proof), такие как отзывы пользователей, рейтинги или количество скачиваний. Это повышает доверие к сервису и стимулирует новых пользователей к регистрации.
Приоритетность OpenAuth-сервисов для быстрой авторизации. Многие сервисы выносят кнопки для авторизации через OpenAuth (например, Google, VK) наверх, делая их легко заметными и доступными. Такой приоритет упрощает вход для пользователей и ускоряет процесс регистрации, снижая трение на пути к покупке.
Нужно показывать пользователю прозрачный путь списания, в случае если мы даем пользователю тестовый период попользоваться подпиской
Перед самим чекаутом можно дополнительно напомнить о том, что пользователь получит после покупки подписки.
Внедрение функции семейной подписки позволяет пользователям подключать близких к своему аккаунту. Это способствует формированию дополнительной мотивации продления подписки, так как пользователи ощущают ответственность за доступ для своих близких.

Вывел и оценил гипотезы

Гипотеза	Метрика	Приоритет
Переход платформы на soft-paywall модель. Если предоставить пользователям возможность предварительно ознакомиться с продуктом через бесплатный доступ, это увеличит их готовность к оплате и повысит конверсию	CR	3 / 3 = 1
Поднятие OpenAuth-сервисов в интерфейсе авторизации. Повышение видимости OpenAuth-сервисов для упрощения регистрации и ускорения процесса покупки	Time to complete	3 / 1 = 3
Упрощение интерфейса на этапе оплаты. Оптимизация элементов на экране оплаты для упрощения процесса, чтобы пользователи могли быстрее и легче завершать покупку	Time to complete, CR	2 / 1 = 2
Ретаргетинг через звонок отдела продаж. Если пользователь оставляет номер телефона и имя на первом этапе, но покидает сценарий покупки, отдел продаж может связаться с ним и вернуть его в сценарий для завершения покупки	User return CR	3 / 2 = 1.5
Ретаргетинг через email-рассылки. Если пользователь оставил email при регистрации, рассылки с маркетинговыми предложениями и напоминаниями помогут вернуть его в сценарий и завершить покупку	User return CR	3 / 2 = 1.5
Использование таймера для промокодов. Добавление таймера для активных промокодов, чтобы стимулировать пользователей завершить покупку быстрее	CR	2 / 3 ≈ 0.67
Внедрение социального доказательства на этапе оплаты. Подсветка отзывов и рейтингов на экране для повышения доверия пользователей и мотивации к покупке	CR	2 / 2 = 1
Внедрение FAQ на этапе оплаты. Если добавить блок FAQ на этапе оплаты, это поможет пользователям быстро найти ответы на вопросы и снизит риск отказа от оплаты	CR	2 / 2 = 1

Гипотеза	Метрика	Приоритет
Переход платформы на soft-paywall модель. Если предоставить пользователям возможность предварительно ознакомиться с продуктом через бесплатный доступ, это увеличит их готовность к оплате и повысит конверсию	CR	3 / 3 = 1
Поднятие OpenAuth-сервисов в интерфейсе авторизации. Повышение видимости OpenAuth-сервисов для упрощения регистрации и ускорения процесса покупки	Time to complete	3 / 1 = 3
Упрощение интерфейса на этапе оплаты. Оптимизация элементов на экране оплаты для упрощения процесса, чтобы пользователи могли быстрее и легче завершать покупку	Time to complete, CR	2 / 1 = 2
Ретаргетинг через звонок отдела продаж. Если пользователь оставляет номер телефона и имя на первом этапе, но покидает сценарий покупки, отдел продаж может связаться с ним и вернуть его в сценарий для завершения покупки	User return CR	3 / 2 = 1.5
Ретаргетинг через email-рассылки. Если пользователь оставил email при регистрации, рассылки с маркетинговыми предложениями и напоминаниями помогут вернуть его в сценарий и завершить покупку	User return CR	3 / 2 = 1.5
Использование таймера для промокодов. Добавление таймера для активных промокодов, чтобы стимулировать пользователей завершить покупку быстрее	CR	2 / 3 ≈ 0.67
Внедрение социального доказательства на этапе оплаты. Подсветка отзывов и рейтингов на экране для повышения доверия пользователей и мотивации к покупке	CR	2 / 2 = 1
Внедрение FAQ на этапе оплаты. Если добавить блок FAQ на этапе оплаты, это поможет пользователям быстро найти ответы на вопросы и снизит риск отказа от оплаты	CR	2 / 2 = 1

Приоритет каждой гипотезы рассчитывался на основе соотношения «ценность/сложность»:

Ценность — варьируется от 1 до 3 в зависимости от ожидаемого влияния гипотезы на конверсию и удобство для пользователей.
Сложность — про реализацию в разработке и продукте, брал условные единицы. Оценивается по шкале от 1 до 3, где 1 — низкая сложность, 2 — средняя, 3 — высокая.

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

Реализация

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

Реализация

CJM (новый сценарий)

Собрал обновленный CJM который учитывает все особенности использования OpenAuth сервисов

CJM (новый сценарий)

Собрал обновленный CJM который учитывает все особенности использования OpenAuth сервисов

CJM (новый сценарий)

Собрал обновленный CJM который учитывает все особенности использования OpenAuth сервисов

IF CaseStudy Flow покупки

Немодерируемое исследование

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

Для немодерируемого исследования требуется более широкая выборка, чем для модерируемого. Итоговая выборка составила 15-20 чел.

Сценарий(превью) исследования:

Немодерируемое исследование

Сценарий(превью) исследования:

Немодерируемое исследование

Сценарий(превью) исследования:

Pathway

Результат немодерируемого исследования:

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

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

UI и компоненты

Посмотреть сценарий: Макеты

Посмотреть на проде:

lk.investfuture.plus

Дизайн-ревью

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

Дизайн-ревью

IF CaseStudy Flow покупки

Результат

Влияние на метрики.

Результат: В результате изменений конверсия на этапе «Переход на оплату» была повышена до 1.14%, что эквивалентно приросту на 54.41% (от исходного значения). Также среднее время прохождения сценария сократилось до 1.5-2 минут, что свидетельствует о более плавном и интуитивном процессе для пользователей

Влияние на метрики.

Результат: В результате изменений конверсия на этапе «Переход на оплату» была повышена до 1.14%, что эквивалентно приросту на 54.41% (от исходного значения). Также среднее время прохождения сценария сократилось до 1.5-2 минут, что свидетельствует о более плавном и интуитивном процессе для пользователей

Влияние на метрики.

Результат: В результате изменений конверсия на этапе «Переход на оплату» была повышена до 1.14%, что эквивалентно приросту на 54.41% (от исходного значения). Также среднее время прохождения сценария сократилось до 1.5-2 минут, что свидетельствует о более плавном и интуитивном процессе для пользователей

Дальнейшее развитие

Переход на Soft-Paywall и работа с активацией

Добавить таймер с примененным промокодом на оплату.
Новые способы авторизации.
Новые способы оплаты.
Внедрение FAQ на этапе оплаты.
Внедрение социального доказательства на этапе оплаты.