Меня зовут Надя Терехова, я отвечаю за продуктовый дизайн в Учи.ру. Сегодня я расскажу, как наша команда изменила дизайн платежного сценария и тарифную линейку, почему решилась на кардинальное обновление и какой результат получила (спойлер в заголовке).
Наш кейс будет полезен дизайнерам и менеджерам, которые планируют крупные изменения в зрелом продукте, но не знают, с чего начать, боятся ошибиться и уронить текущие метрики.
В статье описали наш путь и собрали полезные советы для редизайна. Приятного чтения!
Когда изменения назрели
Изначально мы хотели поменять только страницу с тарифами, так как обратили внимание, что новые курсы на ней не отображаются.
Страница выглядела так:
По умолчанию при нажатии на кнопку «Открыть доступ» пользователям предлагался только комплект базовых предметов, хотя на платформе появилось большое количество новых образовательных игр, комиксов, дополнительных дисциплин.
Кроме того, если клиент хотел приобрести только один курс, он сразу попадал на страницу оплаты. А мы хотели, чтобы в таком случае ему демонстрировались комплекты курсов с выгодным оффером по стоимости и возможностью приобрести пакет.
Сначала мы вносили в дизайн точечные улучшения. Но тестирования показывали либо минусовые, либо статистически незначимые результаты. Тогда продуктовая команда замахнулись на редизайн.
Первый этап: анализируем текущий платежный сценарий
Для начала мы запустили дизайн-дискавери. Дизайнер в рамках спринтов работал не только над быстрыми гипотезами, но и внимательно изучал продукт и анализировал, какой опыт лучше предложить пользователю на определенном этапе CJM.
Кроме того, команда собрала все текущие сценарии покупки и визуализировала их. Они отличались в зависимости от сегмента пользователя и пути на платежку.
В итоге мы поняли несколько важных вещей:
стоит смотреть шире на все этапы платежного флоу, чтобы сформировать целостный опыт;
задача затрагивает почти все команды, нужно привлекать их как можно раньше для обмена знаниями;
ранее мы не согласовывали коммуникации и визуал между e-mail-каналом и интерфейсом продукта, поэтому по-разному доносили информацию о тарифах.
Затем мы изучили результаты предыдущих внутренних качественных исследований и экспериментов, аналитику по воронке, обращения в техподдержку, чтобы сформулировать первые гипотезы и варианты решений.
В поисках лучшего дизайнерского решения мы также рассмотрели варианты флоу покупки у других компаний. Это позволило создать пул гипотез, которые ранее не приходили нам в голову.
Кстати, мы анализировали решения не только из сферы EdTech, но и продукты с похожими задачами, например, в e-commerce. Особенно нас интересовала визуализация скидок и предложений купить в рассрочку, разные механики допродаж с прогрессивной выгодой.
Забегая вперед, скажу, что потом по этим гипотезам удалось провести успешные A/B-тестирования, а добавление информации о рассрочке повысило конверсию в покупку.
Второй этап: создание прототипа и исследования с пользователями
В процессе редизайна мы проводили несколько итераций UX-исследований с пользователями, которые включали глубинные интервью и юзабилити-исследования. Мы комбинировали как классические, так и итеративные юзабилити-тесты. И дизайнеры, и продакты были максимально вовлечены в процесс общения с пользователями (половину всех UX-тестов проводил сам дизайнер).
Вот как стала выглядеть страница тарифов после редизайна. Теперь пользователь может увидеть все продукты на платформе:
На интервью мы выяснили основные ожидания родителей, которые выбирают комплекты курсов. Они хотели, чтобы ребенок не отставал от школьной программы и всесторонне развивался.
Поэтому мы сделали два новых пакетных предложения, — «Только школа» и «Всё на Учи.ру».
Страница с тарифами спроектирована таким образом, чтобы пользователю была очевидна ценность пакетных предложений по сравнению с покупкой отдельных курсов. Визуально (иконками) показаны курсы в пакете. Ниже можно в деталях изучить информацию о каждом курсе и еще раз убедиться, что по отдельности их покупать менее выгодно, чем пакетом. При проверке на UX-исследованиях пользователи считали эту мысль.
Таким образом, с помощью дизайна нам действительно удалось донести ценность пакетного предложения. При этом у пользователей осталась возможность собрать комплект курсов под свой индивидуальный запрос.
Еще мы узнали, что наша аудитория больше всего интересуется школьными предметами — математикой, русским и английским языками, окружающим миром. Поэтому объединили развивающие курсы и игры в комплекты, соответствующие этим предметным областям. Например: «Математика и логика», «Языки и чтение», «Мир вокруг», «Навыки XXI века». Это подчеркивает, что все активности на Учи.ру направлены на успешную учебу в школе и формирование полезных навыков.
Пример подборки курсов по группе навыков:
Кроме того, мы изменили сценарии покупки так, что теперь из каждого курса пользователь попадает на единую страницу тарифов с возможностью покупки пакета.
Третий этап: A/B-тестирования и результаты
Поскольку тесты, связанные со сценариями покупки, крайне рискованные (ведь они непосредственно влияют на денежные метрики), мы подкладывали соломку везде, где только можно. Например, разбили флоу покупки на шаги и редизайнили их по отдельности, запуская изменения на прод в разное время и в рамках отдельных экспериментов. Таким образом, мы подстраховались, чтобы запустить максимально эффективный вариант осенью, в «горячий» сезон.
Пакет «Всё на Учи.ру», который дает доступ ко всем занятиям на платформе, мы сперва выкатили на старой странице тарифов. Вот как это выглядело:
Увы, результат оказался нестатзначимым. Успокоили себя тем, что он не минусовой, и решили, что новый дизайн позволит улучшить показатели.
Самый первый шаг с выбором доступа не было смысла запускать весной, когда мы работали над задачей: он актуален для новых пользователей, основная часть которых приходит на Учи.ру осенью. Поэтому отложили эту часть на более поздний период.
Разработку экрана с пейволлом, который появляется у пользователя при окончании бесплатных заданий, совместили с задачей из техдолга (вынести интерфейс из монолита). А заодно проверили еще ряд гипотез, часть из которых не дала успешных результатов.
К примеру, мы думали, что лучше всего сработает «детский» пейволл с забавной картинкой и понятной для ребенка коммуникацией. Но ошиблись: этот вариант показал менее значимые результаты, чем «взрослый» пейволл, в котором мы делаем акцент на скидке и премуществах полного доступа.
Пейволл до редизайна:
«Детский» пейволл:
«Взрослый» пейволл
Ключевой узел в сценарии — страницу с тарифами — решили протестировать на весеннем трафике, чтобы не уронить метрики осенью. В весеннем запуске тест был плюсовой, достаточно быстро вышел на плато и стабильно показывал десятипроцентный прирост среднего чека.
Тут важно понимать, что весной совершается намного меньше новых покупок, чем осенью, поэтому мы ждали лучшего результата в сентябре. И действительно, осенью, когда раскатали эксперимент на всех, увидели рост среднего чека на 30%. Конечно, нельзя исключать накопительный эффект и от остальных фич, которыми мы занимались в прошлом сезоне (например, от релиза новых геймификационных механик).
Как видите, процесс получился долгий и итеративный, но результат стоил того.
Выводы
Крупный редизайн вызывает много страхов и опасений. Тем не менее, иногда для получения качественного результата все-таки нужны масштабные, а не локальные изменения.
Вместе с коллегами собрали общие рекомендации, которые могут быть полезны командам, планирующим масштабный редизайн:
Работа становится проще, если выполнять ее с теми, кого изменения тоже касаются: с другими командами, руководством, исследователями, специалистами поддержки. Важно обсуждать изменения вместе на демо, собирать максимально широкую обратную связь.
Не стоит на 100% верить выводам из прошлых экспериментов. В итоге перезапуска тестов, в которых мы увидели потенциал, удалось получить положительный прокрас.
Важно учитывать опыт пользователя в разных каналах коммуникаций. В рамках редизайна в рассылках мы начали транслировать ожидания, которые сами пользователи озвучивали в качественных исследованиях, а также переиспользовать эффективные визуальные презентации пакетов. Думаем, это тоже повлияло на результат.
При исследовании конкурентов стоит рассматривать более широкий круг компаний: не только в своей сфере (например, EdTech), но и всех, предоставляющих похожие услуги.
Хорошая идея — максимально декомпозировать редизайн на эксперименты. Лучше подстраховаться и раскатать эксперимент заранее, не в высокий сезон.
А еще эта масштабная задача научила нас лучше планировать крупные дискавери-проекты, которые требуют продолжительной кросс-командной работы и большого количества дизайн-итераций. В процессе ее выполнения мы усовершенствовали коммуникацию между различными направлениями компании, включая смежные продуктовые команды, службу поддержки, CRM-маркетинг. Я думаю, что проект стал успешным во многом благодаря кросс-командной работе и обширной обратной связи.
