Редизайн флоу оформления кредитки

Q4 2024 — Q1 2025

Интро

В среднем около 200 000 заявок на кредитку ежемесячно получает и обрабатывает банк. Из них около 25 000 клиентов получают одобрение и начинают пользоваться картой.

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

В рамках этого проекта мы переосмыслили текущий UI и UX, создали единый и бесшовный путь оформления кредитной карты, собранный на новой дизайн-системе Granat 2.0 с учётом всех требований по доступности, с ёмкими и человечными текстами, красивым интерфейсом. Наша цель — упростить флоу для пользователей и дать бизнесу гибкий инструмент, который можно масштабировать и быстро развивать с меньшими трудозатратами и меньшим количеством ошибок.

AS IS

На картинке часть флоу оформления виртуальной карты, а также скрин из фигмы с макетами старой анкеты

TO BE

На картинке часть нового флоу оформления виртуальной карты, а также скрин из фигмы с макетами новой анкеты

Контекст

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

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

Цель банка — развивать новый личный кабинет под брендом «МТС Деньги», и нам требовалось перенести все процессы в новый ЛК «МТС Деньги», и сделать флоу единым для всех каналов (WEB + webview в приложениях).

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

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

Бизнес-проблемы

  • Редкие релизы (раз в 3 недели);
  • Сложно вносить доработки в интерфейс, так как используется старый UI-kit и многие баги просто нельзя исправить, соответственно сложно развивать продукт, много ограничений;
  • Устаревший UX/UI всего флоу, особенно части функционала безбумажного подписания КК;
  • Много разных флоу для разных каналов, все кастомные, которые сложно поддерживать, нативные анкеты в APP на IOS вообще из-за сложностей с релизом практически невозможно.

Гипотезы

  • Флоу, собранный на новом UI-kitе и оптимизированный по части UX/UI, снизит когнитивную нагрузку у пользователей, упростит заполнение анкеты на КК, увеличив конверсию в отправку заявки на 10пп;
  • Новые компоненты будут лучше работать, чем старые, так как написаны на более чистом коде, соответственно кол-во ошибок, связанных с взаимодействием с компонентами уменьшится;
  • Повышение персонализации флоу для пользователей с персональным предложением, повысит конверсию в отправку заявки для этого сегмента на 5пп

Задача

  • Переработать UX анкеты и снизить когнитивную нагрузку;
  • Объединить разрозненные сценарии в один флоу;
  • Повысить конверсию в отправку заявки и в подписание карты;
  • Разработать один флоу, который будет жить в ЛК на WEB, а в приложениях запускаться в формате webview, тем самым мы сможем быстро управлять изменениями и быстро тестировать новые гипотезы.

Процесс

  1. Синк с продактом, разработчиком, аналитиком, редактором для обсуждения новой задачи, проблем текущего решения, которые хотим решить, целей и метрик, к которым хотим прийти, ограничений и имеющихся ресурсов. В результате имеем понятный всем участникам план работы;
  2. Анализ текущего флоу по методу Red Dots, формирование гипотез и идей, отрисовка драфтов и организация встречи тем же составом, чтобы получить обратную связь и синхронизировать вектор работы;
  3. Детальная проработка макетов CJM, текстов, финальная сборка файла и запуск процесса согласований;
  4. Фронт-ревью разработанного флоу и запуск в прод.

Решение

  • Единый для всех каналов флоу оформления КК, собранный на новой дизайн-системе с поддержкой тёмной темы;
  • Простая анкета с понятными полями и подсказками;
  • Информативный и удобный экран Одобрения & Подписания;
  • Удобный выбор способа получения карты.

AS IS

TO BE

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

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

AS IS

TO BE

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

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

Результаты

  • Конверсия в отправку заявки в новой анкете в ЛК МТС Деньги на том же уровне, что и старая анкета в Payment. Это связано с тем, что в новом ЛК у нас меньше клиентов, меньше данных о них и ниже процент предзаполнения. Также мы двигаемся итерационно по реализации самого флоу и еще дорабатываем всё до состояния “как в макетах”;
  • Конверсия в подписание карты (take rate) на 5% выше чем в старой анкете;
  • Сокращение релизного цикла с 3 недель до 1 недели;
  • Главный канал продаж — приложение банка, в нём 80% всего трафика, из которых 70% Android и 30% iOS. Старая нативная анкета Android имела конверсию 50% , новая анкета показывает конверсию 66%

Рефлексия

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

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

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

© 2025 Made by Nikita Samulenkov.

All rights reserved.

