Сайт для b2c: как сделать лендинг на Тильде для сложной ниши

Если некогда читать, смотрите результат сразу: https://priziv-vvk.ru/

Призыв в армию - очень тонкая и щепетильная тема, как минимум, по двум причинам:

1. Это крайне заботит всех молодых мужчин в возрасте от 18 до 30 лет, соответственно, в интернете - это очень востребованная ниша, как по информационным, так и по коммерческим запросам (попадание в боль целевой аудитории).

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

И получается, что сайтов очень и очень много, но найти среди них компанию, которой можно доверять на все 100% - единицы.

Так к нам обратилась компания «Военно-врачебная коллегия», освобождающая призывников от службы в армии абсолютно законно. Текущий сайт компании оставлял желать лучшего и не раскрывал особенностей компании, а новый сайт, который им делали другие рекламщики - как говорится, "не зашел". Мы взяли этот проект на субподряд и успешно его выполнили. Что из этого получилось - читайте далее.

Задачи: сделать функциональный, информативный и красивый сайт. 

Что сделали:

1. Провели аудит старой версии сайта: https://vvk-voennyi-bilet.ru/  и заакцентировали внимание на слабых сторонах.

2. Сделали анализ конкурентной среды и выявили наиболее сильных игроков и их слабые стороны.

3. Собрали красочный прототип сайта, в котором указали основные смысловые блоки.

4. Сделали 6(!) итераций дизайна для максимального попадания в целевую аудиторию.

5. Сверстали утвержденный дизайн-макет в Тильда на Zero-блоках.

6. Получили конверсию лендинга в 5%.

А теперь подробнее.

Аудит старого сайта

Предыдущий сайт компании был выполнен в строгом стиле. В целом видно, что для 2020 года - дизайн сайта себя уже давно исчерпал, и ему срочно требуется переупаковка.

Если сайт в плане дизайна и донесения смыслов сделан качественно, то срок жизни сайта может растягиваться до 5-6 лет. К сожалению, многие предприниматели не понимают и недооценивают тот факт, что сайт (как и ремонт в квартире), делается в серьез и на долго - всего 2-3 раза за всю жизнь компании. Однако, в связи с постоянно ускоряющимися цифровыми технологиями, этот срок неминуемо сокращается из года в год.

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

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

Следующий блок раскрывает выгоды при работе с компанией. Выгоды стандартно отображены иконками. Но этот блок так же не выразителен: иконки не привлекают к себе внимания своей формой (только цветом), а бледный серый шрифт - не читается. То есть блок 100% нужный, но с точки зрения визуальной иерархии, смысловые блоки на нем расположены не правильно. Особенно это видно на fullHD мониторе, где при разрешении 1920х1080 пикселей на экране становится очень много пустого пространства. 

Далее мы видим блок "Последовательность работы":

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

Словом, весь блок сделан так, чтобы на него не кликали.

После блока "Команда" идет очень важный и сильный блок с отзывами клиентов:

Ситуация таже: блок нужный и важный. И даже с точки зрения программных работ сделан почти правильно: скрипт сервиса отзывов Flamp интегрирован на сайт, и отзывы автоматически отображаются и пополняются сами. Но вот не задача - у блока почти безграничная вертикальная прокрутка, которая растягивается на 3 вертикальных блока, что создает огромную полотнину текста на сером унылом фоне.

Посыл верный - реализация хромает.

Но есть и хорошие новости: в разделе "Отзывы" блоки составлены верно:

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

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

Статьи так же раскрывают компанию как эксперта в своей области:

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

Анализ конкурентной среды

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

Хороший сайт должен запоминаться.

А вместе с ним и название компании. 

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

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

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

Словом, мы провели количественные и качественные исследования целевой аудиторией, для понимания мышления и карты принятия решения пользователем (Customer Journey Map).  

^{Часть ответов на один из опросников}

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

Так нам стало понятно, что в сознании целевой аудитории на этом сегменте рынка - нет явного лидера. И даже нашего клиента - компанию ВВК, часто представляли лидером и надежной компанией. 

Нам оставалось только гиперболизировать этот образ.

Прототип сайта

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

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

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

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

 

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

Дизайн сайта

Забегая вперед, хочется сказать, что: 

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

Вот так выглядел даш-борд в фигме с обзором всех итераций после окончания этапа дизайна: 

 

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

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

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

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

Попробовали взять другой вариант:

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

Тогда в следующей итерации мы попробовали взять парня с одного из фото отзывов. С одной стороны попадание в ЦА было 100%, с другой - эта фотография плохо попадала в официальный стиль:

В этой же итерации пропал выдвигающийся смартфон и остался только скрин переписки.

С этого момента заказчик решил больше не экспериментировать с платными фотостоками и центральными образами, а провести хорошую качественную фотосессию. И это было правильным решением.

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

