CRM-маркетинг
Website · CRM company
Понять предложение
Разобраться в преимуществах и условиях карты до заполнения заявки.
00:00
Mar 29, 2026
Переосмыслила лендинг карты: от визуального акцента к заявке
Редизайн банковского лендинга для A/B-теста: мобильный сценарий, 3D-визуал, крупная типографика и UI-кит. Моя роль — веб-дизайн и арт-дирекшн.
Category:
Web Design
/* Problem */
С какой задачи началась работа
Новая страница должна была представить флагманскую карту и стать вариантом для A/B-теста. Задача включала редизайн, создание 3D-моделей и вёрстку.
Фокус — связать выразительную подачу продукта с понятными условиями и переходом к оформлению, особенно на мобильном экране.
/* Task framing */
Как разложила задачу по участникам и целям
Постановка объединяет пользовательскую задачу, цель проекта и область дизайна. Это синтез имеющихся материалов.
Проверить новый вариант
Сравнить новую страницу с исходной в A/B-тесте, а не выбирать дизайн только по впечатлению.
Собрать иерархию
Распределить внимание между продуктовым образом, условиями и действием.
Довести до реализации
Макеты, UI-кит, вёрстка, дизайн-контроль и пояснения в Loom входят в описанную работу.
/* Process */
Как была организована работа
Последовательность собрана из исходного описания и опубликованных артефактов; точные сроки отдельных этапов не заявляются.
Сценарий
Проектирование пользовательского пути и прототипирование страниц и состояний.
Визуальная система
Обновление визуального языка, 3D-модели, типографика и UI-кит.
Реализация
Подготовка и вёрстка страницы; арт-дирекшн и дизайн-контроль.
Обсуждение и тест
Планирование спринтов, созвоны с клиентом, скринкасты Loom и вариант для A/B-теста.
/* Evidence */
Вариант для эксперимента, а не только новый визуал
В исходном кейсе указано, что A/B-тест дал положительный результат. Конкретная метрика, величина эффекта, выборка и статистическая оценка не приведены — численный рост здесь не заявляется.
Мобильная и десктопная версии
Видны первый экран, условия, форма заявки и блоки преимуществ.
Дизайн и реализация
В описании подтверждены 3D, UI-кит, вёрстка и дизайн-контроль.
/* Decision map */
Связала визуальный акцент с продуктовым действием
Карта решений объясняет композицию готовых макетов. Ожидаемое влияние каждого приёма — гипотеза, а не отдельный подтверждённый результат теста.
01 · Фокус
Первое впечатление
Решение
Крупный заголовок и 3D-образ карты
Как проверить
Проверить, правильно ли человек понимает продукт после первого экрана.
02 · Фокус
Условия до заявки
Решение
Основные параметры собраны в читаемые блоки
Как проверить
Проверить понимание условий и переход к форме без лишнего поиска.
03 · Фокус
Мобильный путь
Решение
Вертикальная композиция и заметное основное действие
Как проверить
Проверить заполнение формы и ошибки на небольшом экране.
/* Flow */
От предложения к оформлению
Схема реконструирует путь по опубликованным макетам; банковское решение и дальнейшая выдача карты находятся за пределами показанного лендинга.
- 01
Увидеть карту
Первый экран и ключевое предложение.
- 02
Изучить условия
Преимущества и параметры продукта.
- 03
Перейти к форме
Осознанно начать оформление.
- 04
Заполнить заявку
Проверить поля и завершение отправки.
Условия неясныПроверить, можно ли получить пояснение до начала заявки.
Ошибка в формеУточнить тексты ошибок и сохранение введённых данных.
Заявка отправленаОтдельно проверить подтверждение: клик не равен отправке.
/* Artifact 01 */
Мобильный сценарий
Мобильная версия сохраняет ключевое предложение, условия и форму в последовательном вертикальном пути.
/* Artifact 02 */
3D как часть визуального языка
Показаны варианты продуктового изображения и его место на первом экране.
/* Artifact 03 */
Условия и оформление рядом
Десктопные экраны показывают форму и структурированную подачу параметров карты.
/* Artifact 04 */
Преимущества поддерживают решение
Дополнительные блоки раскрывают предложение по мере продвижения по странице.
/* Outcome */
Что было готово по итогам работы
Подготовлен редизайн с мобильной версией, 3D-материалами и UI-китом. Исходное описание отмечает положительный результат A/B-теста без раскрытия расчётов.
Продуктовая подача
Собраны предложение, условия и оформление.
Целостная реализация
Дизайн соединён с вёрсткой и контролем качества.
Проверяемый вариант
Новая страница подготовлена для сравнения в эксперименте.
/* Measurement plan */
Как оценивать результат дальше
Предлагаемые показатели, а не дополнительные заявленные достижения. Базовые значения, цели, период и владельца измерений необходимо согласовать до сравнения.
Завершённые заявки
Уникальные пользователи с подтверждённой отправкой / пользователи, включённые в вариант эксперимента. Источник — распределение A/B и событие успешной отправки.
Потери в форме
Начало → отправка, ошибки по полям и устройствам. Это помогает отделить проблемы формы от подачи предложения.
Качество, а не объём
Валидность заявок и ошибки загрузки — защитные показатели. Сравнивать варианты за один период; размеры выборки и критерий остановки согласовать заранее.
/* Reflection */
Что делает этот кейс сильным
Сильная сторона проекта — связь арт-дирекшна с проверяемым продуктовым сценарием. Следующий шаг для полноты кейса — раскрыть протокол A/B-теста и показать, что именно изменилось в поведении, а не только во внешнем виде.
