Как дилеру ворот Hormann и Alutech отстроиться от 50 конкурентов и продавать дороже — с помощью сайта

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

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

Решение:

Результаты: разработали лучший сайт в нише. Он выделяется среди конкурентов за счет:

Компания «Вратарь» — официальный дистрибьютор гаражных ворот Hormann. Бизнес работает с 2008 года, но это не единственный официальный представитель Hormann в России. Таких компаний — около двух десятков.

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

Такой сервис стоит денег, поэтому «Вратарь» продает товары на 20% дороже, чем у конкурентов.

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

Задача 1. Отстроить сайт от конкурентов с помощью дизайна.

Задача 2. Подчеркнуть премиальность с помощью сайта — так, чтобы нужный сегмент клиентов узнавал себя в рекламных материалах «Вратаря».

Задача 3. Написать для сайта такие тексты, которые раскроют конкурентное преимущество «Вратаря» — сервис.

Задача 4. Органично встроить в дизайн сайта новый продукт — входные и межкомнатные двери.

Старый сайт клиента не позволял решить эти задачи.

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

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

Так или иначе, для задач «Вратаря» прежний сайт не годился, мы предложили разработать новый.

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

Мы проанализировали около 50 конкурентов «Вратаря» по России. Короткий вывод — у большинства сайты не продают. Современные качественные сайты только у 3% поставщиков ворот. У остальных либо откровенно устаревшие, либо просто проблемные — детали закопаны внутри страниц, много текста и лишних подробностей, мало форм контакта. Но главное — у большинства сайты сделаны как под копирку, мимикрируя под Hormann.

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

Подробный анализ конкурентов можно посмотреть ниже:

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

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

Все инсайты после кастдева легли в основу контента на сайте «Вратаря».

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

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

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

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

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

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

Персональный подход. Добавили элементы, которые помогают клиентам на разных этапах:

Анимация вовлекает посетителя, помогает доступно преподнести нужную информацию или предложить развлекательный интерактив. Сайт с анимацией выглядит интересным и «живым».

Акцент на мобильной версии. В исследовании мы выяснили, что больше 70% аудитории заходит на сайт «Вратаря» со смартфонов. Поэтому решили разрабатывать дизайн так, чтобы мобильная версия была такой же удобной и функциональной, как и десктопная.

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

В итоге мы собрали макеты с дизайн-концепцией, которые презентовали «Вратарю».

Это выглядело примерно так:

Но клиент предложил корректировки:

Это нормально, что на этапе презентации дизайн-концепции возникают правки. Для этого и нужен этот этап — нащупать то, попали ли мы в вижн клиента, в его визуальное представление сайта или нет. А уже потом полноценно делать дизайн и разработку. Мы учли пожелания заказчика и допилили дизайн-концепцию.

Было/стало на примере двух блоков:

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

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

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

Мы разделили съемку на 3 части:

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

В первых двух съемочных днях участвовали сотрудники и руководители «Вратаря». Нам было важно, чтобы команда подготовилась к съемке, в том числе по части одежды. Поэтому мы подготовили для сотрудников чек-листы. Вот пара примеров:

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

А вот как снимали этот чемодан:

А теперь история про третий съемочный день.

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

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

Мы составили список требований к локации:

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

Команде продакшена пришлось фотошопить снимки: на некоторых у моделей были красные от холода носы. 🙂

Но итогом и мы, и заказчик очень довольны. Фото и видео получились стильными, но реалистичными.

Подробно о съемках для «Вратаря» и еще нескольких клиентов мы рассказывали в статье нашего журнала: «Как организовать хорошую фото- и видеосъемку для наполнения сайта».

Хотя дизайн-концепция была согласована, мы все равно сперва собрали 5 страниц сайта в Figma и показали их клиенту. А остальные сделали после финального ок.

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

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

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

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

Этап 1. Проанализировать конкурентов и клиентов

Проанализировали 50+ сайтов поставщиков ворот.

Провели кастдев — 40+ интервью с клиентами «Вратаря».

Этап 2. Разработать дизайн-концепцию

Отталкивались от анализа конкурентов и вдохновлялись премиальными брендами в других отраслях.

Этап 3. Подготовить макеты

По согласованной с клиентом дизайн-концепции подготовили макеты каждой из 50 страниц нового сайта.

Этап 4. Провести фото- и видеосъемку для сайта

Параллельно с разработкой сайта провели 3 съемки — в шоуруме, в фотостудии и на объекте.

Этап 5. Разработать и сверстать сайт

Разработали сайт и наполнили его уникальным контентом.

В итоге мы сделали сайт, который выделяется среди конкурентов за счет:

В этом проекте у нас было немало трудностей, которые мы отрефлексировали и сделали выводы. Расскажу о нескольких.

Первое. Было сложно найти баланс по количеству текста. Сайты премиальных брендов обычно содержат минимум текста. Apple, Porsche и Mercedes-Benz не нужно ничего доказывать и объяснять людям, почему их надо выбирать. А «Вратарю» — нужно, потому что они не производят свою продукцию, те же ворота можно купить у 20 других дистрибьюторов.

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

Но большое количество текста не мэтчится с премиальным дизайном. Мы потратили 30 часов на то, чтобы подобрать варианты макетов. В итогу мы справились: сохранили вайб глянца, но наполнили сайт так, что каждая страница по масштабу сопоставима отдельному сайту у конкурентов. Такой сайт решает задачу — у нас цель не продать за 30 секунд, а погрузить в компанию и объяснить, почему надо покупать именно у «Вратаря», на 20% дороже, чем у других дистрибьюторов.

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

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

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

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

Читайте больше кейсов и полезных материалов в нашем профиле на vc.ru или на нашем сайте:

Хотите такие же классные результаты? Давайте начнём с бесплатного аудита вашего маркетинга и вместе поищем точки роста😉.