Как мы делали сайт с конверсией 5%, который сломался, а затем вышел в топ «Яндекса»

Рассказываем, почему одностраничник дистрибьютора сиропов Herbarista путают с сайтом производителя. А еще — откуда у лендинга хорошие конверсии и как он поднялся на первые строчки в поиске (цифры и метрики внутри).

Привет! На связи студия дизайна Rhino Digital. Уже 5 лет мы создаем сайты, которые помогают клиентам масштабироваться и продавать.

Работали с ВТБ, Ferrero, Smartway, Альфа Капиталом, News Media. А еще наши сайтики неоднократно залетали на #madeontilda — посмотреть их все можно здесь. Переходите, любуйтесь, сохраняйте в закладки.

В конце прошлого года к нам обратился Даниил — официальный партнер компании Herbarista, которая производит сиропы премиального качества. Если вы хоть раз бывали в питерском Буше, Счастье и Цехе 85, то наверняка пили напитки с этими волшебными сиропами. Так вот, в Северную столицу их привозит Даниил.

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

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

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

Изначально Даниил хотел совместить на сайте b2b- и b2c-историю, чтобы за сиропами могли прийти как рестораны, так и обычные любители сладенького. Но в ходе обсуждений мы отказались от этой затеи, чтобы не путать пользователей: так мы решили дизайнить сайт только для b2b-сегмента. Усилить то, что и так хорошо работает (а 90% клиентов Herbarista — бары, кафе и кондитерские) — самая лучшая идея.

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

Кстати, про HoReCa:

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

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

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

Из референсов клиент оценил сайты Atoms и Matelibre. Даниилу понравился бенто-стиль, серо-бежевая палитра цветов с одним контрастным оттенком, а еще минимализм и акцент на фото. Так мы решили ориентироваться на мягкость и округлость в визуале, чтобы подсветить «сладкую» тематику сайта.

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

Создание понятного структурированного сайта с ясными захватами — такой была наша задача. Условия — работаем с нуля, без опоры на готовые разработки.

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

В основном сайт строили на белом фоне. Цвета плашек взяли мягкие и нейтральные — светлый карамельный и дымчатый белый (эти же цвета используются на сайте производителя). А вместо того, чтобы разбавлять фоновые оттенки акцентным цветом, решили использовать яркие качественные фото.

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

А вот как мы работали над главной.

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

Zero-блок в Tilda — редактор, с помощью которого можно настраивать дизайн сайта, как в Figma или Photoshop. Он не привязан к расположению элементов и позволяет реализовать любую идею. То есть, можно размещать текст как угодно, внедрять сложную анимацию и менять вид элементов как вздумается.

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

Вот что у нас вышло:

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

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

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

(Кстати, этот блок нереально просто взять и пролистать, не ознакомившись со всеми сетами, но об этом ниже)

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

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

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

«Ну красиво, а в чем смысл?» А в том, что анимация позволяет сделать дизайн отзывчивым на действия пользователя. Так юзер будет смотреть на сайт не как зритель, а как участник того, что с сайтом происходит. Навел курсор на плашку — она перекрасилась. Навел на заголовок — он подплыл. Пользователь понимает, что сайт живой и с ним можно взаимодействовать. Отзывчивый контент, как ни крути, изучать интереснее, чем статичный.

Теперь расскажем про самые сильные анимационные ходы на этом проекте:

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

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

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

Привели в движение лого партнеров компании. Не умещать же все 300 логотипов сплошной простыней на странице:)

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

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

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

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

Доверие пользователей усилили через цифры: указали, с какого года работает компания (2014), указали количество партнеров (300), обозначили количество вкусов (75), рассказали, что в сиропах Herbarista — двойная концентрация вкуса, поэтому расход бутылки будет экономичным. Отметили, что фруктовых соков и мякоти Herbarista использует в 10 раз больше, чем другие производители сиропов.

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

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

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

Та-даам!

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

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

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

54% юзеров приходят на сайт Даниила из поисковиков. То есть вбивают запрос, касательный сахарных сиропов или компании-производителя, и идут прямиком на наш ленд. Не будь сайта на первых строчках, вряд ли бы здесь были такие цифры. Стало быть, тот минимум действий, сделанный нами по выводу сайта в топ, все-таки дал плоды.

Смотрим глубину просмотра. Эта метрика означает, сколько в среднем страниц посмотрел каждый пользователь сайта. Наше значение — 1,3. Неплохо для лендинга-одностраничника, да? Это значит, что помимо страницы с текстом и картинками пользователи смотрят, например, форму заявки и поп-апы.

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

Допом глянули статистику отказов. Отказы в метрике — это процент юзеров, которые провели на сайте менее 15 секунд и закрыли страницу, не выполнив целевого действия. У нас таких чуть больше 19%. Это очень неплохие цифры, учитывая, сколько сайтов с отказами 50-70% мы видели в своей практике.

Следующая наша цель — посмотреть, а кто, собственно, заходит на сайт: целевые или залетные? Мы оценили интересы аудитории, пришедшей к нам, и увидели, что 80% посетителей сайта интересуются ресторанами. О чудо, владельцы ресторанов — как раз ЦА Даниила.

«Постойте, но ведь все интересуются ресторанами. Я не из HoReCa, но все-таки гуглю, где мне поесть, куда сводить подругу или маман. Выходит, даже я могу попасть в эту выборку», — скажет искушенный читатель. И мы, конечно, согласились бы, если бы не это:

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

«Постойте, но ведь на обед в ресторан я беру с собой книжку Роберта Кийосаки. И тоже интересуюсь бизнесом, но свой пока не открываю!», — вновь скажет искушенный читатель.

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

Смотрим далее:

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

Также посетители лендинга интересуются финансами (58,5%) , в том числе бизнесовыми (17,4%):

Вроде все сходится.

Еще заглянули во вкладку «еда и напитки» и увидели, что 18% наших пользователей интересуются кофе. Бинго! Сиропы Herbarista как раз разработаны преимущественно для кофеен. А сайт Даниила сделан в том числе для тех, кто так или иначе зарабатывает на кофейных напитках.

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

Теперь в дело вступает ее величество конверсия. Смотрим, сколько человек заполнили контактные данные. Конверсия сайта Herbarista — 5%, при средней условно-нормальной конверсии в 1,5-2%:

В мессенджер перешли 3 процента всех посетителей:

Порядка 80% посетителей сайта никогда на нем не бывали, а оставшиеся 20% — вернувшиеся пользователи. Мы знаем, что Даниил не запускал ретаргетинг на посетителей сайта (то есть Яндекс. Реклама спецом не догоняла всех тех, кто когда-либо был на этом лендинге). Значит, посетители возвращались на сайт сознательно, просто вбивая его в поиске или адресной строке.

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

Кирилл Тимофеев

Алина Грязнова

Алена Дудина

Илья Дорофеев

Екатерина Баулина

Редактор:

Анастасия Буйлова

Если вам понравилась статья, подписывайтесь на наш Telegram-канал. Там мы рассказываем про кейсы и делимся ништяками, полезными для бизнеса)

Ну и, само собой, делитесь мыслями, на которые вас натолкнул наш кейс) будем рады и критике, и похвале!