Редизайн флоу оформления кредитки

Q4 2024 — Q1 2025

Интро

В среднем около 200 000 заявок на кредитку ежемесячно получает и обрабатывает банк. Из них около 25 000 клиентов получают одобрение и начинают пользоваться картой.

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

В рамках этого проекта мы переосмыслили текущий UI и UX, создали единый и бесшовный путь оформления кредитной карты, собранный на новой дизайн-системе Granat 2.0 с учётом всех требований по доступности, с ёмкими и человечными текстами, красивым интерфейсом. Наша цель — упростить флоу для пользователей и дать бизнесу гибкий инструмент, который можно масштабировать и быстро развивать с меньшими трудозатратами и меньшим количеством ошибок.

AS IS

На картинке часть флоу оформления виртуальной карты, а также скрин из фигмы с макетами старой анкеты

TO BE

На картинке часть нового флоу оформления виртуальной карты, а также скрин из фигмы с макетами новой анкеты

Контекст

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

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

Цель банка — развивать новый личный кабинет под брендом «МТС Деньги», и нам требовалось перенести все процессы в новый ЛК «МТС Деньги», и сделать флоу единым для всех каналов (WEB + webview в приложениях).

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

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

Бизнес-проблемы

  • Редкие релизы (раз в 3 недели);
  • Сложно вносить доработки в интерфейс, так как используется старый UI-kit и многие баги просто нельзя исправить, соответственно сложно развивать продукт, много ограничений;
  • Устаревший UX/UI всего флоу, особенно части функционала безбумажного подписания КК;
  • Много разных флоу для разных каналов, все кастомные, которые сложно поддерживать, нативные анкеты в APP на IOS вообще из-за сложностей с релизом практически невозможно.

Гипотезы

  • Флоу, собранный на новом UI-kitе и оптимизированный по части UX/UI, снизит когнитивную нагрузку у пользователей, упростит заполнение анкеты на КК, увеличив конверсию в отправку заявки на 10пп;
  • Новые компоненты будут лучше работать, чем старые, так как написаны на более чистом коде, соответственно кол-во ошибок, связанных с взаимодействием с компонентами уменьшится;
  • Повышение персонализации флоу для пользователей с персональным предложением, повысит конверсию в отправку заявки для этого сегмента на 5пп

Задача

  • Переработать UX анкеты и снизить когнитивную нагрузку;
  • Объединить разрозненные сценарии в один флоу;
  • Повысить конверсию в отправку заявки и в подписание карты;
  • Разработать один флоу, который будет жить в ЛК на WEB, а в приложениях запускаться в формате webview, тем самым мы сможем быстро управлять изменениями и быстро тестировать новые гипотезы.

Процесс

  1. Синк с продактом, разработчиком, аналитиком, редактором для обсуждения новой задачи, проблем текущего решения, которые хотим решить, целей и метрик, к которым хотим прийти, ограничений и имеющихся ресурсов. В результате имеем понятный всем участникам план работы;
  2. Анализ текущего флоу по методу Red Dots, формирование гипотез и идей, отрисовка драфтов и организация встречи тем же составом, чтобы получить обратную связь и синхронизировать вектор работы;
  3. Детальная проработка макетов CJM, текстов, финальная сборка файла и запуск процесса согласований;
  4. Фронт-ревью разработанного флоу и запуск в прод.

Решение

  • Единый для всех каналов флоу оформления КК, собранный на новой дизайн-системе с поддержкой тёмной темы;
  • Простая анкета с понятными полями и подсказками;
  • Информативный и удобный экран Одобрения & Подписания;
  • Удобный выбор способа получения карты.

AS IS

TO BE

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

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

AS IS

TO BE

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

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

Результаты

  • Конверсия в отправку заявки в новой анкете в ЛК МТС Деньги на том же уровне, что и старая анкета в Payment. Это связано с тем, что в новом ЛК у нас меньше клиентов, меньше данных о них и ниже процент предзаполнения. Также мы двигаемся итерационно по реализации самого флоу и еще дорабатываем всё до состояния “как в макетах”;
  • Конверсия в подписание карты (take rate) на 5% выше чем в старой анкете;
  • Сокращение релизного цикла с 3 недель до 1 недели;
  • Главный канал продаж — приложение банка, в нём 80% всего трафика, из которых 70% Android и 30% iOS. Старая нативная анкета Android имела конверсию 50% , новая анкета показывает конверсию 66%

Рефлексия

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

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

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

© 2025 Made by Nikita Samulenkov.

All rights reserved.

