Сайт для канадской строительной компании CLT

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

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

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

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

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

Реализовав лонгрид с последовательным рассказом о технологии, услугах, типах строений, готовых проектах, об экспертах и партнерах, а также вставляя блоки call-to-action, мы закрыли потребности по информации и продажам на все группы ЦА.

По итогам нескольких брифингов с клиентом мы выделили несколько основных сегментов ЦА, чтобы понять, для кого мы будем рассказывать историю на нашем лонгриде:

- Физ. лица

- Менеджеры (менеджеры частных компаний, b2b, архитекторы)

- Инвесторы

- HR-бренд

Что кому важно:

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

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

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

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

Ключевые слова, которые нам необходимо было передать в дизайне "Технологичность" и "Надежность"

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

--- прямые конкуренты

Главная страница построена по принципу ALL-in-ONE, здесь главное чтобы все группы ЦА получили информацию по компании и ее деятельности в виде презентации.

Разделов получилось много (забегая вперед, скажем о том, что мы предусмотрели навигацию по странице):

- главный экран о технологии;

- миссия и слоган компании;

- виды услуг;

- доп. услуги в виде BIM проектирования;

- Call-to-Action с формой обратной связи и контактными данными;

- типы строений, которые могут возводиться по данной технологии;

- дополнительные преимущества CLT панелей;

- блок про экологию, демонстрирующий, что этот материал экологически чистый и 100% возобновляемый;

- портфолио строений, возведенных по этой технологии;

- Call-to-Action с формой обратной связи и контактными данными;

- эксперты и руководители проекта;

- список партнеров;

- новости;

- блок с информацией о группе компаний, к которой принадлежит компания заказчика;

- расширенные контакты и форма обратной связи;

Ассоциативный ряд по дизайну:

- надежный

- технологичный

- современный

- безопасный

- свежий

- экологичный

- теплый

- индустриальный

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

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

--- референсы сайтов, демонстрирующие "технологичность"

--- с большей опорой на дерево, тепло – архитектурные компании

--- блочные бенто-сайты

--- Технологичность / Чертежи / Специфичные шрифты

На основании подобранных референсов мы реализовали первый концепт главной страницы.

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

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

Для главного экрана мы сделали раскадровку и подобрали референсы, чтобы 3D-специались понимал, что мы от него хотим.

--- раскадровка по шагам

--- референсы по ракурсам

--- референсы по освещению и текстурам

В итоге у нас получилось следующее:

--- раздел "услуги"

--- раздел "типы строений"

--- раздел "портфолио"

--- раздел "почему стоит работать с нами"

--- раздел "наша команда"

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

--- Адаптивная версия главного экрана

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

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

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

-----------------------

Анимация по скролу на экране с Услугами

-----------------------

-----------------------

Анимация на экране с Типами конструкций

-----------------------

Хоть компания и зарубежная, но они предпочли работать с CRM Битрикс24. 

Прямой интеграции у Webflow с Битриксом нет, но мы использовали сторонний плагин, который позволяет полностью передавать данные из заполненных форм сразу в CRM.

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

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