Редизайн лендинга о продукте

Q2 2025

Контекст

Текущий лендинг кредитной карты МТС Деньги на сайте МТС Банка устарел с точки зрения UI и UX, структуры страницы и сторителинга, текстов. Также он собран на фабрике лендингов, что закрывает нам возможности для изменений. Поэтому мы решили его пересобрать.

НО: На сайте МТС Банка у нас нет возможности использовать новую дизайн-систему Granat 2.0, так как версия React (кода) на сайте её не поддерживает. То есть для её использования, нужно обновить версию кода на сайте + пересобирать всё на новых компонентах нужно централизованно всем командам, а не по отдельности каждой. Поэтому мы решили пересобрать всё на старой дизайн-системе Granat 1.0, но с новым подходом, чтобы протестировать свои гипотезы, а потом как будет возможность, то перенесем это на новый UI-Kit.

AS IS

Скриншоты текущего лендинга, апрель 2025

TO BE

Макеты нового лендинга, июнь 2025

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

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

Но в целом, сегмент на сайте МТС Банка — новые клиенты, поэтому мы отталкивались от потенциальных проблем этого сегмента:

  • Если я ранее не пользовался кредитками, то непонятно как работает льготный период;
  • Сложно считывать условия по карте, так как что-то в одном блоке, что-то в другом, что-то в разделе подробнее о карте.

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

  • Старый лендинг собран на фабрике лендингов, что не даёт возможности редактировать код и добавлять свои блоки, что мешает поддерживать этот канал продаж, тестировать новые гипотезы;
  • МТС Банк — большой источник трафика новых клиентов, один из самых крупных каналов, но конверсия в нём низкая, пример за месяц: 210К заходов на лендинг, из которых 70% пользователей увидели форму заявки, 35% начали заполнять, 25% отправили. Хочется улучшить конверсию минимум на 10%.

Гипотезы

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

Задача

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

Процесс

  1. Я был инициатором задачи, поэтому после получения аппрува от своего продакта, я собрал небольшую команду для брейншторма: я (дизайнер), продакт, разработчик, аналитик, исследователь, редактор, маркетолог. Мы провели ряд таких встреч, определив по методу RED dots проблемы текущего лендинга, вектор, в котором хотим двигаться;
  2. Я провёл анализ рынка, собрал инсайты с лендингов конкурентов, и после нескольких драфтов, мы утвердили концепцию. Я завёл задачи на маркетолога, редактора, и каждый ушёл в проработку деталей;
  3. Предварительно финализировав и утвердив макет со всеми участниками + моим дизайн-лидом, всё было готово к юзабилити тестированию, но нам пришлось поменять приоритеты и отложить данную задачу в пользу более горящих и критичных задач. Поэтому пока эта задача в статусе “готова к исследованию”, и рано или поздно мы к ней вернёмся.

Решение

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

AS IS

TO BE

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

AS IS

TO BE

Далее по структуре мы рассказываем “Как получить карту” и даём анкету. В целом мы решили так и оставить, только пересобрать всё по дизайну, текстам, а также встроить новую анкету вместо старой.

AS IS

TO BE

Далее по структуре старого лендинга аккордеон, который нужен для SEO оптимизации лендинга, а потом подвал и всё. Мы пошли другим путём и пообщавшись с спецами по SEO, решили убрать аккордеон в табы с юридической информацией, оптимизирова старницу. Также мы добавили блок про кешбэк, льготный период, подписку МТС Premium и перед футером новый блок для сбора фидбэка от пользователей.

Результаты

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

  • GAP между пользователями, которые зашли на лендинг и теми, кто долистал до анкеты, и теми, кто отправил заявку снизился на Х%;
  • Рост конверсии в отправку заявки на Y%.

© 2025 Made by Nikita Samulenkov.

All rights reserved.

Редизайн лендинга о продукте

Q2 2025

Контекст

Текущий лендинг кредитной карты МТС Деньги на сайте МТС Банка устарел с точки зрения UI и UX, структуры страницы и сторителинга, текстов. Также он собран на фабрике лендингов, что закрывает нам возможности для изменений. Поэтому мы решили его пересобрать.

НО: На сайте МТС Банка у нас нет возможности использовать новую дизайн-систему Granat 2.0, так как версия React (кода) на сайте её не поддерживает. То есть для её использования, нужно обновить версию кода на сайте + пересобирать всё на новых компонентах нужно централизованно всем командам, а не по отдельности каждой. Поэтому мы решили пересобрать всё на старой дизайн-системе Granat 1.0, но с новым подходом, чтобы протестировать свои гипотезы, а потом как будет возможность, то перенесем это на новый UI-Kit.

AS IS

Скриншоты текущего лендинга, апрель 2025

TO BE

Макеты нового лендинга, июнь 2025

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

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

Но в целом, сегмент на сайте МТС Банка — новые клиенты, поэтому мы отталкивались от потенциальных проблем этого сегмента:

  • Если я ранее не пользовался кредитками, то непонятно как работает льготный период;
  • Сложно считывать условия по карте, так как что-то в одном блоке, что-то в другом, что-то в разделе подробнее о карте.

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

  • Старый лендинг собран на фабрике лендингов, что не даёт возможности редактировать код и добавлять свои блоки, что мешает поддерживать этот канал продаж, тестировать новые гипотезы;
  • МТС Банк — большой источник трафика новых клиентов, один из самых крупных каналов, но конверсия в нём низкая, пример за месяц: 210К заходов на лендинг, из которых 70% пользователей увидели форму заявки, 35% начали заполнять, 25% отправили. Хочется улучшить конверсию минимум на 10%.

Гипотезы

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

Задача

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

