Кейс компании
«Северсталь» — vol.2
«Северсталь» — vol.2
Что изменилось во второй итерации проекта для гиганта сталелитейной отрасли
В начале 2018-го к нам пришёл крупный заказчик «Северсталь»: задача была амбициозной, а сроки очень сжатыми. Тогда за два месяца мы создали классный промо-сайт для профильной выставки — со сменой погоды в промо-блоке, цветными образцами черепицы, крутым адаптивом и формой обратной связи для 160+ точек продаж по России.
Во второй итерации перед нами стояли задачи масштабнее: добавить каталог, продумать карточки, рассказать об услугах и помочь пользователям с выбором продукции. Её ассортимент во второй версии проекта расширился: помимо металлочерепицы добавились фальцевая кровля и профнастил. И все они могут быть сделаны из разных материалов: «Стального шёлка», «Стального бархата» или «Стального кашемира». Голова кругом! Но начнём по порядку.
Во второй итерации перед нами стояли задачи масштабнее: добавить каталог, продумать карточки, рассказать об услугах и помочь пользователям с выбором продукции. Её ассортимент во второй версии проекта расширился: помимо металлочерепицы добавились фальцевая кровля и профнастил. И все они могут быть сделаны из разных материалов: «Стального шёлка», «Стального бархата» или «Стального кашемира». Голова кругом! Но начнём по порядку.
Главная страница
На обновлённой главной в промо-блоке теперь сочный рендер с загородным домом и плюсиками-подсказками на крыше, которые рассказывают о преимуществах кровли. Ниже, как и в первой версии, выбор между материалами — «Стальным бархатом», «Стальным шёлком» и «Стальным кашемиром» — но теперь их ключевые характеристики появляются при клике.
Под блоком с материалами — типы кровли: металлочерепица, фальцевая кровля и профнастил, которые при клике сменяют друг друга в галерее-карусельке:
Также на странице появилось больше справочной информации для потребителя: как заказать, полезные материалы, блок с вопросами и ответами, а также блок с ссылками на услуги дилеров, которые ведут на отдельную страницу.
И конечно, добавилось больше крутой анимации — в блоке о дилерах при наведении появляются яркие подложки, а в галерее с рассказом о компании слайды завораживающе сменяют друг друга:
Внутренние страницы.
Много внутренних страниц
Много внутренних страниц
Каталог
Перейти в каталог можно сразу из промо. Внутри — карточки с цветами и характеристиками кровли, а также лаконичный фильтр сверху: можно сортировать по материалу, профилю (рисунку кровли), покрытию, цветам и дилерам. Чуть выше можно поставить галочку «в наличии в моём регионе», чтобы отсеять ненужные предложения.
Андрей
Разработчик
К каждому офису дилера привязаны конкретные конфигурации продукта: цвет, материал, профиль, и при выборе конкретного города будут показываться все товары с подходящими характеристиками всех дилеров региона. Дополнительно в списке товаров применяется сортировка: те позиции, что есть в наличии в выбранном регионе, будут выводиться первыми. Те, которых нет, помечаются особой иконкой.
Ниже под сеткой товаров каталога расположился блок с популярными группами товаров: можно просмотреть подборки с серией профилей или все товары конкретного цвета. Это помогает лучше ориентироваться в предложениях из каталога, а заодно увеличивает глубину просмотра :)
Оформить заявку можно сразу из каталога — на всплывающей форме учитывается позиция из каталога, а также выбранный цвет.
Сергей
Разработчик
Форма присутствует на многих страницах сайта, и по факту она одна и та же — только с разными предустановками: если вызвать форму из карточки в списке товаров, она будет учитывать выбранную конфигурацию: цвет, тип материала, профиль, а в теме обращения будет «заказ товара» по умолчанию.
Так же она работает и на детальной странице, но есть нюанс — внутрь подставляется случайный дилер из выбранного региона. На странице «где купить» форма чуть-чуть другая — без конкретики по товару, с темой «получение консультации», но она может учитывать выбранный дилерский офис, например.
Так же она работает и на детальной странице, но есть нюанс — внутрь подставляется случайный дилер из выбранного региона. На странице «где купить» форма чуть-чуть другая — без конкретики по товару, с темой «получение консультации», но она может учитывать выбранный дилерский офис, например.
Детальная страница
Внутри карточки можно выбирать цвета, материал и профиль: изображения меняются. При этом, если выбран определённый город, будут отображаться только те цвета и рисунки профиля, которые доступны в этом регионе.
Ниже — подробное описание: преимущества, таблица с характеристиками, документы и сертификаты (при клике скачиваются в формате pdf), информация о производителе и ссылки на оформление заказа или услуги дилеров. Здесь же — полезные материалы (три свежих, которые отмечены в админ-панели для вывода в этом блоке) и вопрос-ответ, если у пользователя остались сомнения. На вкладке рядом с описанием — где купить: дилеров можно посмотреть списком, а можно переключиться в режим карты.
Дилеры в списке структурированы: те, что относятся к одной организации, показываются на одной плашке. При клике «оформить заявку» (хоть на карте, хоть в списке) можно тут же сделать заказ на расчет или консультацию.
Татьяна
Руководитель проекта
Сперва выводятся дилеры, у которых есть просматриваемое предложение, а ниже — все остальные, у которых товара в наличии нет, но можно выбрать что-то другое. У каждого показаны доступные цвета по конкретному товару.
Сергей
Разработчик
Данные из формы (вообще с любой страницы сайта) уходят на электронную почту конкретному дилеру. Также письмо дублируется администратору сайта — в нём информация немного иная: есть IP-адрес отправителя и ссылка на элемент в админ-панели, где хранятся все данные обращения.
Обычно дилерам на сайте уделяют немного внимания: указывают их контакты, дают ссылку на сайт, а там — сам разбирайся, что и как. Но на сайте «Северстали» при клике на название компании-дилера пользователь попадает в его персональную карточку — здесь вся нужная информация. Контакты и ссылка на сайт, список материалов, с которыми дилер работает, его проекты, а также продукция из каталога, доступная к заказу, и офисы продаж на карте.
Татьяна
Руководитель проекта
В проекте для «Северсталь» планируется и третья итерация — будем разрабатывать личный кабинет для дилеров, где те сами смогут заполнять данные о своих товарах, обновлять информацию по наличию, указывать офисы продаж, контакты, реализованные проекты. В итоге должен получиться удобный В2В-инструмент.
О продукции
В этом разделе спрятались сразу три типа материалов («Стальной шёлк», «Стальной бархат», «Стальной кашемир») и три типа продукции — металлочерепица, фальцевая кровля и настил. Для каждой позиции — своя страничка.
На страницах материалов подробно рассказывается об их характеристиках: есть видео, сертификаты качества, преимущества, схема слоёв, таблица параметров. Следом — подходящие позиции из каталога. Это подталкивает пользователя изучить каталог, если его заинтересовал конкретный кровельный материал.
На страницах материалов подробно рассказывается об их характеристиках: есть видео, сертификаты качества, преимущества, схема слоёв, таблица параметров. Следом — подходящие позиции из каталога. Это подталкивает пользователя изучить каталог, если его заинтересовал конкретный кровельный материал.
Страницы о типах кровли попроще — текстовые со ссылками. Но на вкладке о металлочерепице спряталась первая версия проекта — та самая, что мы делали для выставки.
 |
 |
 |
