Примеры эффективных посадочных страниц SaaS-продуктов Статьи редакции

Перевод материала дизайнера Педро Кортеса.

Обычно я не советую использовать другие сайты как пример для подражания, поскольку разные сайты работают на разные потребности бизнеса, и лучше потратить силы на понимание контекста и стратегии собственного продукта.

Редко можно встретить лендинг SaaS-продукта, где создатели уделили много внимания конверсии посетителей в покупателей, а не только симпатичному оформлению страницы.

Я собрал примеры лучших лендингов SaaS-продуктов из всех, что видел за несколько лет (а это тысячи сайтов). На эти сайты можно ориентироваться при создании своей посадочной страницы.

Он создаёт первое впечатление о продукте. Если вы не оформите заголовок правильно, люди уйдут со страницы через нескольких секунд и не оставят возможности рассказать о том, что вы можете предложить.

Каковы особенности хорошего заголовка?

• Он объясняет, чем занимается компания, и обозначает проблему, с которой поможет справиться продукт.
• Вызывает у посетителя любопытство, желание узнать больше о продукте.
• Сводит до нуля показатель отказов (количество людей, которые сразу закрыли сайт, не попытавшись его изучить).

Мне нравится в этом заголовке, что он не объясняет, что такое CrazyEgg, но вместо этого фокусируется на проблеме, которую решает продукт.

Он также будит любопытство, ведь вы не узнаете ничего о продукте, если не нажмёте ссылку в конце.

Этот приём мог бы хорошо сработать, но посадочная страница CrazyEgg создана в формате статьи. Команда делает много работы в сфере контент-маркетинга и больше доверяет статьям, в них CrazyEgg описывает полезный опыт и предлагает свой сервис как инструмент для решения проблем.

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

В результате получается ужасное описание продукта, которое никак не помогает конверсии.

Lobe.ai — исключение из этого правила, это лучшее объяснение продукта на базе ИИ, которое я когда-либо видел.

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

Они полагаются на GIF-анимации. Чтобы до конца понять, о чём я говорю, лучше зайти на сайт и увидеть всё своими глазами.

Заголовок простой, он не предоставляет много контекста.

Приём, который использовали Plutio, — поместить на страницу превью видео, которое объясняет, как работает приложение. Это вызывает любопытство и подталкивает к тому, чтобы посмотреть ролик. Иногда гораздо проще объяснить ценность вашего продукта с помощью видео, но безумно сложно заставить большинство людей посмотреть его.

Каждая деталь играет свою роль. Здесь легко понять, что полезного может принести вам сервис, из названия и видео на правой стороне. Суть сервиса отражена прямо в заголовке.

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

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

Слева указаны условия:

• ваш пробный период автоматически закончится через 30 дней;
• мы не будем спамить вам на электронную почту;
• вам не нужно привязывать свою банковскую карту к аккаунту;
• мы уверены, что вы влюбитесь в Starred.

Это замечательный способ напомнить посетителям о том, зачем они здесь и какую ценность получат от бесплатной пробной версии.

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

Вы можете использовать точно такой же макет, чтобы побудить посетителя воспользоваться демоверсией (особенно актуально для дорогих SaaS-продуктов).

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

Хотя проект в итоге так и не смог в полной мере использовать это.

Вот как можно сделать воронку конверсии при помощи таких примеров в конце:

• Узнать, какие варианты использования технологии наиболее интересны людям, отслеживая, какие страницы они посещают чаще.
• Привлекать целевую аудиторию, ориентируясь на эту (которая лучше конвертируется) нишу или приложение, и заполнить продукт на 100% для этой ниши.
• Использовать таргетинговую рекламу, ориентируясь на конкретную страницу, на которой был пользователь, и нишу, к которой она относится.

Золотая жила бы получилась.

У Roadmap удивительная стратегия размещения CTA в конце каждой страницы. Это позволяет контролировать путешествие по сайту.

Вы могли бы сразу же стать покупателем (если готовы) или из холодного посетителя, который ничего не знает о продукте, стать тем, кто точно понимает, чем занимается сервис, каких результатов они помогут достичь, сколько это стоит.

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

У этих ребят масса отличного контента, через который они рассказывают потенциальным покупателям о том, как решить проблемы, и в то же время показывают, как именно Helpscout может исправить ситуацию (поразительный контент-маркетинг).

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

Но почему вы должны обучать потенциальных покупателей? Вот несколько причин.

• Давая им что-то ценное бесплатно, вы устанавливаете сильное доверие.
• Это люди могут быть не готовы купить что-то прямо сейчас, но, заставляя их подписаться на рассылку, вы конвертируете их в долгосрочной перспективе (возможно, это ваш единственный шанс, в противном случае они бы просто сбежали с сайта).
• Посетитель, которого вы чему-то научили, будет понимать, что вы можете ему дать в дальнейшем, и с большей вероятностью превратится в покупателя, останется активным пользователем и порекомендует продукт друзьям.

