Как мы затащили персональную ленту на главный экран мобильного банка и повысили метрики в несколько раз

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

Чем занимается наша команда

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

Цель — вовлечь клиента в финансовые сервисы за счет контентных фичей, и с помощью этого вырастить лояльность.

Что за персональная лента

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

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

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

Это означает, что сам продукт работает, надо просто качать его эффективность, и тут есть загвоздка

Лента находилась далеко

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

Плохая доступность ленты напрямую влияет на возвращаемость, а перслента не имеет смысла как продукт, если пользователи туда не приходят снова.

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

Вот такие пироги, зафиксируем понимание проблемы и что мы хотим сделать:

Миссия для пользователя

Мы хотим сделать ленту доступной и удобной. Чтобы пальцы сами тянулись открыть ленту при попадании в мобильное приложение

Цель в мире бизнеса

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

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

• Рост недельного Retention ленты
• Косвенно хотим повысить DAU/WAU мобильного банка, ведь в идеале люди будут больше времени проводить в приложении

Ну и напоминание, что мы работаем в большом банке и мы все делаем для...

Гипотезы и черновые макеты

На этом этапе мы разбираемся как вообще подступиться к задаче, поднимаем аналитику, общаемся с пользователями и бизнесом, смотрим конкурентов и лучшие практики

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

По сути есть два пути:

Вкладка в таббаре

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

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

Блок на Главном экране

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

Мы тоже туда захотели и у нас есть два аргумента:

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

2. Контент в мобильном банке — это экспериментальный проект, люди к такому не привыкли. Поэтому нам важно быть постоянно на виду и менять представление о том, что приложение Тинькофф — это исключительно банк (ведь еще это доставка продуктов, покупка билетов в кино, тиндер, кликер, тамагочи, открывашка для пива и многое другое)

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

Вот примерная иллюстрация нашего хода мысли во время перебора вариантов такого блока:

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

Мы понимали две важные вещи:

1. Люди не будут открывать мобильный банк, чтобы почитать ленту, с этим нужно смириться. Поэтому нам нужно уместно встраиваться в уже существующие сценарии внутри приложения
2. Цель проекта — повышение возвращаемости в персленту. В таких случаях мы всегда работаем с моделью Хука (очень рекомендую посмотреть, база), которая помогает проектировать сценарии формирования привычки делать что-либо

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

А это схема хука на примере выбора интересов в персональной ленте:

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

Сами гипотезы получились такими:

1. Перенос ленты на главный экран. Это нулевая гипотеза, с которой начался весь проект: если перенесем ленту на главный экран, то качнем %WAU, так как лента станет более доступной и заметной.

2. Точка входа в Городе. Если мы сделаем точку входа во вкладке Город, где раньше находилась лента, то качнем Open Rate ленты, так как больше людей будут заходить к нам за персональными подборками Афиши и Ресторанов.

3. Точка входа в чатах. Если мы сделаем точку входа в чатах, то качнем Open Rate ленты, так как больше людей будут заходить в ленту пока ждут ответ от поддержки.

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

4. Интересы. Если будем спрашивать у пользователей интересы на входе в ленту, то качнем Retention Rate и Engagement Rate, так как тем самым понятно донесем ценность продукта и создадим ощущение персонализации, а в идеале подберем контент по интересам уже в первой сессии

5. Активация. Если сделаем геймифицированную механику, подталкивающую регулярно пользоваться лентой, то повысим Retention Rate и Engagement Rate, так как тем самым доведем больше людей до активации, донеся ценность и сформировав привычку пользоваться лентой.

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

6. Онбординг в открытие. Если мы подскажем, что шторку на главной можно дернуть, то увеличим Open Rate ленты, так как больше людей заметит ленту и откроет ее хотя бы один раз.

Scoping

После того, как обрисовали гипотезы черновыми макетам, мы отсортировали гипотезы по формуле ценность/сложность. Результат — коэффициент, который показывает, что стоит брать в 1 итерацию. 

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

1. Нулевая гипотеза, перенос ленты на главный экран. Это основа проекта, но тоже пока что всего лишь гипотеза
2. Дескриптор
3. Онбординг в открытие

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

Подготовка макетов и анимаций для передачи в разработку

Итак, финальное решение получилось таким:

Лента на главном экране выглядит как шторка, смахиваемая сверху вниз, при этом ленту также можно открыть тапом по области под историями

Над драггером находится сокращенный дескриптор, который меняется каждый день вместе с полным дескриптором внутри ленты

Добрая половины работы при работе над финальными макетами — создание анимаций открытия и закрытия ленты. Мы над ней запарились и собрали прототип в ProtoPie, там удобно передавать анимацию в разработку. Получилось вот так:

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

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

А всего макетов со всеми состояниями ленты получилось вот столько:

Разработка и релиз на сотрудниках

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

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

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

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

Сделав это, мы узнали две вещи:

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

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

Шло время и все стало готово к релизу на клиентах

Первый релиз на клиентах и результаты

В Q4 2023 года мы наконец раскатили персленту на главном экране на часть аудитории пользователей Андроида A/B тестом и получили такие результаты:

1. Недельный retention в ленту вырос в несколько раз
2. %WAU от всей аудитории приложения, кто заходит в персленту, вырос в несколько раз. Эта метрика, конечно, не могла не вырасти, но все равно приятно
3. А вот Engagement Rate ленты сильно упал. Это связано с тем, что теперь в ленту заходит гораздо больше людей, и многие из этой аудитории не такие активные, как те, кто заходил из Города
4. На DAU/WAU мобильного банка мы не повлияли. Не сильно из-за этого расстроились, на эту метрику влиять очень сложно. Но учитывая хороший рост retention и выросшую доступность персленты, нам будет проще работать с этой метрикой в будущем

Выводы и что будем делать дальше

Мы сильно качнули retention ленты, что было основной целью этого проекта, и это круто.

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

Так как A/B тест показал хорошие результаты, будем раскатывать персленту на большее количество клиентов. Сейчас текущая раскатка на аудиторию Андроида — наш максимум, бэк персленты просто оказался не готов к такой нагрузке) И радостно, и печально

Платформы

Титры

Огромный вклад в этот проект вложил Иван Звягин, который на тот момент был дизайн-лидом нашей соушл команды. Ваня сформировал вижен контентных продуктов в мобильном банке на несколько лет вперед, в том числе запускал процесс переезда ленты и был его идейным вдохновителем. Без него бы ничего не вышло 🖤

Вот полный перечень того, чем я занимался:

— Составление понимания задачи

— Дискавери

— Lo-Fi проектирование и гипотезы

— Приоритизация гипотез и скоупинг совместно с менеджером

— Hi-Fi дизайн, edge-кейсы, анимации и прототипирование

— Коллаборация с QA инженерами при тестировании

— Дизайн-ревью перед релизом, заведение и приоритизация дизайн-багов

— Контроль метрик после релиза

— Развитие продукта в течение нескольких кварталов после запуска