Как мы обновили hero-экран Амплифера и увеличили конверсию на 70% за 3 недели
Ещё один кейс с метриками.
Контекст
Hero-экран — первый экран на посадочной странице, который нужен, чтобы произвести убедительное первое впечатление и повести человека по нужной нам целе. Hero-экран сильно влияет на то, как перформит триалы весь лендинг, да и на всю триальную воронку. Чтобы увеличить конверсию из посадочной страницы «Амплифера» в страницу регистрации, мы и принялись обновлять hero-экран.
Что было не так
- Очень странные персонажи. Мы делали их, думая, как хорошо они помогают передать мысль, что «Амплифер» это универсальный комбайн для различной работы с соцсетями. Но в итоге эти персонажи стали внутренним мемом про «многорукого е*лана и девушку с клешнёй» и плохо работали и как визуальная подпорка для ценностного сообщения. Кроме того, мы их больше нигде не использовали, а значит, и с точки зрения брендинга это слабый ход.
- Перегруженность визуалом. Так-то вроде страницу и нельзя назвать тяжёлой, но чего стоит только графика, да ещё и лента с логотипами клиентов внизу. Они добавляли хаоса и «утяжеляли» страницу внешне.
- Под ценностным предложением и описанием не было CTA-кнопки. То есть, ты такой прочитал, что мол ага, вот «Амплифер» он про это, умеет то-то, а сразу на кнопочку нажать и нельзя, она сверху справа.
С этими мыслями я и ушёл думать над новым hero-экраном.
Выводим ценность
Понимая, что надо бы поднабраться знаний, я начал искать информацию. Перелопатил примерно с дюжину материалов, но смело могу порекомендовать только три:
- https://www.julian.com/guide/growth/landing-pages
- https://stripe.com/atlas/guides/landing-page-copy
- https://medium.com/cruip/how-to-create-a-saas-landing-page-that-converts-488942461186
Если попробовать синтезировать всё прочитанное в одном предложении, то выйдет примерно следующее: объясни человеку за несколько секунд, какую ценность ему даёт твой продукт, и помести это в самое видно место.
Ключевое место на hero-экране (да и на всём лендинге) занимает ценностный посыл. Чтобы его вывести, для начала я изучил кейсы с нашими клиентами и результаты последних PMF-опросов. На что делают акцент наши клиенты? В чём мы так хороши? Что мы им даём?
На основе всех этих данных я взял тексты из кейсов и результатов PMF-опросов, засунул их не помню в какую приблуду, и получил облако тегов, с которым многое становится очевидным.
Ага, отлично, вот и ценность вырисовывается. «Удобный интерфейс для публикации в соцсети» Нееет! Это была только смазочка, а теперь нужно сделать сказочку. Нужно перевести всё это на язык потенциальных клиентов, чтобы выразить ценность продукта. Попробую выразить это формулой:
Ценностное сообщение = преимущества по версии текущих клиентов + ответ на вопросы «Чтобы что?» для новых клиентов
Вот весь этот «удобный интерфейс», он что даёт? Чтобы что? Путём долгих и мучительных размышлений, я пришёл к такому конструкту: Автопостинг в соцсети и аналитика для лучших результатов и времени на важные дела. Супер. Но это не всё.
Задаём структуру
Со всеми знаниями, которые я получил, прочитав статьи, кейсы и PMF-опросы, я начал набрасывать структуру hero-экрана. Как уместить всё самое важное на одном экране? Для начала надо закинуть туда ВООБЩЕ ВСЁ, что бы ты хотел закинуть. Так я и сделал:
На самом деле всё прозаично: сначала кидаемся тухлыми яйцами в мои первичные хотелки и отсекаем лишнее, потом дизайнер рисует набросок, предлагает различные варианты визуального подкрепления ценности, мы всё это ещё 10 раз обсуждаем, только потом утверждаем, отдаём посмотреть фронтендерам, и только после того, как всё устаканим, отправляем на вёрстку.
Мы долго думали, как графически выразить нашу неодносложную ценность? Тут и результаты лучше, и времени меньше уходит. Довольно быстро у дизайнера возникла метафора с графиком. Мы её крутили-крутили, да в итоге докрутили до столбчатой диаграммы.
Что в итоге сделали
Упростили визуальную структуру. На старом hero-экране посетителей сайта встречали два прекрасных персонажа, всё это было в тёмных тонах, графики было много (не забываем ещё про ленту с логотипами клиента), она «шумела». Стало проще, лаконичнее, яснее.
Чётко выразили ценность продукта для клиента. Это заняло больше всего моего времени. Но кажется, что всё было не зря.
Подкерпили ценность описанием. Это описание отвечает на вопрос, а как именно мы помогает реализовать эту ценность для клиента. Здесь уместно сказать о возможностях продукта.
Подкрепили ценностное предложение графикой. Именно в такой связке: графика подкрепляет ценностное послание, а не ценностное послание графику. Причём графика не обязательно должна быть с изображениями продукта, она должна подкреплять именно ценность.
Добавили CTA-кнопку в «тело» hero-экрана. Теперь получается более логичный и менее трудозатратный процесс до триала: прочитав ценность и подпорку, не надо тянуться к верху, можно здесь и нажать. И подкрепили кпноку аргументами, чтобы снизить тревожность у клиентов (7 дней бесплатно, можно без карты).
Как сработало и что дальше
Это всё конечно классно, Саша, но результаты-то какие? А вот такие: конверсия из главной страницы в страницу регистрации за 3 недели выросла на 70%.
Задача решена более, чем полностью, и мы планируем дальнейшие шаги по улучшению:
- Будем обновлять весь оставшийся лендинг, ведь сейчас, кроме hero-экрана, он в старом стиле;
- Нужно обновить все связанные с сайтом страницы, такие как тарифы, отзывы клиентов, входа, регистрации, чтобы всё было в едином стиле;
- Скоро мы кардинально поменяем онбординг. На самом деле, ради него во многом это всё и затеивалось.
Что вынес для себя из этого проекта
- Чётко сформулируй ценность для клиента. И помести её на самое видное место. Отвечай на вопрос «Чтобы что?», пока не найдёшь искомый ответ.
- Не дай визуалу сделать страницу шумной. Побольше ясности.
- Не мешай клиенту сделать то, что тебе нужно. Не бойся переместить кнопку с триалом поближе к ценностному сообщению.
Клэп?
Ещё про силу текста:
Больше интересного в Телеграм-канале и рассылке. Подписывайтесь, чтобы не пропустить новые кейсы