Процесс

  1. Я был инициатором задачи, поэтому после получения аппрува от своего продакта, я собрал небольшую команду для брейншторма: я (дизайнер), продакт, разработчик, аналитик, исследователь, редактор, маркетолог. Мы провели ряд таких встреч, определив по методу RED dots проблемы текущего лендинга, вектор, в котором хотим двигаться;
  2. Я провёл анализ рынка, собрал инсайты с лендингов конкурентов, и после нескольких драфтов, мы утвердили концепцию. Я завёл задачи на маркетолога, редактора, и каждый ушёл в проработку деталей;
  3. Предварительно финализировав и утвердив макет со всеми участниками + моим дизайн-лидом, всё было готово к юзабилити тестированию, но нам пришлось поменять приоритеты и отложить данную задачу в пользу более горящих и критичных задач. Поэтому пока эта задача в статусе “готова к исследованию”, и рано или поздно мы к ней вернёмся.

Решение

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

AS IS

TO BE

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

AS IS

TO BE

Далее по структуре мы рассказываем “Как получить карту” и даём анкету. В целом мы решили так и оставить, только пересобрать всё по дизайну, текстам, а также встроить новую анкету вместо старой.

AS IS

TO BE

Далее по структуре старого лендинга аккордеон, который нужен для SEO оптимизации лендинга, а потом подвал и всё. Мы пошли другим путём и пообщавшись с спецами по SEO, решили убрать аккордеон в табы с юридической информацией, оптимизирова старницу. Также мы добавили блок про кешбэк, льготный период, подписку МТС Premium и перед футером новый блок для сбора фидбэка от пользователей.

Результаты

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

  • GAP между пользователями, которые зашли на лендинг и теми, кто долистал до анкеты, и теми, кто отправил заявку снизился на Х%;
  • Рост конверсии в отправку заявки на Y%.

© 2025 Made by Nikita Samulenkov.

All rights reserved.

Редизайн лендинга о продукте

Q2 2025

Контекст

Текущий лендинг кредитной карты МТС Деньги на сайте МТС Банка устарел с точки зрения UI и UX, структуры страницы и сторителинга, текстов. Также он собран на фабрике лендингов, что закрывает нам возможности для изменений. Поэтому мы решили его пересобрать.

НО: На сайте МТС Банка у нас нет возможности использовать новую дизайн-систему Granat 2.0, так как версия React (кода) на сайте её не поддерживает. То есть для её использования, нужно обновить версию кода на сайте + пересобирать всё на новых компонентах нужно централизованно всем командам, а не по отдельности каждой. Поэтому мы решили пересобрать всё на старой дизайн-системе Granat 1.0, но с новым подходом, чтобы протестировать свои гипотезы, а потом как будет возможность, то перенесем это на новый UI-Kit.

AS IS

Скриншоты текущего лендинга, апрель 2025

TO BE

Макеты нового лендинга, июнь 2025

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

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

Но в целом, сегмент на сайте МТС Банка — новые клиенты, поэтому мы отталкивались от потенциальных проблем этого сегмента:

  • Если я ранее не пользовался кредитками, то непонятно как работает льготный период;
  • Сложно считывать условия по карте, так как что-то в одном блоке, что-то в другом, что-то в разделе подробнее о карте.

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

  • Старый лендинг собран на фабрике лендингов, что не даёт возможности редактировать код и добавлять свои блоки, что мешает поддерживать этот канал продаж, тестировать новые гипотезы;
  • МТС Банк — большой источник трафика новых клиентов, один из самых крупных каналов, но конверсия в нём низкая, пример за месяц: 210К заходов на лендинг, из которых 70% пользователей увидели форму заявки, 35% начали заполнять, 25% отправили. Хочется улучшить конверсию минимум на 10%.

Гипотезы

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

Задача

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

Процесс

  1. Я был инициатором задачи, поэтому после получения аппрува от своего продакта, я собрал небольшую команду для брейншторма: я (дизайнер), продакт, разработчик, аналитик, исследователь, редактор, маркетолог. Мы провели ряд таких встреч, определив по методу RED dots проблемы текущего лендинга, вектор, в котором хотим двигаться;
  2. Я провёл анализ рынка, собрал инсайты с лендингов конкурентов, и после нескольких драфтов, мы утвердили концепцию. Я завёл задачи на маркетолога, редактора, и каждый ушёл в проработку деталей;
  3. Предварительно финализировав и утвердив макет со всеми участниками + моим дизайн-лидом, всё было готово к юзабилити тестированию, но нам пришлось поменять приоритеты и отложить данную задачу в пользу более горящих и критичных задач. Поэтому пока эта задача в статусе “готова к исследованию”, и рано или поздно мы к ней вернёмся.

Решение

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

AS IS

TO BE

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

AS IS

TO BE

Далее по структуре мы рассказываем “Как получить карту” и даём анкету. В целом мы решили так и оставить, только пересобрать всё по дизайну, текстам, а также встроить новую анкету вместо старой.

AS IS

TO BE

Далее по структуре старого лендинга аккордеон, который нужен для SEO оптимизации лендинга, а потом подвал и всё. Мы пошли другим путём и пообщавшись с спецами по SEO, решили убрать аккордеон в табы с юридической информацией, оптимизирова старницу. Также мы добавили блок про кешбэк, льготный период, подписку МТС Premium и перед футером новый блок для сбора фидбэка от пользователей.

Результаты

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

  • GAP между пользователями, которые зашли на лендинг и теми, кто долистал до анкеты, и теми, кто отправил заявку снизился на Х%;
  • Рост конверсии в отправку заявки на Y%.

© 2025 Made by Nikita Samulenkov.

All rights reserved.