Примеры проектов
По клику на главной в разделе «проекты» пользователь попадает в список всех проектов, которые можно отсортировать по использованию конкретного материала. Карточка с проектом, как и на главной, включает цитату и галерею фотографий. При клике каждый проект можно изучить детально: появится слайдер на всю ширину экрана с полноразмерными фотографиями крыш, чтобы разглядеть товар со всех сторон.
Полезные материалы
Здесь заказчик может анонсировать вебинары, а также размещать экспертный контент: статьи, руководства, обзоры. Полезные материалы из отдельного раздела можно скачать. Информация выводится небольшими блоками, но если кликнуть в каждом «увидеть больше», можно провалиться в отдельную вселенную: у каждой страницы даже вёрстка особенная — чтобы разделить материалы визуально и по смыслу.
События анонсируют будущие мероприятия и хранят отчеты с прошедших — плашки похожи на ленту новостей в интернет-СМИ. У документов можно настраивать яркие подложки, в статьях — просмотреть все материалы, показанные плитками разных размеров.
События анонсируют будущие мероприятия и хранят отчеты с прошедших — плашки похожи на ленту новостей в интернет-СМИ. У документов можно настраивать яркие подложки, в статьях — просмотреть все материалы, показанные плитками разных размеров.
 |
 |
 |
 |
Где купить
Это могла быть просто карта. Но мы пошли дальше: дилеров по России много, они разбросаны по городам, да ещё и у каждого есть своя специфика: кто-то может сделать замеры, но не производит монтаж, кто-то готов обслуживать клиентов комплексно, кто-то работает только с определённым материалом, кто-то — со всеми в линейке «Северсталь». Эти особенности мы учли в фильтре: пользователь может отсортировать дилеров по странам, регионам, городам, материалу и услугам. Ниже есть поле поиска по названию — для тех, кто уже знает, кто ему нужен :)
При выборе конкретного дилера появляется уже знакомая карточка с информацией и кнопкой «оформить заказ». Под картой — список всех дилеров (как в карточке продукции).
Сафронов Михаил Михайлович
Начальник отдела сайтостроительства Управления КСО и бренда АО «Северсталь Менеджмент"
Сайт мы делали не столько для красоты, сколько для достижения бизнес-целей. Благодаря его гибкости, подключению маркетинговых инструментов и экспериментов с размещением кнопок call to action нам удалось выйти на хорошие показатели конверсий, и в следующем году мы еще больше усилим направление продвижения.
В проекте нам пришлось здорово помучиться с контентом — мы проделали огромную работу. Изображения домика и черепицы моделировались на заказ, поскольку фотографии сделать нереально. В процессе участвовали профессиональные эксперты по кровле и кровельным материалам. Много сил ушло на сбор материала с наших 20 дилеров в регионах и на приведение их пожеланий к общему знаменателю.
Рады, что мы с вами сделали сайт, который и вам нестыдно показать :)
В проекте нам пришлось здорово помучиться с контентом — мы проделали огромную работу. Изображения домика и черепицы моделировались на заказ, поскольку фотографии сделать нереально. В процессе участвовали профессиональные эксперты по кровле и кровельным материалам. Много сил ушло на сбор материала с наших 20 дилеров в регионах и на приведение их пожеланий к общему знаменателю.
Рады, что мы с вами сделали сайт, который и вам нестыдно показать :)
Татьяна
Руководитель проекта
Одностраничный промо-сайт после второй итерации превратился в большой и умный интернет-магазин. Определит твой город, покажет продукцию, доступную именно в нем. Подскажет, какие еще есть вариации у понравившейся тебе металлочерепицы. Поможет и в случае, если еще не определился и знаешь только, что нужна красненькая. Расскажет, как правильно выбрать металлочерепицу, как произвести монтаж. Или выберет подходящих дилеров, которые помогут с монтажом. Красота :)
Спасибо команде «Северстали» — очень приятно и легко работается, когда заказчик доверяет и заинтересован в качественном результате!
Спасибо команде «Северстали» — очень приятно и легко работается, когда заказчик доверяет и заинтересован в качественном результате!
Отзыв клиента
Смотреть результат: