Как мы обновили hero-экран Амплифера и увеличили конверсию на 70% за 3 недели

Ещё один кейс с метриками.

Photo by Stefan Fluck on Unsplash

Контекст

Что было не так

Примерно так выглядел hero-экран до обновления
  • Очень странные персонажи. Мы делали их, думая, как хорошо они помогают передать мысль, что «Амплифер» это универсальный комбайн для различной работы с соцсетями. Но в итоге эти персонажи стали внутренним мемом про «многорукого е*лана и девушку с клешнёй» и плохо работали и как визуальная подпорка для ценностного сообщения. Кроме того, мы их больше нигде не использовали, а значит, и с точки зрения брендинга это слабый ход.
  • Перегруженность визуалом. Так-то вроде страницу и нельзя назвать тяжёлой, но чего стоит только графика, да ещё и лента с логотипами клиентов внизу. Они добавляли хаоса и «утяжеляли» страницу внешне.
  • Под ценностным предложением и описанием не было CTA-кнопки. То есть, ты такой прочитал, что мол ага, вот «Амплифер» он про это, умеет то-то, а сразу на кнопочку нажать и нельзя, она сверху справа.

С этими мыслями я и ушёл думать над новым hero-экраном.

Выводим ценность

Если попробовать синтезировать всё прочитанное в одном предложении, то выйдет примерно следующее: объясни человеку за несколько секунд, какую ценность ему даёт твой продукт, и помести это в самое видно место.

Ключевое место на hero-экране (да и на всём лендинге) занимает ценностный посыл. Чтобы его вывести, для начала я изучил кейсы с нашими клиентами и результаты последних PMF-опросов. На что делают акцент наши клиенты? В чём мы так хороши? Что мы им даём?

На основе всех этих данных я взял тексты из кейсов и результатов PMF-опросов, засунул их не помню в какую приблуду, и получил облако тегов, с которым многое становится очевидным.

Удобство, интерфейс, посты

Ага, отлично, вот и ценность вырисовывается. «Удобный интерфейс для публикации в соцсети» Нееет! Это была только смазочка, а теперь нужно сделать сказочку. Нужно перевести всё это на язык потенциальных клиентов, чтобы выразить ценность продукта. Попробую выразить это формулой:

Ценностное сообщение = преимущества по версии текущих клиентов + ответ на вопросы «Чтобы что?» для новых клиентов

Вот весь этот «удобный интерфейс», он что даёт? Чтобы что? Путём долгих и мучительных размышлений, я пришёл к такому конструкту: Автопостинг в соцсети и аналитика для лучших результатов и времени на важные дела. Супер. Но это не всё.

Задаём структуру

Не спрашивайте меня, как дизайнерам удаётся из такого говна потом сделать конфетку

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

Мы долго думали, как графически выразить нашу неодносложную ценность? Тут и результаты лучше, и времени меньше уходит. Довольно быстро у дизайнера возникла метафора с графиком. Мы её крутили-крутили, да в итоге докрутили до столбчатой диаграммы.

Что в итоге сделали

Упростили визуальную структуру. На старом hero-экране посетителей сайта встречали два прекрасных персонажа, всё это было в тёмных тонах, графики было много (не забываем ещё про ленту с логотипами клиента), она «шумела». Стало проще, лаконичнее, яснее.

Чётко выразили ценность продукта для клиента. Это заняло больше всего моего времени. Но кажется, что всё было не зря.

Подкерпили ценность описанием. Это описание отвечает на вопрос, а как именно мы помогает реализовать эту ценность для клиента. Здесь уместно сказать о возможностях продукта.

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

Добавили CTA-кнопку в «тело» hero-экрана. Теперь получается более логичный и менее трудозатратный процесс до триала: прочитав ценность и подпорку, не надо тянуться к верху, можно здесь и нажать. И подкрепили кпноку аргументами, чтобы снизить тревожность у клиентов (7 дней бесплатно, можно без карты).

Как сработало и что дальше

Задача решена более, чем полностью, и мы планируем дальнейшие шаги по улучшению:

  • Будем обновлять весь оставшийся лендинг, ведь сейчас, кроме hero-экрана, он в старом стиле;
  • Нужно обновить все связанные с сайтом страницы, такие как тарифы, отзывы клиентов, входа, регистрации, чтобы всё было в едином стиле;
  • Скоро мы кардинально поменяем онбординг. На самом деле, ради него во многом это всё и затеивалось.

Что вынес для себя из этого проекта

  1. Не дай визуалу сделать страницу шумной. Побольше ясности.
  2. Не мешай клиенту сделать то, что тебе нужно. Не бойся переместить кнопку с триалом поближе к ценностному сообщению.

Клэп?

Больше интересного в Телеграм-канале и рассылке. Подписывайтесь, чтобы не пропустить новые кейсы

Продуктовый контент, бренд-медиа и технологии. Мой канал в Телеграме → https://t.me/writingtools. Рассылка → https://marfitsin.substack.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store