Полная версия проекта
Концепция главного
экрана «Т-Банк»
Т‑Банк — онлайн-экосистема, основанная на финансовых и лайфстайл-услугах. Клиентами Т‑Банка стали 47 млн человек по всей России. Второй крупнейший банк страны по количеству активных клиентов. Технологическая компания с банковской лицензией.
Примерно 70% сотрудников штаб-квартиры — IT-специалисты, которые каждый день создают лучшие цифровые продукты в России.
Приложение Т-Банка представляет собой современный мобильный банк, предлагающий пользователям широкий спектр финансовых услуг и возможностей для управления своими средствами.
Важно было пройти все этапы дизайн-процесса: понимание задачи, дискавери, гипотезы, проектирование, прототипирование и тестирование. На каждом этапе я глубоко погружался и изучал как можно больше информации от ведущих дизайнеров индустрии.
Среднее время на ознакомление со всей работой — 20 минут. Если в данный момент у вас нет столько времени, перейдите по ссылке, чтобы посмотреть финальную часть работы или просмотреть Lite-версию проекта.
Если просто сесть и начать рисовать интерфейс или фичу без плана, есть большая вероятность, что получится неудобно, непонятно или вообще ненужное.
Работа началась с формирования дизайн-процессов, которые помогут мне выявлять потребности пользователей и создавать продукт, приносящий им реальную пользу, а также сохранять фокус на цели, понимая, на каком этапе процесса я нахожусь.
Вводные: Персонализация главного экрана мобильного банка T-Банк. Необходимо разработать дизайн-концепцию главного экрана. Важно сохранить преемственность в дизайне, чтобы не отпугнуть пользователя.
Миссия: Предоставить клиенту возможность настроить отображение экрана в соответствии с его финансовыми целями и задачами, а также персонализировать интерфейс с учётом его физических особенностей, если это необходимо.
Цель: Персонализация повысит уровень удержания клиентов и индекс потребительской лояльности, что напрямую скажется на росте кросс-продаж финансовых продуктов.
Аудитория: MAU мобильного банка Т-Банк.
Критерий успеха: Статистически значимый рост NPS, Retention Rate и Conversion Rate. Если показатели окажутся ниже ожидаемых, мы не отключим функцию, а продолжим развивать её функционал.
Обычно это касается только работы с банковскими продуктами: их можно перемещать, скрывать или отображать. Однако такие функции обеспечивают лишь базовый уровень персонализации, не позволяя настроить экран под конкретные финансовые цели пользователя.
Я рассматриваю бенчмаркинг как один из способов поиска идей. Бенчмаркинг помогает мне выявить пробелы и лучшие практики, которые можно внедрить для повышения эффективности и конкурентоспособности.
Ознакомиться с результатами можно по ссылке: Бенчмаркинг
Аудитория — это основа. Мне хотелось больше узнать о пользователях и возможных сценариях использования продуктов. Из открытых источников удалось выявить интересные моменты и новые векторы развития компании.
Средний возраст клиентов Т-Банк составляет 33 года. Среди них 57% — мужчины и 43% — женщины.
«У нас есть история, что нас ассоциируют с молодежной аудиторией. Нам нужно завоевывать новую, нам нужно завоевывать более возрастную, более зрелую. И таким образом мы хотим упрощать коммуникацию, упрощать визуал»
Женщины оформляют детям карты в 2 раза чаще, чем мужчины (66,5% против 33,5%). Чаще всего оформляют своему ребенку карту женщины в возрасте 36 лет и мужчины в возрасте 39 лет.
Согласно исследованию, в 2023 году 51,7% держателей детских карт мальчики, а 48,3% — девочки. Чаще всего детскую карту оформляют 11-летним детям.
Данные о среднем возрасте клиентов, составляющем 33 года, были представлены за 2021 год. Однако председатель правления Т-Банка Станислав Близнюк в июне 2024 года подтвердил, что этот показатель остаётся актуальным и на сегодняшний день.
Качественные исследования помогают лучше понять, что на самом деле важно для пользователей, какие у них проблемы и как они воспринимают продукт. Это не просто сбор фактов, а исследование контекста, в котором пользователи взаимодействуют с продуктом, что даёт возможность сделать продукт более интуитивным и эффективным, учитывая реальные потребности аудитории.
Я отобрал трёх респондентов, наиболее подходящих под описание аудитории банка, и провёл глубинные интервью. Индивидуальные разговоры помогли мне узнать о мотивах, ожиданиях, опыте взаимодействия и возможных проблемах.
Применим фреймворк IE для приоритизации этих гипотез. Мы будем оценивать каждую гипотезу по Impact (Влияние) и Effort (Трудозатраты) по шкале от 1 до 10, а затем посчитаем IE = Impact / Effort.
На основе полученных значений IE, мы получаем следующую последовательность приоритетов и список гипотез, которые отправили в бэклог:
Если мы категоризируем продукты и услуги банка на главной странице, то это положительно повлияет на уровень удержания клиентов, так как это позволит быстрее ориентироваться среди продуктов и снизит когнитивную нагрузку.
Метрики: Retention Rate (уровень удержания)
Влияние: 8
Значительное упрощение навигации
и улучшение опыта пользователя
Трудозатраты: 2
Низкие трудозатраты для реализации
Приоритет: 4.0
Если мы переместим кнопку «Новый счёт или продукт» в верхнюю часть экрана, то увеличим коэффициент конверсии, что приведет к потенциальному росту дохода компании, так как позволит клиентам быстрее находить и подбирать продукты или услуги в соответствии с финансовыми целями и задачами.
Метрики: MAU (месячная активность аудитории), Conversion Rate (коэффициент конверсии), Engagement rate (коэффициент вовлечённости)
Влияние: 6
Улучшение доступности, потенциальное
увеличение конверсии
Трудозатраты: 1
Низкие трудозатраты для реализации
Приоритет: 6.0
Если мы разместим ссылки для быстрого доступа к документам в продуктах категории «Страхование», то это положительно повлияет на уровень удержания клиентов, так как клиент сможет быстро получить доступ к нужным документам и воспользоваться ими, без необходимости искать их в других разделах.
Метрики: Retention Rate (уровень удержания)
Влияние: 6
Улучшение пользовательского опыта,
но ограниченное влияние
Трудозатраты: 3
Средние трудозатраты
Приоритет: 2.0
Если мы создадим виджеты банковских продуктов и предоставим клиентам возможность настраивать виджет в соответствии с финансовыми целями и задачами, то это привлечёт больше пользователей, повысит индекс лояльности, а также положительно повлияет на уровень удержания клиентов, так как персонализация создает более глубокую эмоциональную связь с продуктом
Метрики: Unique visitors (количество уникальных пользователей), NPS (индекс потребительской лояльности), Retention Rate (уровень удержания)
Влияние: 8
Высокое влияние на удовлетворённость и удержание пользователей через персонализацию
Трудозатраты: 6
Умеренно сложная задача
Приоритет: 1.33
Если мы предоставим клиентам возможность добавлять любимые компании в избранное и отображать их предложения отдельно от основного раздела, то это привлечет больше пользователей и повысит коэффициент конверсии, так как позволит клиенту не пропустить важные предложения от любимых компаний
Метрики: Unique visitors (количество уникальных пользователей), Conversion Rate (коэффициент конверсии)
Влияние: 7
Персонализация усиливает вовлечённость и конверсии
Трудозатраты: 5
Умеренная сложность реализации
Приоритет: 1.4
Если мы предоставим клиентам возможность редактировать «Быстрые действия», то увеличим вовлечение клиента и положительно повлияем на уровень удержания, так как персонализация создает эмоциональную связь с продуктом.
Метрики: Retention Rate (уровень удержания), Engagement rate (коэффициент вовлечённости)
Влияние: 7
Высокое влияние на вовлечение и удержание через персонализацию
Трудозатраты: 5
Умеренная сложность реализации
Приоритет: 1.4
Если мы добавим новый раздел "Безопасность и защита", где клиенты смогут сообщать о мошенничестве, узнавать о мерах защиты и получать советы по предотвращению угроз, то это повысит индекс удовлетворённости и лояльности, а также положительно повлияет на уровень удержания клиентов, так как клиенты будут ощущать активную поддержку и защиту со стороны банка.
Метрики: Retention Rate (уровень удержания), CSI (индекс удовлетворённости клиентов), NPS (индекс лояльности)
Влияние: 8
Улучшение безопасности - важный фактор. Влияет на эмоциональную составляющую клиентов
Трудозатраты: 5
Умеренно сложная задача
Приоритет: 1.6
Данные пользовательского поведения показывают, что 30% клиентов совершают подозрительные транзакции после взаимодействия с подозрительными ссылками или звонками, и 15% обращений в поддержку связаны с мошенничеством, то создание раздела "Безопасность и защита от мошенничества" позволит снизить количество инцидентов на 20%, так как клиенты будут проинформированы о мерах защиты и получат инструменты для предотвращения мошенничества.
Гипотезы из списка ниже требуют значительных трудозатрат, сложных технических решений, и, возможно, больше времени на планирование и реализацию. Некоторые из них могут зависеть от других систем, интеграций и ресурсов.
Если кэшбэк будет подбирать предложения с учётом местоположения клиента, то это позволит увеличить число новый партнеров, увеличит число сессий, коэффициент вовлеченности и положительно повлияем на уровень удержания, так как клиент сможет определить для себя наиболее приоритетные покупки или магазины, которые предоставляют выгодные предложения.
Метрики: Sessions per user (число сессий), Engagement rate (коэффициент вовлечённости), Retention Rate (уровень удержания)
Влияние: 9
Значительное влияние на вовлечённость и удержание через уникальные предложения
Трудозатраты: 8
Высокая сложность: учёт геолокации и адаптация партнёрских программ
Приоритет: 1.125
Если мы добавим возможность доступа к мобильному приложению без подключения к интернету, предоставляя пользователям офлайн-функции, такие как просмотр баланса, выписок за последние операции и создание шаблонов для будущих транзакций, то это повысит удовлетворённость клиентов и уровень удержания, так как пользователи смогут получать ключевую информацию даже при отсутствии сети.
Метрики: Retention Rate (уровень удержания), CSI (индекс удовлетворённости клиентов)
Влияние: 9
Значительно улучшит пользовательский опыт. Частое отсутствие интернета является проблемой для пользователей
Трудозатраты: 8
Трудоемкая задача, требует большого количества тестирования
Приоритет: 1.125
Если мы интегрируем голосового помощника в мобильное приложение банка, то это повысит удовлетворённость клиентов и улучшит их вовлечённость, так как позволит пользователям быстро получать информацию о своих счетах, совершать переводы и выполнять другие операции с помощью голосовых команд, что сделает использование банка более удобным и эффективным.
Метрики: CSI (индекс удовлетворённости клиентов), Engagement rate (коэффициент вовлечённости)
Влияние: 9
Большой потенциал для улучшения опыта пользователей
Трудозатраты: 9
Сложная интеграция с голосовыми сервисами, разработка логики распознавания команд, тестирования
Приоритет: 1.0
Если мы добавим функцию увеличения размера интерфейса, где все элементы, включая текст, блоки и кнопки, динамически подстраиваются под более крупный масштаб, то это приведёт к росту месячной активности пользователей, положительно скажется на индексе лояльности и удовлетворённости, так как улучшенная читаемость и удобство взаимодействия сделают приложение комфортным для широкой аудитории, особенно среди людей с ограничениями зрения
Метрики: MAU (месячная активность аудитории), CSI (индекс удовлетворённости клиентов), NPS (индекс лояльности)
Влияние: 9
Это очень важно для инклюзивности и удобства
Трудозатраты: 9
Сложная задача, требует перестройки всех экранов
Приоритет: 1.0
Для настройки персонализации реализован отдельный экран. В верхней части добавлена плавная анимация с элементами подсказки, отображающая, какие зоны сейчас настраивает пользователь.
На экране «Виджеты» представлены все виджеты в полноразмерном виде, отображающие актуальную информацию, а также смарт-виджет. На экране «Быстрые действия» находятся все доступные пользователю действия, включая смарт-действия. Экран «Банковские продукты» отображает все продукты банка, которыми пользуется клиент; их можно скрывать, показывать и располагать в соответствии с его финансовыми целями и задачами.
Для наглядности создан прототип.
Достаточно выбрать смарт-виджет и смарт-действия в настройках. В основе этой функции лежит искусственный интеллект, который анализирует ваши привычки, предпочтения и контекст текущей ситуации.
Система изучает, какие действия вы чаще всего выполняете в определенное время суток, где находитесь и какие операции совершали ранее. На основе этих данных она формирует персонализированные подсказки, стремясь предугадать ваши следующие шаги.
Чтобы улучшить пользовательский опыт, важно учитывать зоны большого пальца — концепцию "The Thumb Zone", введённую Стивеном Хубером (Steven Hoober).
Мобильный банк — это приложение, которое должно иметь высокую скорость доступа к необходимым инструментам в любой ситуации. Большинство людей держат телефон одной рукой, поэтому необходимо учитывать размещение основных элементов в соответствии с этой концепцией. Не стоит задачи располагать элементы строго в зонах лёгкого доступа или в нейтральной зоне и обходить стороной труднодоступные зоны, но учитывать их необходимо.
Поговорим о зонах.
#01 - Удобная для нажатия область, куда большой палец легко дотягивается.
#02 - Требует небольшого движения рукой, не всегда удобна.
#03 - сложно дотянуться без смены хвата.
Таким образом, в концепте сторис не требует высокой скорости доступа, поэтому его можно разместить в труднодоступной зоне. Виджеты несут информационный характер, но остаются важными для пользователя, поэтому я разместил их в нейтральной зоне. Быстрые действия и продукты банка — ключевые элементы, поэтому они находятся в зоне лёгкого доступа.
Все страницы собраны по принципу атомарного дизайна: маленькие элементы объединяются в сложные компоненты.
Персонализация индивидуальна, и после интервью с респондентами стало ясно, что у пользователей разные цели и предпочтения к банковским продуктам. Методология позволяет быстро персонализировать экран, сохраняя при этом консистентность UI в продукте.
Для тестирования были собраны три различных прототипа, соответствующих нуждам респондентов. В основном тесты включали задания на поиск различных функций. Некоторые вопросы были завуалированы, например: «Что бы вы сделали, если бы сын отправил сообщение: "Мама, отправь мне 500 рублей"?». В завершение провел небольшой A/B-тест, чтобы определить, улучшился ли результат.
В ходе тестирования выявлены проблемные места, среди которых наиболее значимыми стали:
Кнопки быстрых действий выглядели одинаково, что затрудняло быстрое выполнение нужного действия. Респонденты тратили время на чтение подписей, чтобы понять назначение каждой кнопки.
Виджеты не соответствовали светлой теме, выбивались из общего дизайна, а информация на них была слишком мелкой для восприятия.
Излишнее количество иконок – разнонаправленные иконки в виде стрелок не давали пользователям четкого понимания ожидаемого результата при взаимодействии.
Все замечания были учтены и исправлены в последующих итерациях. В ходе тестирования найдено оптимальное решение.
В ходе работы я столкнулся с большим объемом информации: в интернете можно найти как множество личных мнений, так и исследования, которые порой противоречат друг другу. Это затрудняло процесс, так как на проект было выделено всего два месяца. При наличии большего количества времени я бы уделил больше внимания исследованиям, расширил выборку респондентов в качественных исследованиях и дополнил гипотезы количественными данными.
Персонализация имеет большой потенциал. Т-Банк содержит много продуктов и ребята идут большими шагами к созданию экосистемы. Персонализация помогает объединить все продукты в одном приложении и упростить их управление для пользователей. В дальнейшем оптимальным решением было бы разделить ее на составляющие и рассматривать в рамках отдельных дизайн-процессов.
Я постарался пройти полный путь дизайн-процесса: от исследования и анализа потребностей пользователей до создания и тестирования прототипов. Теперь, после всех улучшений и проверок, перед вами финальная версия дизайна главного экрана мобильного банка Т-Банк.
