О компании
Компания «Стройматик» — создатель и лидер рынка забивных ж/б фундаментов для малоэтажного строительства. Они первыми разработали и запустили в производство модель компактной сваебойной установки для погружения малых свай, труб и шпунта. На данный момент компания успешно возводит фундаменты, производит строительное оборудование и продаёт готовую модель строительного бизнеса.
Прежний сайт: stroimatic.com
Задача
У клиента возникла идея создать дополнительный сайт с возможностью входа в «личный кабинетом». Новую площадку решили делать с использованием фреймворков.
Результат
На наш взгляд, мы создали удобный, лёгкий и стильный сайт, интересный как профессионалам, так и тем, кто знаком с темой поверхностно. Выстроили простую и привлекательную цепочку, от знакомства с продукцией до покупки, разработали информативный каталог, сделали «Личный кабинет».
Сваебойные установки — бизнес узкоспецифический. Нужно было рассказать просто о сложном, не допустив ошибок, которые сразу бы заметили профессионалы. Чтобы успешно реализовать проект, нам пришлось максимально погрузиться в тему, понять продукт, переработать тонны информации.
О проекте
Компания «Стройматик» — создатель и лидер рынка забивных ж/б фундаментов для малоэтажного строительства. Они первыми разработали и запустили в производство модель компактной сваебойной установки для погружения малых свай, труб и шпунта. На данный момент компания успешно возводит фундаменты, производит строительное оборудование и продаёт готовую модель строительного бизнеса.
Задача
У клиента возникла идея создать дополнительный сайт с возможностью входа в «личный кабинетом». Новую площадку решили делать с использованием фреймворков.
Решение
На наш взгляд, мы создали удобный, лёгкий и стильный сайт, интересный как профессионалам, так и тем, кто знаком с темой поверхностно. Выстроили простую и привлекательную цепочку, от знакомства с продукцией до покупки, разработали информативный каталог, сделали «Личный кабинет».
Сваебойные установки — бизнес узкоспецифический. Нужно было рассказать просто о сложном, не допустив ошибок, которые сразу бы заметили профессионалы. Чтобы успешно реализовать проект, нам пришлось максимально погрузиться в тему, понять продукт, переработать тонны информации.
Что мы сделали
Первым делом мы хотели выяснить, на каких рынках обитают клиенты. Проанализировали целевую аудиторию, опросили сотрудников компании. Оказалось, клиенты находятся на B2B и B2C и уровень знаний о продуктах компании у них очень разный. Соответственно, нужно было доступно рассказать о франшизе и мобильных установках, сохранив привлекательность сайта для клиентов, хорошо разбирающихся в продукте.
При этом писать большие тексты мы не могли: современные тренды требуют максимального использования инфографики. Мы нашли выход: максимально облегчили тексты и расставили по сайту формы обратной связи. Специалисты могут связаться с компетентным менеджером, который профессионально ответит на вопросы о сваебойном оборудовании.
Дизайн сайта преследовал ту же задачу: рассказать о сложном продукте просто и привлекательно, не упустив ничего важного. Клиент хотел отойти от стилистики текущего сайта, но оставить фирменные цвета и изображения.
Также нужен был «Личный кабинет» — простой, понятный и в стиле сайта.
В основу цветового решения легло сочетание тёмного серо-стального оттенка с акцентным оранжевым — стильное, вызывающее ощущение надёжности, серьёзности компании и продукта, который она производит. При этом сайт в целом выглядит легко и неперегруженно за счёт основного белого цвета и воздуха между блоками. Для удобства чтения мы использовали сочетание крупных заголовков и умеренного размера основного текста. Мы полностью отказались от кричащих ярких анимаций, которые раздражают пользователя и отвлекают от главного — знакомства с продуктом.
Структура сайта и дизайн были продуманы так, чтобы ненавязчиво вести клиента к покупке, отвечая на вопросы, рассказывая только о важном и нужном и оставляя возможность в любой момент связаться с менеджером для предметного обсуждения. По словам заказчика, мы успешно с этим справились.
Главная страница
Структуру главной страницы мы разрабатывали вместе с маркетологом «Стройматик». Она должна удержать внимание пользователя, дать всю информацию, чтобы принять решение, а также призвать оставить свои контактные данные.
Всё взаимодействие с потенциальным клиентом происходит именно на главной странице. По мере пролистывания пользователь постепенно знакомится с продуктами и их работой. Здесь же освещаются теоретические вопросы. Например, под блоком, описывающим преимущества установки, расположен ещё один — «Почему нужно купить сваебойную установку?».
Таким образом, мы не уводим пользователя с главной страницы и продолжаем знакомить с продуктами компании. За блоком о сваебойных установках следуют блоки с информацией о франшизе, лизинге, новости и видеозаписи работы установки. Внизу страницы мы разместили контактные данные компании и карту.
В блоке про франшизу мы собирались разместить гиф-анимацию установки, забивающей сваю. Это бы позволило увидеть работу установки, не открывая видео. К сожалению, не было возможности сделать достаточно качественных фотографий, поэтому дизайнер отрисовала реалистичную модель вручную.
Чтобы не ошибиться в этапах работы установки, пришлось просмотреть массу обучающих видео о забивании свай и установке фундамента. Этапы забивки должны были проходить синхронно с прокруткой преимуществ. Но, поскольку для прочтения преимущества нужно было больше времени, этапы забивки сваи происходили со значительной задержкой и не давали ожидаемого эффекта совместно с гиф-анимацией. В результате мы пробуем связать изображения установки в разных положениях со сменой преимуществ на стороне фронт-специалиста.
Каталог
Изображение установки в каталоге мы дополнили яркими элементами, при наведении на которые появляются подсказки с названием узла. Можно посмотреть, из каких узлов состоит установка. Также это сделало изображения привлекательнее.
При переходе на карточку товара посетитель видит объёмное изображение, основные характеристики оборудования и сертификаты. Здесь же размещены видеообзор, FAQ, блок с отзывами и форма для оставления заявки.
При работе с объёмным изображением возникла проблема, из-за которой нам пришлось получать разрешение на изменение макетов уже на этапе разработки. Дело в том, что при тестировании программы 3D-shot мы не учли, что итоговое объёмное изображение загружается на сайт с белым обрамлением на краях. Баннер же сайта на всех страницах был серого цвета и собирал дизайн воедино. Мы предложили заказчику вставить на баннер статичное изображение установки, а объёмное опустить на белый фон, к остальным блокам.
Франшиза
Страницу о франшизе мы дополнили картой, где можно посмотреть свободные регионы и сеть франшиз, а также выбрать интересующий район. Специально для пользователей, заинтересованных в сотрудничестве, мы привлекательно отобразили шаги для запуска успешного бизнеса и добавили лёгкую анимацию.
Шаги для запуска успешного бизнеса
Работа в «Стройматик»
На странице для потенциальных сотрудников компании мы разместили актуальные вакансии с возможностью перехода на hh.ru. А для тех, кто не нашёл подходящую вакансию, но хочет в дальнейшем работать в компании, мы создали удобную форму, к которой можно прикрепить резюме и отправить на рассмотрение.
«Личный кабинет»
«Личный кабинет» был задуман как удобное и полезное пространство для тех пользователей, которые уже приобрели установку. В ЛК владелец видит информацию о приобретённом оборудовании (технические данные, спецификации, документы), историю обращений в техподдержку, может просматривать эксклюзивные видеоматериалы и получать уведомления.
Для компании это стало дополнительной точкой касания с клиентом и добавило сотрудничеству ценности.
В отдельном разделе мы разместили информацию о специалистах, прошедших необходимое обучение. Можно скачать сертификаты, а также посмотреть обучающие курсы и записаться на них.
На вкладке «Установка» заложена возможность добавить обращение в техподдержку. Для этого в сайт будет встроена CRM-система. Это позволит менеджерам оперативно получать обратную связь и решать вопросы в индивидуальном порядке. Все обращения сохраняются в базе, их всегда можно открыть, если понадобится.
