Вратарь
Услуги
Россия, Москва
Корпоративный сайт
Сентябрь 2024
Компания «Вратарь» — официальный дистрибьютор гаражных ворот Hormann. Бизнес работает с 2008 года, но это не единственный официальный представитель Hormann в России. Таких компаний — около двух десятков.
Сложно отстроиться от конкурентов, когда у вас один и тот же товар. Но «Вратарь» сделал это за счет премиального сервиса:
— Товар доставляют на фирменной машине
— Ford Transit не старше трех лет. Компания обещает, что все привезет в срок, машина не сломается по дороге и рабочие не испортят двор клиента грязью или следами машинного масла.
— Замеряют и монтируют сертифицированные мастера из России.
— При себе у них дорогие и фирменные инструменты едва ли не на все случаи жизни.
— На монтаж дают 10+ лет гарантии.
— У компании самый большой шоурум Hormann в России: ассортимент шире, чем в шоуруме самого Hormann.
Такой сервис стоит денег, поэтому «Вратарь» продает товары на 20% дороже, чем у конкурентов.
Компания поставила перед нами несколько задач.
Задача 1. Отстроить сайт от конкурентов с помощью дизайна.
Задача 2. Подчеркнуть премиальность с помощью сайта — так, чтобы нужный сегмент клиентов узнавал себя в рекламных материалах «Вратаря».
Задача 3. Написать для сайта такие тексты, которые раскроют конкурентное преимущество «Вратаря» — сервис.
Задача 4. Органично встроить в дизайн сайта новый продукт — входные и межкомнатные двери.
Старый сайт клиента не позволял решить эти задачи.
Кроме того, что он устарел технически, у него был довольно скучный дизайн — такой же, как у всех остальных дистрибьюторов Hormann — белый фон, сине-оранжевые детали и фотографии из официальных каталогов Hormann.
Исторически так сложилось, что дистрибьюторы Hormann создают сайты, максимально похожие на сайт производителя. У автодилеров, кстати, такая же ситуация. Возможно, таким способом добиваются эффекта, когда при беглом взгляде непонятно, на чьем ты сайте — производителя или дистрибьютора. А может хотят подчеркнуть престиж — официальное представительство компании. Или просто не хотят заморачиваться и используют готовые шаблоны для дизайна сайта.
Так или иначе, для задач «Вратаря» прежний сайт не годился, мы предложили разработать новый.
Мы проанализировали около 50 конкурентов «Вратаря» по России. Короткий вывод — у большинства сайты не продают. Современные качественные сайты только у 3% поставщиков ворот. У остальных либо откровенно устаревшие, либо просто проблемные — детали закопаны внутри страниц, много текста и лишних подробностей, мало форм контакта. Но главное — у большинства сайты сделаны как под копирку, мимикрируя под Hormann.
Кроме того, на фото из официальных каталогов Hormann, которые использовали многие конкуренты «Вратаря», все выглядело нетипично и непривычно для России, а потому и не вызывало у пользователей доверия. Клиентам из Москвы сложно сопоставить себя с героями этих фото. Поэтому мы предложили «Вратарю» провести профессиональную фотосессию — на объектах и в шоуруме.
Помимо того, мы провели 40+ интервью с клиентами «Вратаря». Узнали, какие есть возражения и что хорошо работает для вывода в конверсию. Это исследование помогло нам нащупать идеи для наполнения сайта контентом — какие тезисы заложить на страницах и как их преподать.
Например, мы выяснили, что клиенты настороженно относятся к вызову замерщика, ведь непонятно, кто приедет. Это возражение мы предложили закрыть так: сфотографировать всех замерщиков, разместить на сайте их фото, имена и стаж, и рассказать, как они проходят сертификацию.
Все инсайты после кастдева легли в основу контента на сайте «Вратаря».
Дизайн-концепция — это по сути макет основных страниц будущего сайта, собранный в Figma. Он помогает клиенту увидеть, как будет выглядеть готовый сайт. Дизайн-концепция включает в себя цветовую гамму, шрифты, общий визуальный стиль.
Чтобы отстроиться среди других компаний, мы решили сделать дизайн сайта дорогим и красивым. Так, чтобы клиенты сразу поняли, что «Вратарь» — лучший на рынке. В каждой сфере «премиальность» значит что-то свое. У производителей автомобилей это кожаный салон, у производителей одежды — модели с конвенциональной фигурой и отстраненным взглядом. Чтобы нащупать, как выглядит «премиальность» на рынке ворот, мы посмотрели сайты топовых игроков в нескольких нишах и выделили ряд закономерностей.
Премиальные цвета. Топовые игроки вроде Mercedes-Benz часто используют черный и другие темные цвета цвет. Он придает дизайну элегантный и изысканный стиль. Мы решили использовать темный цвет для фона, а оранжевый — для кнопок, ссылок и акцентных моментов на сайте. Он побуждает к действию и привлекает взгляд.
Фото и видео. У премиальных брендов не стоковые фото из интернета, а собственный уникальный контент — в качестве, близком к глянцевым журналам. Мы предложили клиенту организовать профессиональную фотосессию, уделив внимание обработке фотографий — так, чтобы они были крупными, четкими, цепляли внимание.
Еще мы предложили клиенту разместить на главном экране сайта видео из шоурума. Так у клиента за пару секунд сформируется впечатление, что бренд большой и ему можно доверять. Видео отлично решает эту задачу и эмоционально вовлекает пользователей.
Акцент на людях. Фото руководителя и сотрудников помогают клиенту составить представление о компании и проникнуться к ней доверием. Поэтому мы предложили клиенту сделать фото монтажников, замерщиков и других сотрудников, и использовать их в блоках со статьями, с цифрами с описанием процесса работы.
Персональный подход. Добавили элементы, которые помогают клиентам на разных этапах: интерактивный калькулятор, чтобы сориентироваться по цене, блоки с бесплатной консультацией, блок с преимуществами и FAQ.
Анимация вовлекает посетителя, помогает доступно преподнести нужную информацию или предложить развлекательный интерактив. Сайт с анимацией выглядит интересным и «живым».
Усиление преимуществ на фото. Чтобы клиент за пару секунд увидел, какие технологии используются и в чем их ценность, предложили выделить на фото преимущества товаров.
Акцент на мобильной версии. В исследовании мы выяснили, что больше 70% аудитории заходит на сайт «Вратаря» со смартфонов. Поэтому решили разрабатывать дизайн так, чтобы мобильная версия была такой же удобной и функциональной, как и десктопная.
В итоге мы собрали макеты с дизайн-концепцией, которые презентовали «Вратарю». Это выглядело примерно так:
Но клиент предложил корректировки:
— сделать меньше оранжевых элементов, потому что из-за них теряется премиальность визуала;
— убрать из фона коричневые оттенки и заменить на черный;
— не использовать шрифт с засечками, так как он выглядит несовременно;
— не использовать на сайте логотип компании и отсылки к нему в виде вратаря с доспехами.
Это нормально, что на этапе презентации дизайн-концепции возникают правки. Для этого и нужен этот этап — нащупать то, попали ли мы в вижн клиента, в его визуальное представление сайта или нет. А уже потом полноценно делать дизайн и разработку. Мы учли пожелания заказчика и допилили дизайн-концепцию.
Было/стало на примере двух блоков:
Премиум-сайт не может обойтись без качественных продуманных фотографий. Мы подобрали референсы для фото — реклама Bosch. Тематика подходящая: рабочие в процессе с инструментами. Обработка фото ближе к журнальному качеству, видно все детали.
Мы определились, какие сюжеты нужны на разных блоках сайта и какое количество фото потребуется в целом. Собрали все сюжеты в одно ТЗ и пошли искать подрядчиков.
Найти подрядчиков, которые сделают качественную фото- и видеосъемку и уложатся в бюджет и сроки — задача со звездочкой. Те команды продакшена, которые устраивали нас по качеству, стоили в два раз больше заложенного бюджета. А у тех, кто просил маленький гонорар, было среднее качество фотографий.
В итоге примерно через месяц мы вышли на продакшен из Питера, который под проекты в Москве собирает отдельную команду. С этими ребятами у нас случился полный мэтч по качеству, бюджету и срокам.
Мы разделили съемку на 3 части:
— В первый день снимали в фотостудии, делали портреты сотрудников и групповое фото.
— На второй день снимали в шоуруме.
— На третий день — на локации, у клиента «Вратаря».
Но третий день случился через несколько месяцев после первых двух. Об этом расскажем чуть позже.
В первых двух съемочных днях участвовали сотрудники и руководители «Вратаря». Нам было важно, чтобы команда подготовилась к съемке, в том числе по части одежды. Поэтому мы подготовили для сотрудников чек-листы. Вот пара примеров:
Из интересного. Мы придумали сделать видео с набором инструментов, с которым приезжает замерщик, потому что это конкурентное преимущество: на замер ворот привозят мини-шоурум — образцы ворот и инструменты на все случаи жизни. Мы нашли референс на сайте djj.com с открытием чемодана на черном фоне. Клиенту тоже понравилась эта идея. В итоге получилось такое видео на сайте:
А вот как снимали этот чемодан:
А теперь история про третий съемочный день.
Съемку на открытой локации — в коттедже с воротами от «Вратаря», мы запланировали на май-июнь: в этот сезон больше шансов застать подходящую для фото погоду. Поиск локации на себя взял заказчик: решили проводить съемки у реального клиента «Вратаря».
Нам нужен был лояльный покупатель, который готов впустить 15 человек съемочной группы на целый день. Рассматривали только владельцев коттеджей в современном стиле, так как наши фото и видео должны были выглядеть дорого и привлекать внимание потенциальных клиентов «Вратаря» — людей, которые могут себе позволить гаражные ворота за 1 000 000 ₽.
Но нужную локацию «Вратарь» искал несколько месяцев. Клиента, разрешившего провести у себя съемку и подходящего под требования нашли ближе к ноябрю, в сложный для съемок под открытым небом сезон. Мы очень зависели от погоды: в дождь качественных фото и видео не получится, подойдет сухая погода — солнечная и или как минимум тучи. В итоге мы два раза отменяли съемку из-за погоды.
Команде продакшена пришлось фотошопить снимки: на некоторых у моделей были красные от холода носы. Но итогом и мы, и заказчик очень довольны. Фото и видео получились стильными, но реалистичными.
Хотя дизайн-концепция была согласована, мы все равно сперва собрали 5 страниц сайта в Figma и показали их клиенту. А остальные сделали после финального ок.
Всего сделали дизайн 51 страницы. Они получились с большим количеством разных блоков, например страница гаражных ворот по высоте была на 28 экранов ноутбука. Это самая длинная страница, которую мы дизайнили за все время работы.
Разработкой сайта тоже занимались мы. На это ушло два месяца и две недели чистых человеко-часов. На деле проект шел значительно дольше из-за скорости обратной связи и согласований.
Во время верстки сайта клиент попросил добавить страницы, для которых у нас не было фото. А в интернете или у поставщика нет подходящих, чтобы они классно смотрелись в нашем премиальном дизайне.
Поэтому мы сгенерировали фото с красивым домом, где рядом с гаражом стоит дорогая машина узнаваемой марки. Потом мы добавили в это фото ворота, но нейронка плохо понимала, какие именно нужно сделать. Поэтому пришлось заменить ворота в фотошопе. В результате получилось фото, которое выглядит, как из каталога продукции:
В итоге мы сделали сайт, который выделяется среди конкурентов за счет:
— премиального дизайна;
— фотографий и видео реальных сотрудников, монтажа и шоурума;
— текстов, которые четко попадают в боли ЦА и раскрывают преимущества компании.
![]()
Вадим Кочетков
Веб-дизайнер
Мы считаем, что у нас получился лучший сайт в нише продаж и установки гаражных работ. Это и запоминающийся премиальный дизайн, и профессиональные фотографии и видео в офисе, шоуруме и на монтаже, и контент — в этом проекте одна страница сайта по объему и содержанию может потягаться с целым сайтом у конкурентов. Не верите? Посмотрите другие сайты по продаже гаражных ворот Hormann из поисковой выдачи.