Качественные фотографии - залог хорошего дизайна.

А качественный дизайн сайта - залог хорошей выручки компании.

Так что в дальнейших итерациях дизайна на всем лендинге мы использовали фотографии реальной целевой аудитории. 

Сначала был вариант с толстовкой:

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

Также заменили фон голубого неба на серый градиент - это усилило концентрацию внимания на офере, фотографии ЦА и зрительно выделило все нопки действия:

 

С первым блоком разобрались. Едем дальше.

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

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

Мы решили гиперболизировать образ уклониста, который осознанно нарушает закон:

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

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

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

В целом реальная фотография на странице выглядела уместно:

Но с фотосессии точно выглядела приятнее:

^{Боль призывника и ее решение – сервис ВВК. На фото – реальный призывник}

Стандартный блок "Почему мы" - всегда присутствует на лендингах и стал уже своеобразным стандартом при построении посадочных страниц.

На начальном этапе в прототипе мы использовали изображение с фотостока. Было очевидно, что сюда оно не очень подходит, хоть и грамотно сколлажировано:

Затем мы убрали изображение человека, но блок стал безликим:

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

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

^{Демонстрация вежливой и профессиональной коммуникации – гарант успеха}

 

Блок "Как мы работаем" или "Последовательность шагов" - так же один из стандартов построения лендингов. Очень важно, чтобы в блоках, где важна хронология или последовательность - быстро визуально считывались. В этом блоке визуальное повествование считывается быстрее, чем за 3 секунды:

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

Но в результате мы потеряли в красочности. Схематичные блоки выглядели уныло. Но наш дизайнер по итогу нашел консенсус: инвертировал иконки в другой цвет и добавил цифры в виде уведомлений-нотификейшн. Если лет 5 назад такое бы "не считали", то с глобальным распространением сенсорных смартфонов и стикеров - зрительная метафора считывается на раз:

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

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

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

 

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

^{Эмодзи популярны в соцсетях среди молодежи – потенциальных клиентов компании}

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

Блоки "Социальных доказательств" могут быть разных форм. В нашем случае, это коллаж из фотографий клиентов:

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

Но разница все равно бросалась в глаза, особенно тем, кто работает с графикой ежедневно. Поэтому совместно с клиентом было решено сделать коллаж немного другого вида:

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

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

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

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

Было:

Иконки не однородные и немного топорные. А вот как стало, когда их привели к единому стилю:

Как одним блоком наглядно показать размер и авторитет компании? Нет ничего лучше, чем реальная демонстрация масштаба:

 

Казалось бы - простой блок с картой России. Но он тоже прошел несколько итераций:

До тех пор, пока не дошли до утвержденного варианта:

^{Оставили контакты – получите книгу. В дальнейшем, при получении контактов, клиента можно дожимать по емеил-рассылке.}

 

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

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

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

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

И лишь в самом конце, когда потенциальный клиент уже психологически готов к покупке (выстроен мостик между привлечением внимания и доверием к компании), можно предлагать ему приобрести услугу:

 

В колонках тарифов не только детально раскрыты преимущества каждого пакета, но и выделены своим, особым, цветом: бледно-бежевый - тариф, который создан для ассортимента и пододвигает к покупке нужного пакета (хотя его тоже можно купить). Голубой - тот, который наиболее выгодно продавать - именно поэтому почти незаметно выделен на фоне остальных. А красным цветом ознаменован тариф «Экстренный», который возможно заказать только в критических ситуациях. Красный цвет глубоко в подсознании ассоциируется с кровью, борьбой и повышеным вниманием, именно поэтому таблички "Опасность" - красные.

Что удобно, все тарифы представлены на одной странице – не нужно никуда пролистывать.

Обращение собственника к потенциальному клиенту - тоже мощный инструмент повышения доверия к компании:

Текст авторского обращения крайне важен. Просто сравните верхний и нижний текст:

^{Личный опыт владельца компании подкрепляет доверие}

На финальной стадии мы написали более «живой», личный текст: акцентировали внимание на проблеме, показали решение, подкрепили доказательствами – 8-летним опытом. Завершили речь призывом к действию. Персонализированное обращение обладает большей конверсией в доверие, чем рядовой опосредованный текст.

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

^{Ответы на вопросы снимают возражения призывников}

 

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

^{Актуальный контент для призывников - грех не подписаться...}

Карта расположения офиса и контакты удобно совмещены в один блок. С одной стороны экономия вертикальной прокрутки, с другой - глупо размножать похожий по смыслу контент на 2 отдельных блока:

^{Подробная карта с контактами и призывом к действию}

 

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

И главное, на практике получили конверсию лендинга в 5%!

Ничего лучше не говорит о качестве работы, чем честный отзыв от клиента :)

 

___

Команда проекта:

Арт-директор –  Антон Рендел

Дизайн и верстка – Кирилл Савченко