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

В задачи этого проекта входило обновить корпоративный сайт дочерней компании «Северсталь подъёмные технологии», которая специализируется на продаже стальных канатов, а также грузоподъемных стропов и изделий из стальных канатов собственного производства. Такая продукция используется для кранов, лифтов, добычи полезных ископаемых, судостроения и прочих отраслей.

Заказчику не нужен был классический интернет-магазин — но продуманный каталог и карточки товара на сайте всё-таки были нужны. Поэтому мы начали со структуры.

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

В каталоге на старом сайте была неудобная структура: в одной большой категории хранились товары нескольких подкатегорий вместе. Например, в блоке «Стропы» встречались сразу и цепные, и канатные, и текстильные — чтобы найти нужное, приходилось пролистывать вообще всё. Когда-то такой приём мог сработать для SEO-продвижения, но с той поры пользовательские сценарии (и ожидания) сильно изменились.

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

Навигацию внутри каталога сделали в лучших традициях е-коммерс: никаких длинных «простыней» с перечнем продукции. Вместо этого — постраничная пагинация с помощью стрелок или быстрой кнопки «показать ещё».

Чтобы быстро сориентировать пользователя внутри категории, мы предусмотрели фильтр: в нём можно задать специфические параметры изделия или в момент найти нужное по номеру ГОСТ или ТУ.

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

Раньше на сайте была отдельная вкладка «Назначение», где можно было выбрать тип техники — к ней подбирались конкретные канаты, стропы и дополнительные комплектующие. Мы же решили, что гораздо удобнее давать такую информацию в карточке конкретной позиции.

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

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

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

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

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

Поскольку продукцию на сайте положить в корзину нельзя (продукт слишком сложный и нюансный при оформлении заказа), у каждой позиции в каталоге есть кнопка «Узнать цену». По клику на неё появляется форма обратной связи:

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

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