Сегодня отзывы используют вообще все. Каждый либо размещает реальные отклики на сайте, либо попросту их подделывает. Как же выделиться? Как превратить в покупателей тех, кто остаётся равнодушным к социальному доказательству, которое у вас есть?

Вот несколько характеристик отзыва, в который люди готовы поверить:

• В нём легко узнать себя. Люди хотят видеть социальное доказательство от тех, кто кажется похожим. Иначе у них не выходит поверить, что они могут достичь таких же результатов с помощью продукта, как тот, кто оставил отзыв.
• Посетитель должен быть уверен, что отзыв оставил реальный человек. Иногда даже лучше использовать любительские видео или интервью, поскольку они выглядят более правдоподобно, чем текст на странице (к тому же его легко не заметить при прокрутке страницы).
• Сразу виден результат. Нужно публиковать отзывы, которые говорят о достигнутых результатах и подчёркивают преимущества продукта. Пример: «Это принесло мне на 340% больше лидов за два месяца».

У Helpscout великолепный отзыв прямо под заголовком. Здорово, что они решили его расположить здесь, это выглядит впечатляюще.

Оказавшись на странице впервые, посетители сайта по-разному воспринимают продукт компании, и предложить живые отзывы других людей — способ привлечь внимание к сервису.

Кликнув по ссылке, можно посмотреть видео с историями разных покупателей и увидеть страницу, полную видео и отзывов, которые и будут социальным доказательством.

Этот пример показывает, что у Lattice есть тысячи клиентов и они сотрудничают с крупными компаниями, но при этом выводит на передний план историю конкретного клиента, с которым легко себя идентифицировать.

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

Вот как нужно подавать кейсы. Это правильный пример, основанный на результатах.

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

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

Это страница, полная замечательных историй клиентов. Но хочу обратить внимание не на истории или отзывы. Посмотрите: на фотографиях потенциальные покупатели видят, для команд какого размера Gusto подходит лучше всего, и в десять раз сильнее идентифицируют себя с настоящими клиентами. Маленькая и неосознаваемая деталь, но она обладает огромной силой.

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

Вам нужно объяснить, насколько удивителен ваш продукт и какие результаты он может принести, настолько заинтересовать пользователя, что он превратится в покупателя. В противном случае у вас нет шансов.

Вот несколько редких примеров того, как можно прямо, просто и доступно донести до пользователя суть продукта.

CrazyEgg раскрывает болевые точки других сервисов, с которыми приходится иметь дело потенциальному покупателю, и показывает, как легко со всем справляется CrazyEgg.

Каждый раздел также содержит ссылку на демонстрационное видео, чтобы посетители могли получить представление о том, как это работает.

Посмотрев простую анимацию, на которой кто-то использует продукт, вы поймёте, что это инструмент, с помощью которого можно создать воронку конверсии внутри своей «истории» в Instagram или рекламного объявления.

Сам инструмент настолько прост, а контекст, который предоставили в заголовке, был настолько проработан, что компания может объяснить 80% своего продукта через 10-секундное видео.

Это одна из самых интересных идей, которые я видел за последнее время.

В основном сайт имеет ограниченную ширину, поэтому он заставляет прокручивать вниз и читать большую часть контента, ни на что не отвлекаясь.

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

Airtame разделяет своих посетителей по сферам, в которых они планируют использовать продукт, как вы можете видеть выше (Business и Education).

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

Если посетители не прочитают статью, они никогда не узнают о продукте. Независимо от того, сколько статей вы пишете или сколько трафика привлекаете, вы не сможете привлечь новых клиентов.

Вот несколько примеров того, правильно это сделать.

Предоставив пользователям возможность скачать PDF-версию руководства, взамен Helpscout получает их адреса электронной почты.

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

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

Компания сама контролирует, какие статьи читают посетители (в то же время предоставляя ценную информацию), таким образом может обучать их, пока те не захотят стать покупателями.

Список для чтения от Helpscout.

Используя ту же тактику, что показана в примере выше. Helpscout повторно использует имеющийся контент и представляет его в качестве пошагового руководства, чтобы контролировать, что читают люди.

СТА в конце каждой статьи от CrazyEgg. Это заинтересовывает перейти от статьи к проверке дополнительной информации о продукте и конвертирует некоторых посетителей.

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

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

На каждой странице блога Close.io поместила форму авторизации, которая побуждает получить бесплатную пробную версию её CRM.

Adexpresso побуждает дочитать до четвёртого пункта, где она рассказывает о своём продукте.

Если вы обратите внимание на цифры сбоку, то увидите, что эта статья относится к большему руководству. Adexpresso не только контролирует то, что люди читают, но и информирует их о Facebook Ads. Если пользователи достаточно хорошо разбираются в рекламе, они с большой долей вероятности дадут AdEspresso шанс.