Карточка новостей в личной ленте · Тинькофф

Встречайте новый дизайн карточки заведения!

Видео, быстрые акции, чат и современная эстетика — в бесплатном обновлении для всех партнеров Restoclub

Обзор проекта

Продукт

Тинькофф — это онлайн-экосистема или суперприложение, основанное на финансовых и лайфстайл-сервисах. Лучший мобильный частный банк в мире по версии Global Finance. Третий по величине банк в СНГ с 30 000 000 клиентов.

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

Зачем делать редизайн

Идея простая — разрабатываем модуль комментариев и добавляем его в разные продукты, увеличивая метрики вовлечения пользователя. Есть несколько причин, по которым мы решаем эту задачу с помощью комментариев:

1. На серии интервью с пользователями ленты, около четверти респондентов просили добавить комменты к статьям Т—Ж
2. Business-generated контент, который нужен для вовлечения и удержания, стоит дорого. User-generated контент практически бесплатный, поэтому сделав комментарии, мы получим гораздо более дешевый способ вовлечения
3. Комменты — это соушл пруф. Без клиентского фидбека, бизнесовый контент выглядит так, как будто его никто не смотрит

Почему начали с карточки заведения

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

Проблема для бизнеса

Мы всегда ищем способы повысить CTR с помощью карточек ленты. Потому что с ростом CTR → растет вовлеченность. С ростом вовлеченности растёт лояльность пользователей, а с ростом лояльности растёт доход от продаж наших внутренних сервисов.

Проблема для пользователей

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

Отсюда и проблема — люди хотят видеть актуальную подборку новостей по своим интересам. Они не хотят собирать эти новости в разных местах, они хотят видеть все сразу. Самое главное, что это подтвердилось в серии интервью с пользователями, которые были направлены на поиск ответа «Почему пользователи используют ленту?»
Мы решили, что это нужно как-то дешево проверить. И мы собрали подборку новостей по типу уже имеющихся карт.

После такого эксперимента мы заметили значительный рост (+24%) CTR этой карточки относительно самой популярной карточки в этом месте. Итак, мы поняли, что нужно улучшить пользовательский опыт этой карты и придумать максимум способов вовлечения человека.

Аудитория

Аудитория очень широка и разнообразна. Но мы нацелены на всех пользователей нашего банка, ведущих активный образ жизни. Не могу разделить аудиторию личной ленты, но она составляет большую часть от общего числа клиентов. Учитывая, что у нас 30 000 000 клиентов, масштаб продукта подтверждается. Ух ты!

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

Критерием успеха будем считать CTR этой карточки, который будет выше, чем CTR новостной карточки из эксперимента выше (то есть он будет выше, чем любая другая карточка на первом месте ленты).

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

Поиск идей

Интервью

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

Всего 19 глубинных интервью. Последние новости попали в топ-3 инсайтов. Это подтверждает наше первоначальное предположение. Кроме того, мы поняли, что нужно рекомендовать новости в персонализированном формате и давать только подборку заголовков.

Поспрашивали соседние отделы и погуглили

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

Также в ходе дискавери узнали метрики комментариев в мобильном приложении Т—Ж. Там очень большой процент аудитории статей переходят в комменты. Для нас это крутой сигнал и очередной пруф того, что комменты стоит делать. Сохраняем метрики комментариев в Т—Ж, чтобы потом вернуться к ним, и сравнить их результаты с запуском комментов в мобильном банке.
Нашли еще исследования по Instagram и Tiktok от Social Insider. Но там комменты оставляют к контенту, который генерит юзер, а не бизнес. Поэтому для нашего кейса они менее релевантны. Их тоже сохраняем, но скорее для общего понимания, чем для бенчмаркинга.

Анализ метрик

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

Анализ похожих продуктов

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

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

Результат дискавери

На этом этапе у нас уже есть нулевая гипотеза, которая звучит так:

Если показывать комменты в историях, то мы увеличим вовлечение, потому что контент станет интереснее

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

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

Карта пользовательского пути

Формулирование гипотез и lo-fi прототипы

Приступаем к дизайну

Формулирование гипотез и создание MVP

Я назначил встречу с продакт-менеджером и инженерами, чтобы оценить все гипотезы по двум параметрам: техническая сложность реализации (от 1 до 5) и ценность для бизнеса (от 1 до 5). Мы разделили одно на другое и получили коэффициент приоритетности высокого уровня. Так...

CTR карты

