Повысил количество лидов на 30% при помощи редизайна карточки тарифа
Повысил вхождение в воронку на 59% с последующим ростом конверсии
О компании
ДомИнтернет помогает подобрать и подключить домашний интернет во всём многообразии провайдеров
Главная ценность сервиса — поиск доступных провайдеров и тарифов по точному адресу, вплоть до квартиры
Мы решаем боль миллионов пользователей, когда они не знают, какие провайдеры есть в их доме
Моя роль в рамках задачи
- Автор гипотезы. На цифрах объяснил, почему нам важно уделить внимание этому экрану;
- Исполнитель. Спроектировал и задизайнил решение. Защитил его перед стейкхолдерами и запустил в А/B-тест;
Почему задача была важной
Страница «Подключить интернет в {город}» является ключевой, так как получает больше всего трафика с SEO и рекламы
Любое её изменение повлияет на подавляющее большинство пользователей одновременно. При этом первый экран (вход в воронку) вызывал большие сомнения как на уровне визуала, так и на уровне смыслов.
Ограничения
- Скорость разработки. Одна рабочая неделя от идеи до запуска в тест. Больше всего времени ушло на согласования;
- Нельзя менять интерфейсы за пределами первого экрана;
- Сначала функциональность, потом красота. Все доработки по визуалу будут только после выигравшего теста
С чего начинали
Старая версия блока имела много проблем, расскажу про главные:
- Много текста, но мало смысла. Текст отвечал SEO-интентам, но не пользовательским;
- Текст поверх градиента, который значительно ухудшал читаемость — контрастность плавала от 3,1:1 до 1,39:1, что недостаточно для комфортного чтения;
- Слабый CTA. Внимание рассеяно из-за визуального хаоса, а ключевой CTA — кнопка с иконкой лупы, будто мы будем искать пользователя по адресу;
- Баннерная слепота. Блок мог попадать у части пользователей в «баннерную слепоту» из-за визуала.
На что опирался
Я запросил у продуктового аналитика данные по поведению пользователей на странице: куда нажимают, как скроллят, куда переходят и где отваливаются. По данным стало видно, что пользователи часто игнорируют основной сценарий — поиск провайдеров по адресу — и растекаются по вторичным сценариям или вообще уходят с сайта.
Помимо аналитики я опирался на свою экспертизу — ранее делал Юзабилити-аудит ключевых страниц сайта, и именно пункты оттуда стали базой для переработки интерфейсов.
Что сделал
Я сделал полный редизайн блока:
- Прибрался и уменьшил нагрузку. H1 остался на месте, но за пределами блока с CTA, чтобы не увеличивать визуальную и смысловую нагрузку, а второстепенные блоки с текстом убраны;
- Убрал градиент. Белая подложка вместо тяжёлого цветного фона — шансы на баннерную слепоту снижаются, читабельность выросла в разы;
- Усилил CTA. Полноценная яркая кнопка с текстом «Начать поиск» вместо абстрактной лупы. «Начать» подразумевает дополнительные действия дальше — снижает возможную отказность;
- Сформулировал понятную пользу. Не требую ввести адрес просто так, а объясняю ценность — «Узнайте, какие провайдеры и тарифы в вашем доме»;
- Объяснил формат ввода. В плейсхолдере явно указано: «Улица, дом, квартира»;
- Снял тревогу. «Никакой рекламы и звонков, обещаем» — забота о пользователе и объяснение, что данные не будут использованы против него
A/B-тест и результаты
Во время A/B-тестирования смотрели не только на вход в воронку, но и на то, как изменение повлияло на следующие шаги
Показывать данные я не могу, поэтому цифры приходится скрывать
Ниже показано сравнение воронок в A и B версиях
Если консолидировать всю информацию по А/B-тесту, то мой интерфейс выигрывает на 59% по входимости в воронку
ВАЖНО: Изменение первого экрана дало эффект не только в начале воронки, но и на следующих шагах по цепочке
Что дальше?
Победивший вариант раскатили на всех пользователей. Дальше я слежу за накопленной статистикой, чтобы убедиться, что эффект устойчив на длинной дистанции, а не только в рамках теста
После этого будет доработка, которая позволит добавить больше эмоций и визуала, чтобы уйти от сухости