Обновление страницы тарифов

Старое решение и проблемы

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

Проблемы

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

Было тяжело найти уже подключенный тариф, он слабо выделялся

Фон карточек был плохо заметен на экранах пользователей

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

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

Люди не понимали что такое диалог без оператора

Тарифов очень много, тяжело выбрать нужный

Критерий успеха:

Решить проблемы пользовательского опыта

Улучшить текущий экран, сделать его удобнее для пользователя

Положительно повлиять на LTV и снизить Contact Rate и Churn rate

Решение

Первая итерация

Было

Стало

После анализа страницы и отзывов я спроектировал новую страницу тарифов.

Сделал крупным цену

Облегчил карточки визуально

Сделал карточки с обводкой вместо заливки

Убрал цену за 1 диалог

Увеличил контрастность между подключенным и остальными тарифами

Увеличил карточку индивидуального тарифа и дополнительно выделил её с помощью иллюстрации

Упростил бейджики с выгодой

Изменил порядок отображения тарифов

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

Вторая итерация

Так как СББ располагается на витрине Девайсов, то вскоре нас попросили переехать на общую с ними страницу тарифов (до этого у нас была своя отдельная страница для СББ, а для других продуктов девайсов была их страница с тарифами их продуктов).

Как итог, случилась вторая итерация переработки страницы, в ходе которой сделалось:

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

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

Появилась мобильная версия страницы

Добавили возможность подключать тариф на год с выгодой

Подводные камни

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

Переключение тарифов происходит не мгновенно, а только после того, как закончится действие старого

Про то, что тариф у пользователя старый, нужно было где-то говорить

Также мы заложили потенциал для возможности выведения акционных тарифов

Дополнительно было сделано

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