• Даты. Если мы показываем даты публикации статей, это может повлиять на CTR карточки.
• 3 ⁄ 1 = 3
• Картинки. Если мы добавим картинки в новость, это может повлиять на CTR карточки.
• 3 ⁄ 1 = 3
• Персонализация. Если мы показываем новости на основе интересов пользователей, это может повлиять на CTR карточек и уровень удержания.
• 5 ⁄ 5 = 1

Открытая ставка

• Имя. Если мы свяжемся с вами лично, это может повлиять на открываемость.
• 3 ⁄ 1 = 3

Коэффициент удержания

• Вступительный текст. Если мы напишем юмористический вводный текст, это может повлиять на уровень удержания.
• 3 ⁄ 2 = 1,5
• Курсы валют. Если мы показываем курсы валют и цену акций, это может повлиять на уровень удержания.
• 2 ⁄ 2 = 1

Расставление приоритетов

Я назначил встречу с продакт-менеджером и инженерами, чтобы оценить все гипотезы по двум параметрам: техническая сложность реализации (от 1 до 5) и ценность для бизнеса (от 1 до 5). Мы разделили одно на другое и получили коэффициент приоритетности высокого уровня. Так...

CTR карты

• Даты. Если мы показываем даты публикации статей, это может повлиять на CTR карточки.
• 3 ⁄ 1 = 3
• Картинки. Если мы добавим картинки в новость, это может повлиять на CTR карточки.
• 3 ⁄ 1 = 3
• Персонализация. Если мы показываем новости на основе интересов пользователей, это может повлиять на CTR карточек и уровень удержания.
• 5 ⁄ 5 = 1

Открытая ставка

• Имя. Если мы свяжемся с вами лично, это может повлиять на открываемость.
• 3 ⁄ 1 = 3

Коэффициент удержания

• Вступительный текст. Если мы напишем юмористический вводный текст, это может повлиять на уровень удержания.
• 3 ⁄ 2 = 1,5
• Курсы валют. Если мы показываем курсы валют и цену акций, это может повлиять на уровень удержания.
• 2 ⁄ 2 = 1

Обзор

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

Итерация 1
Обязательно сразу делаем новостную карточку с датами. У нас возник спор по поводу картинок, продакт-менеджер посчитал, что без картинок будет работать лучше. Мы договорились о тесте AB. Дополнительно будем брать обращение по имени, так как оно влияет на другую метрику. Мы не принимаем гипотезы, направленные на показатель удержания, на первой итерации из-за того, что они сложны, и мы хотим принести пользу как можно раньше.

• Даты. Если мы показываем даты публикации статей, это может повлиять на CTR карточки.
• Картинки. Если мы добавим картинки в новость, это может повлиять на CTR карточки.
• Имя. Если мы свяжемся с вами лично, это может повлиять на открываемость.

Итерация 2
Текст-введение будет запущено отдельно. Потенциально это может влиять на показатель удержания индивидуально, интересно проверить.

• Вступительный текст. Если мы напишем юмористический вводный текст, это может повлиять на уровень удержания.

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

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

Итерация 4
Далее пытаемся персонализировать новости (сложная вещь), итак в итоге.

• Персонализация. Если мы показываем новости на основе интересов пользователей, это может повлиять на CTR и удержание.

– Вперед!

Hi-fi пртототип

Теперь карта раскрашена, и мы знаем, что это важно. Когда лента скрыта, часть карточки видна и привлекает внимание. Мы решили с этим не экспериментировать и дальше рассматривали только в цвете.

Мокапы

Раздел «Отзывы»

2. Картинки. Если мы добавим картинки в новость, это может повлиять на CTR карточки.

Раздел «Отзывы»

3. Персонализация. Если мы показываем новости на основе интересов пользователей, это может повлиять на CTR и уровень удержания.

Раздел «Отзывы»

4. Имя. Если мы свяжемся с вами лично, это может повлиять на скорость открытия ленты.

Раздел «Отзывы»

5. Вступительный текст. Если мы напишем юмористический вводный текст, это может повлиять на уровень удержания.

Раздел «Отзывы»

6. Курсы валют. Если мы показываем курсы валют и цену акций, это может повлиять на уровень удержания.

Раздел «Отзывы»

6. Курсы валют. Если мы показываем курсы валют и цену акций, это может повлиять на уровень удержания.

Бесплатная карточка

