Редизайн страницы РКО в существующем UI

Я провёл интервью с заказчиком по методике «Исполнитель понимает задачу» от Бюро Горбунова. Чтобы лучше понять проблему и позицию заказчика, мне нужно было узнать, из чего строятся гипотезы и к какому результату хочется прийти. Чтобы всё получилось, я задавал кучу открытых вопросов. Например: «Почему именно редизайн страницы решит проблему? В чём недостатки текущего решения по вашему мнению? Какие результаты оно давало? Кто будет пользоваться страницей и для чего она им нужна?»

С интерфейсом страницы реально были проблемы. Немного из того, что я нашёл в Яндекс Метрике:

[1] Действия. Что сейчас делает клиент, чтобы отправить заявку на РКО?

Встретились с заказчиком и другими стейкхолдерами, чтобы построить CJM, лучше понять текущий процесс и целевую аудиторию. В результате составили карту по 5 пунктам:

[2] Потребности. Что клиенту хочется и необходимо в контексте нашей задачи?

[3] Точки контакта. Где, как и как долго пользователь взаимодействует с нашим продуктом?

[4] Эмоции клиента. Какие этапы пути удобны для пользователя, а какие вызывают негатив?

[5] Выводы и гипотезы. Резюме текущего пути и предложения к его улучшению

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

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

Если мы подберём тариф под задачи конкретного бизнеса быстрее, чем конкуренты, то потенциально увеличим количество заявок и повысим лояльность к бренду

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

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

Тёплый трафик → знают о банке и потенциально готовы иметь с ним дело → увидят тариф под их бизнес → если не готовы отправить заявку, создадим дополнительную ценность блоками о банковских сервисах

🎯 Целью было сделать так, чтобы у пользователя не было необходимости смотреть подробные условия и другие тарифы — вся нужная информация находится прямо в подборщике

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

Вместо тяжёлой таблицы сравнения тарифов я сделал карточки. Бизнес запланировал уменьшить количество тарифов до трёх, а под такой объём карточки очень удобно встают. Сравнивать тарифы станет проще без лишних скроллов вниз-вверх. В карточках находятся только те параметры, которые наиболее интересны предпринимателям из нашей ЦА, всё остальное — в pdf-файле с полными условиями.

Карточки тарифов связаны с подборщиком: в зависимости от подобранного тарифа, порядок карточек меняется: слева — наиболее подходящий вариант, а справа — наименее

Прототип десктопного макета отдали на коридорное тестирование, чтобы проверить на целевой аудитории гипотезу №1 и найти затыки в пути пользователя. В исследовании участвовало 10 респондентов

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

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

Я создал чек-лист для проверки страницы на готовность к разработке. В нём находятся рекомендации для дизайнеров по «очищению» макета от косяков и прочих дизайнерских «автолэйаутов в автолэйауте». Так мы помогаем разработчикам правильно реализовать наши задумки на проде и меньше править итоговую страницу после релиза

Все новые компоненты я отправляю в UI-библиотеку и пишу спецификациии и гайды при необходимости. Вот пример с подборщиком тарифов:

На 44,5% увеличилась конверсия в заявку на открытие счёта после релиза нового подборщика и карточек тарифов