Редизайн лендинга о продукте
Q2 2025
Контекст
Текущий лендинг кредитной карты МТС Деньги на сайте МТС Банка устарел с точки зрения UI и UX, структуры страницы и сторителинга, текстов. Также он собран на фабрике лендингов, что закрывает нам возможности для изменений. Поэтому мы решили его пересобрать.
НО: На сайте МТС Банка у нас нет возможности использовать новую дизайн-систему Granat 2.0, так как версия React (кода) на сайте её не поддерживает. То есть для её использования, нужно обновить версию кода на сайте + пересобирать всё на новых компонентах нужно централизованно всем командам, а не по отдельности каждой. Поэтому мы решили пересобрать всё на старой дизайн-системе Granat 1.0, но с новым подходом, чтобы протестировать свои гипотезы, а потом как будет возможность, то перенесем это на новый UI-Kit.
AS IS
Скриншоты текущего лендинга, апрель 2025
TO BE
Макеты нового лендинга, июнь 2025
Пользовательские проблемы
Мы не проводили предварительное исследование на пользователях для фиксации проблем текущего лендинга, так как решили, что будем отталкиваться от данных по метрикам, которые у нас есть + от собственной экспертизы, соберём прототип нового лендинга и уже тогда проведём юзабилити тестирование с респондентами.
Но в целом, сегмент на сайте МТС Банка — новые клиенты, поэтому мы отталкивались от потенциальных проблем этого сегмента:
Бизнес-проблемы
Гипотезы
Задача
Переработать старый лендинг о кредитке, подготовить прототип для юзабилити тестирования, по результатам внести правки и передать в разработку новый лендинг.
Процесс
Решение
Несмотря на ограничения старой дизайн-системы, получилось собрать достаточно симпатичный новый лендинг, который очень хочется протестировать скорее на пользователях.
AS IS
TO BE
Первый экран старого лендинга был перегружен, а бенефиты плохо выделялись на фоне остальной информации, поэтому я пересобрал эту часть и разделил её на смысловые блоки. Первое — это встречающий пользователя заголовок и подзаголовок, цель которых обозначить куда попал пользователь и в чём ценность листать дальше + картинка (сделали новую) + кнопка, которая ведёт на якорь с анкетой и в целом прилипает после этого экрана к нижней границе. Второе — абсолютно вся информация о карте, упакованная в карточки с яркими иллюстрациями, чтобы завлечь и дать достаточно информации для принятия решения — оформлять или нет кредитку у нас.
AS IS
TO BE
Далее по структуре мы рассказываем “Как получить карту” и даём анкету. В целом мы решили так и оставить, только пересобрать всё по дизайну, текстам, а также встроить новую анкету вместо старой.
AS IS
TO BE
Далее по структуре старого лендинга аккордеон, который нужен для SEO оптимизации лендинга, а потом подвал и всё. Мы пошли другим путём и пообщавшись с спецами по SEO, решили убрать аккордеон в табы с юридической информацией, оптимизирова старницу. Также мы добавили блок про кешбэк, льготный период, подписку МТС Premium и перед футером новый блок для сбора фидбэка от пользователей.
Результаты
Как писал выше, эта задача пока в бэклоге, поэтому имеримых результатов нет. Но если порассуждать, то мы бы проверяли успех или неуспех по следующим метрикам:
© 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
Пользовательские проблемы
Мы не проводили предварительное исследование на пользователях для фиксации проблем текущего лендинга, так как решили, что будем отталкиваться от данных по метрикам, которые у нас есть + от собственной экспертизы, соберём прототип нового лендинга и уже тогда проведём юзабилити тестирование с респондентами.
Но в целом, сегмент на сайте МТС Банка — новые клиенты, поэтому мы отталкивались от потенциальных проблем этого сегмента:
Бизнес-проблемы
Гипотезы
Задача
Переработать старый лендинг о кредитке, подготовить прототип для юзабилити тестирования, по результатам внести правки и передать в разработку новый лендинг.
Процесс
Решение
Несмотря на ограничения старой дизайн-системы, получилось собрать достаточно симпатичный новый лендинг, который очень хочется протестировать скорее на пользователях.
AS IS
TO BE
Первый экран старого лендинга был перегружен, а бенефиты плохо выделялись на фоне остальной информации, поэтому я пересобрал эту часть и разделил её на смысловые блоки. Первое — это встречающий пользователя заголовок и подзаголовок, цель которых обозначить куда попал пользователь и в чём ценность листать дальше + картинка (сделали новую) + кнопка, которая ведёт на якорь с анкетой и в целом прилипает после этого экрана к нижней границе. Второе — абсолютно вся информация о карте, упакованная в карточки с яркими иллюстрациями, чтобы завлечь и дать достаточно информации для принятия решения — оформлять или нет кредитку у нас.
AS IS
TO BE
Далее по структуре мы рассказываем “Как получить карту” и даём анкету. В целом мы решили так и оставить, только пересобрать всё по дизайну, текстам, а также встроить новую анкету вместо старой.
AS IS
TO BE
Далее по структуре старого лендинга аккордеон, который нужен для SEO оптимизации лендинга, а потом подвал и всё. Мы пошли другим путём и пообщавшись с спецами по SEO, решили убрать аккордеон в табы с юридической информацией, оптимизирова старницу. Также мы добавили блок про кешбэк, льготный период, подписку МТС Premium и перед футером новый блок для сбора фидбэка от пользователей.
Результаты
Как писал выше, эта задача пока в бэклоге, поэтому имеримых результатов нет. Но если порассуждать, то мы бы проверяли успех или неуспех по следующим метрикам:
© 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
Пользовательские проблемы
Мы не проводили предварительное исследование на пользователях для фиксации проблем текущего лендинга, так как решили, что будем отталкиваться от данных по метрикам, которые у нас есть + от собственной экспертизы, соберём прототип нового лендинга и уже тогда проведём юзабилити тестирование с респондентами.
Но в целом, сегмент на сайте МТС Банка — новые клиенты, поэтому мы отталкивались от потенциальных проблем этого сегмента:
Бизнес-проблемы
Гипотезы
Задача
Переработать старый лендинг о кредитке, подготовить прототип для юзабилити тестирования, по результатам внести правки и передать в разработку новый лендинг.
Процесс
Решение
Несмотря на ограничения старой дизайн-системы, получилось собрать достаточно симпатичный новый лендинг, который очень хочется протестировать скорее на пользователях.
AS IS
TO BE
Первый экран старого лендинга был перегружен, а бенефиты плохо выделялись на фоне остальной информации, поэтому я пересобрал эту часть и разделил её на смысловые блоки. Первое — это встречающий пользователя заголовок и подзаголовок, цель которых обозначить куда попал пользователь и в чём ценность листать дальше + картинка (сделали новую) + кнопка, которая ведёт на якорь с анкетой и в целом прилипает после этого экрана к нижней границе. Второе — абсолютно вся информация о карте, упакованная в карточки с яркими иллюстрациями, чтобы завлечь и дать достаточно информации для принятия решения — оформлять или нет кредитку у нас.
AS IS
TO BE
Далее по структуре мы рассказываем “Как получить карту” и даём анкету. В целом мы решили так и оставить, только пересобрать всё по дизайну, текстам, а также встроить новую анкету вместо старой.
AS IS
TO BE
Далее по структуре старого лендинга аккордеон, который нужен для SEO оптимизации лендинга, а потом подвал и всё. Мы пошли другим путём и пообщавшись с спецами по SEO, решили убрать аккордеон в табы с юридической информацией, оптимизирова старницу. Также мы добавили блок про кешбэк, льготный период, подписку МТС Premium и перед футером новый блок для сбора фидбэка от пользователей.
Результаты
Как писал выше, эта задача пока в бэклоге, поэтому имеримых результатов нет. Но если порассуждать, то мы бы проверяли успех или неуспех по следующим метрикам:
© 2025 Made by Nikita Samulenkov.
All rights reserved.