Редизайн флоу оформления кредитки

Q4 2024 — Q1 2025

Интро

В среднем около 200 000 заявок на кредитку ежемесячно получает и обрабатывает банк. Из них около 25 000 клиентов получают одобрение и начинают пользоваться картой.

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

В рамках этого проекта мы переосмыслили текущий UI и UX, создали единый и бесшовный путь оформления кредитной карты, собранный на новой дизайн-системе Granat 2.0 с учётом всех требований по доступности, с ёмкими и человечными текстами, красивым интерфейсом. Наша цель — упростить флоу для пользователей и дать бизнесу гибкий инструмент, который можно масштабировать и быстро развивать с меньшими трудозатратами и меньшим количеством ошибок.

AS IS

На картинке часть флоу оформления виртуальной карты, а также скрин из фигмы с макетами старой анкеты

TO BE

На картинке часть нового флоу оформления виртуальной карты, а также скрин из фигмы с макетами новой анкеты

Контекст

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

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

Цель банка — развивать новый личный кабинет под брендом «МТС Деньги», и нам требовалось перенести все процессы в новый ЛК «МТС Деньги», и сделать флоу единым для всех каналов (WEB + webview в приложениях).

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

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

Бизнес-проблемы

  • Редкие релизы (раз в 3 недели);
  • Сложно вносить доработки в интерфейс, так как используется старый UI-kit и многие баги просто нельзя исправить, соответственно сложно развивать продукт, много ограничений;
  • Устаревший UX/UI всего флоу, особенно части функционала безбумажного подписания КК;
  • Много разных флоу для разных каналов, все кастомные, которые сложно поддерживать, нативные анкеты в APP на IOS вообще из-за сложностей с релизом практически невозможно.

Гипотезы

  • Флоу, собранный на новом UI-kitе и оптимизированный по части UX/UI, снизит когнитивную нагрузку у пользователей, упростит заполнение анкеты на КК, увеличив конверсию в отправку заявки на 10пп;
  • Новые компоненты будут лучше работать, чем старые, так как написаны на более чистом коде, соответственно кол-во ошибок, связанных с взаимодействием с компонентами уменьшится;
  • Повышение персонализации флоу для пользователей с персональным предложением, повысит конверсию в отправку заявки для этого сегмента на 5пп

Задача

  • Переработать UX анкеты и снизить когнитивную нагрузку;
  • Объединить разрозненные сценарии в один флоу;
  • Повысить конверсию в отправку заявки и в подписание карты;
  • Разработать один флоу, который будет жить в ЛК на WEB, а в приложениях запускаться в формате webview, тем самым мы сможем быстро управлять изменениями и быстро тестировать новые гипотезы.

Процесс

  1. Синк с продактом, разработчиком, аналитиком, редактором для обсуждения новой задачи, проблем текущего решения, которые хотим решить, целей и метрик, к которым хотим прийти, ограничений и имеющихся ресурсов. В результате имеем понятный всем участникам план работы;
  2. Анализ текущего флоу по методу Red Dots, формирование гипотез и идей, отрисовка драфтов и организация встречи тем же составом, чтобы получить обратную связь и синхронизировать вектор работы;
  3. Детальная проработка макетов CJM, текстов, финальная сборка файла и запуск процесса согласований;
  4. Фронт-ревью разработанного флоу и запуск в прод.

Решение

  • Единый для всех каналов флоу оформления КК, собранный на новой дизайн-системе с поддержкой тёмной темы;
  • Простая анкета с понятными полями и подсказками;
  • Информативный и удобный экран Одобрения & Подписания;
  • Удобный выбор способа получения карты.

AS IS

TO BE

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

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

AS IS

TO BE

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

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

Результаты

  • Конверсия в отправку заявки в новой анкете в ЛК МТС Деньги на том же уровне, что и старая анкета в Payment. Это связано с тем, что в новом ЛК у нас меньше клиентов, меньше данных о них и ниже процент предзаполнения. Также мы двигаемся итерационно по реализации самого флоу и еще дорабатываем всё до состояния “как в макетах”;
  • Конверсия в подписание карты (take rate) на 5% выше чем в старой анкете;
  • Сокращение релизного цикла с 3 недель до 1 недели;
  • Главный канал продаж — приложение банка, в нём 80% всего трафика, из которых 70% Android и 30% iOS. Старая нативная анкета Android имела конверсию 50% , новая анкета показывает конверсию 66%

Рефлексия

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

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

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

© 2025 Made by Nikita Samulenkov.

All rights reserved.