Результаты теста АБ. При первом посещении пользователи лучше тапают по новостной карточке без картинок. Относительный рост CTR составляет 9%. На нажатия при повторном входе это не влияет. На возврат в ленту это не влияет. Карта без картинок выиграла, я плакала :-(

В целом CTR первой карточки +8% (новый формат и даты) и открываемость фида +4% (адрес по имени). Прохладный! Перейдем к следующим итерациям.

UX-тесты

Потенциально, в интерфейсе комментариев можно было проверить две штуки:

1. Понятно ли, что комменты можно открыть по нажатию на иконку со счетчиком
2. Понятно ли, как читать и писать комменты

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

Второй пункт проверять тоже не было смысла, потому что уже есть четкий бенчмарк по рынку (instagram, telegram, tiktok, fb и тд). Поэтому сомнений в том, что могут быть проблемы с чтением и писанием комментов не было.

Первый запуск и результаты

Результаты теста АБ. При первом посещении пользователи лучше тапают по новостной карточке без картинок. Относительный рост CTR составляет 9%. На нажатия при повторном входе это не влияет. На возврат в ленту это не влияет. Карта без картинок выиграла, я плакала :-(

В целом CTR первой карточки +8% (новый формат и даты) и открываемость фида +4% (адрес по имени). Прохладный! Перейдем к следующим итерациям.

Адаптивный дизайн

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

Ui-kit

Используя сочетание игривых цветов со спокойным и расслабляющим белым, я смогла придать приложению индивидуальность — игривую, непринужденную и интуитивно понятную. Я экономно использовала цвет во всем приложении, чтобы передать, какие элементы взаимодействуют друг с другом и на что следует обратить внимание в продукте. Я также решила использовать в интерфейсе иконки (кроме навигационных), представляющие эмодзи из коллекции Twitter (twemoji), поскольку они играли ключевую роль в сопоставлении непринужденной и универсально понятной среды, которую я создала в интерфейсе приложения.

Логотип

Типографика

Заголовки

Текст

Цветовая палитра

iOS иконка

Моя роль

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

• Составление понимания задачи
• Дискавери
• Lo-Fi проектирование и гипотезы
• Приоритизация гипотез и скоупинг совместно с менеджером
• Hi-Fi дизайн, edge-кейсы, анимации и прототипирование
• Коллаборация с QA инженерами при тестировании
• Дизайн-ревью перед релизом, заведение и приоритизация дизайн-багов
• Контроль метрик после релиза
• Развитие продукта после запуска первой итерации

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

Я формулировал гипотезы и участвовал в расстановке приоритетов вместе с продакт-менеджером и инженерами. Вместе с менеджером мы разбили все гипотезы на итерации. Вместе с технологами и инженерами я разработал макеты lo-fi и hi-fi и описал требования. Я помогал QA-инженерам запустить весь поток и описывал ошибки. Я написал десятки вступительных текстов для новостной карточки. В основном все решения работают на Android и iOS.

Уроки, которые я вынесла

Устаревание дизайна
При запуске большого продукта нет никакого смысла глубоко проектировать вторую итерацию. Потому что к тому моменту, когда разработка будет готова брать новые дизайны в работу, они успеют 10 раз протухнуть. Поэтому, чтобы описать гипотезу, достаточно просто 1-2 черновых макетов. Я на старте потратил достаточно много времени на то, чтобы разрисовать гипотезы на 2-3 релиз комментов — так лучше не делать.

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

Несмотря на то, что комменты на ревью прилетали кусками (отдельно открытие комментов, отдельно бабблы сообщений, отдельно инпут и тд), большинство задач заворачивались на дизайн-ревью. Функционал отправлялся на доработку разработчикам и после этого опять попадал в дизайн-ревью, которое опять проходили не все таски. Из-за этого дата релиза съезжает.
Как теперь это теперь исправляем? Добавляем промежуточные точки дизайн-ревью. Если раньше дизайн-ревью проходило только после тестирования и перед релизом, то теперь мы с мобильной разработкой синкаемся несколько раз:

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

Что с продуктом теперь

На текущий момент комментарии включены практически под всеми историями. Взрослые открывают комменты около 5% от тех, кто просмотрел историю. Конверсия в написание коммента колеблется в районе 0,6% от тех, кто посмотрел историю. Недельный Retention комментариев ходит в районе 10%.

1. У детей эти показатели в 2-6 раз выше.

Что дальше?

Вертикальное развитие продукта

1. Качать конверсию в открытие комментариев
2. Качать конверсию в отправку комментов

Для вертикального развития мы просто возвращаемся к гипотезам и Lo-Fi дизайнам, которые уже нарисовали и берем оттуда то, что бьет в открытие или отправку комментов. Например, стикеры или подсветка комментариев в истории.

Горизонтальное развитие продукта

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