Как делать качественные прототипы для лендингов

Что такое прототип и зачем он нужен

Прототип — это готовый черно-белый макет сайта с заголовками, текстами, формами захвата, местами для фото и видео-контента, это такой же сайт, только нераскрашенный.

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

Зачем вообще нужен прототип? Можно же как бы обойтись и без него, думаем мы. Нарисовать что-то на бумажке, и все. Но я скажу, что это не так. Прототип – это основа лендинга. Без хорошо проработанного прототипа не будет хорошего лендинга. 

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

Прототип – это то же самое, что и проект дома. Только строим его мы из продающих смыслов, заголовков, текстов, картинок, кнопок и др. элементов.

Какой он — качественный прототип

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

Тут привожу наиболее понятные, базовые ответы:

• «Обозначено, что есть заголовок, подзаголовок, второстепенный текст,
• то есть не сплошная портянка текста». Из этого ответа можно вывести, что качественный прототип = четкая структура.
• «Понятный –- чтобы даже при скролле основные идеи о продукте и компании были понятны и легко считывались». Значит, качественный прототип должен донести понятным языком смыслы и ценности продукта и компании.
• «В котором полностью проработана логика работы сайта. Прописаны все тексты до мелочей». Качественный прототип = логически проработанный сайт.

Резюмируя, я скажу, что качественный прототип – это готовый, только черно-белый вариант сайта, в котором заложен маркетинг, простроена логика взаимодействия с пользователями и транслировать ключевые смыслы продукта, привлекающие ЦА.

Предпроектное маркетинговое исследование – 99% успеха

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

Для разработки прототипа лендинга нужно:

• Четко понимать, для какого сегмента ЦА мы его создаем, их потребности, боли, критерии выбора и т.п. 
• Выделить уникальные продающие смыслы продукта и компании на основательном брифинге. 
• Понимать, что транслируют конкуренты, и сформировать свое УТП.

В итоге, мы соединим продукт и клиента.

Лендинг для платежеспособного сегмента целевой аудитории

Необходимо выделить платежеспособный сегмент целевой аудитории, которая совершает 80% покупок.

Нужно будет:

• Разрабатывать прототип, учитывая потребности и критерии выбора этого платежеспособного сегмента.
• Транслировать важные для него смыслы, ценности, понимать, как он принимает решение о покупке.
• Продумать легкие бесстрессовые шаги, чтобы этот клиент оставил заявку на лендинге.
• Закрывать сомнения, возражения, страхи и боли на прототипе данного сегмента ЦА. 

Пример 1. Ниша недвижимости в Дубае

Ниша – продажа недвижимости в Дубае, основная аудитория – инвесторы.

Я здесь привела небольшой фрагмент майнд-карты с критериями выбора именно по этой аудитории.

Что здесь важно:

• Район. Он должен быть посещаемым туристами или престижным.
• Цена.
• Доходность.
• Надежный застройщик.
• Экспертный брокер, который поможет найти выгодное предложение.
• Очень важна окупаемость – за какой срок окупится недвижимость.
• И т.д.

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

Здесь пример разработки прототипа лендинга, первый экран.

Аудитории важны цена, доходность, окупаемость. Исходя из этого, формируем оффер. Здесь показываем доходность, указываем, что цены от застройщика, даем такое преимущество, что это предстарт продаж. В подзаголовке тоже транслируем эти моменты. Т.е. на этом первом экране перечислены ключевые критерии, чтобы заинтересовать аудиторию инвесторов.

На той же аудитории покажу, какие у нее есть потребности.

Это:

• Сохранить капитал.
• Преумножить его.
• Надежно спрятать, скрыть часть своего капитала.

На основе этого мы транслируем потребность сохранить капитал в заголовке блока:

Транслируем потребность сохранить капитал в подзаголовке блока:

Что нужно сделать, чтобы разработать такой прототип

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

Транслируя их на сайте мы говорим аудитории: «Смотри, у нас есть то, что тебе нужно. Мы разделяем твои ценности».  Аудитория считывает их и уже хочет обратиться именно к вам, совершает целевое действие.

Т.е. по сути, через продающие смыслы на сайте в идеале мы ведем покупателя от стадии «Хочу» до стадии «Куплю». Увеличиваем шансы покупки именно нашего продукта. Понятно, что до стадии «Куплю» может не получиться довести сразу, но мы прогреваем аудиторию, переходим по лестнице Ханта на более высокий уровень теплоты.

Примеры продающих смыслов на прототипе.

В обязательном порядке нужно проработать первый экран лендинга

За первые 5 секунд пребывания на сайте посетитель должен понять:

• Он попал «по адресу»? Есть ли здесь то, что ему нужно?
• Решат ли здесь его вопрос?Получит ли он, что хочет?
• С какими «плюшками» он это получит?

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

Очень важно отстроиться от конкурентов – разработать УТП.

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

И мы показываем все объекты от застройщиков.

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

• Главный экран.
• Описание продукта или услуги.
• Для кого продукт.
• Призыв к действию.
• Преимущества продукта и компании.
• О компании или основателе бизнеса.
• Кейсы или примеры работ.
• Этапы работы. Чтобы пользователь понимал, как с вами взаимодействовать.
• Социальные доказательства — фото/видео отзывы.
• Карта/контакты.

Какие-то блоки ниже могут меняться.

Пример 2. Электромонтаж в доме

Электромонтаж в доме делают на начальной стадии ремонта.

Первый экран. В заголовке указываем услугу и выгоды. Плюс дальше идут буллиты с преимуществами. 

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

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

Третий блок – преимущества. Заголовком показываем, что мы работаем уже давно, 6 лет на рынке, специализируемся только на электромонтажных работах, а это означает, что мы в этом – мастера, эксперты.

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

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

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

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

Дальше, конечно же, отзывы. Это может быть видео, скрины.

Контакты. Они у нас указаны в футере, т.к. работа выездная и у компании нет офиса.

Т.е. это примерная структура лендинга. Там есть еще несколько блоков, я показала базовые, которые должны быть.

Какие дополнительные блоки можно использовать на лендинге:

• Встроенный квиз.
• Дополнительные социальные доказательства – сертификаты, дипломы,разрешения и т.п. 
• Ответы на частые вопросы.
• Различные призывы к действию.
• Фото или видео салона, офиса или производства.
• Команда.
• Компании, с которыми работаем и т.п.

Выводы

Идеальной структуры лендинга не существует! 

А чтобы разработать качественный прототип лендинга, нужно:

• Знать продукт и ценности компании.
• Знать целевую аудиторию.
• Проработать продающие смыслы бизнеса.
• Отстроиться от конкурентов – сформировать свое УТП.
• Разработать продающую структуру лендинга.
• Продумать CTA для разной теплоты клиента.
• Расположить контент в соответствии с ui/ux дизайном.
• Понимать, что от качества прототипа напрямую зависит качество лендинга.