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

«Северсталь» производит материалы для профнастила, металлочерепицы и фальцевой кровли, контролируя качество на всех этапах производства — от добычи руды и до готовой продукции. И для профессиональной выставки Металл-ЭКСПО 2017 производителю требовался эффектный промо-сайт, который бы рассказывал о вариантах кровли, их характеристиках и помогал пользователям быстро и самостоятельно сориентироваться в продукции и найти дилера для заказа кровли в своём регионе.

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

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

На альтернативной версии мы предложили использовать реалистичное изображение и нестандартную навигацию:

На втором экране главной страницы каждый тип черепицы показан поближе:

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

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

Помимо выбора цветов и времени года, сайт меняет цветовую гамму — заголовки, текст, ссылки и кнопки окрашиваются в фирменный цвет выбранной линейки. Если выбран «Стальной шёлк» элементы становятся зелёными, «Стальной бархат» — бордовыми, «Стальной кашемир» — синими.

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

Чтобы рассказать потребителям о составе черепицы и разнице между тремя линейками, появился блок из слоёв с подписями:

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

При нажатии на «Оставить запрос» система запоминает, с карточки какого дилера открыли форму и какую линейку последней смотрел пользователь — менеджер при просмотре заявки уже будет знать, что интересно пользователю. Причём, запрос придёт конкретному дилеру, а не какую-то общую почту — для этого мы привязали 160+ электронных адресов к точкам на карте.

На 404-й странице пользователя ждёт небольшой квест — мы предложили ему проводить кошечку по крышам до дома:

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