Кейс по разработке сайта-каталога для компании, занимающейся продажей кровли

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

Существует возможность расчёта стоимости доставки материалов в зависимости от расстояния. Просто укажите количество километров от Москвы, и калькулятор мгновенно определит цену доставки.

Внедрён функционал просмотра до/после работ по монтажу. Это позволяет наглядно показать качество исполнения услуг.

Одним из самых важных элементов в проекте является лид-форма, которую мы разместили на главной странице для быстрого доступа к её заполнению. Лид-форма представляет собой окно с выбором нужной категории товаров: кровля, фасад или забор. Далее идёт выбор вариации товара, возможность указать площадь кровли / фасада или необходимый размер забора. Также можно прикрепить файл чертежа и выбрать дополнительные услуги.

На странице производителя каждой подкатегории товара (например, Металлочерепица Grand Line) присутствует его описание, логотип и цена, слайдер с фотографиями и кнопки расчёта, быстрого заказа, заказа замера и монтажа.

Ниже размещены все коллекции товара с возможностью быстрого переключения между ними, технические характеристики каждой коллекции, изображение и схема. Затем можно посмотреть  все покрытия и цвета каждой коллекции. Под кнопкой “Подробнее о покрытии” скрывается блок с выбором банка для покупки в рассрочку. Такие страницы призваны ознакомить посетителя сайта со всей доступной информацией по различным разновидностям товара каждого производителя, чтобы у человека была возможность сравнить и выбрать наиболее подходящий для себя вариант.

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

Description-миниатюра

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

Навигационный меню-бар

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

Построение маршрута

Для удобства нахождения офиса компании на странице “Контакты” разместили интерактивную карту с возможностью построения маршрута в Яндекс и Google картах. Маршрут можно строить как от текущего месторасположения, так и любого другого адреса.

Заявки в Telegram с файлом

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

Боковой сайдбар

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

Карты рассрочек

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