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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• интерактивный калькулятор, чтобы сориентироваться по цене;
• блоки с бесплатной консультацией;
• блок с преимуществами и FAQ.

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

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

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

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

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

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

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

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

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

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

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

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

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

1. В первый день снимали в фотостудии, делали портреты сотрудников и групповое фото.
2. На второй день снимали в шоуруме.
3. На третий день — на локации, у клиента «Вратаря».

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

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

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

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

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

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

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

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

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

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

Вадим Кочетков, ведущий дизайнер

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

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

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

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

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

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

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

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