О клиенте
Сибирская горно-металлургическая компания (СГМК) — лидер среди предприятий горно-металлургической отрасли Кузбасса, одна из ведущих компаний на российском рынке. Поставляет металлолом на металлургические предприятия Сибири и Урала, добывает доломит и производит щебень.
Задача
Компания обратилась к нам за разработкой нового сайта, который будет отражать все направления деятельности компании, а в структуру добавятся новые разделы и страницы.
Задача сайта — продвигать бренд в онлайне, презентовать направления деятельности компании, её продукцию.
Сбор требований с бизнеса
На старте проекта провели бизнес-интервью с главным заказчиком и руководителями разных отделов и структур. Ответственные за производство, HR, партнёрство и другие подразделения рассказали, что на их взгляд нужно подсветить на сайте, чтобы отразить эти сферы деятельности компании.
Бенчмаркинг
Посмотрели, как позиционируют себя прямые и косвенные конкуренты компании. Например, как представлена информация о партнёрах, продукции, экологии.
Для анализа выбрали 13 сайтов конкурентов. Часть из них назвал заказчик, часть предложили сами, выбрав подходящие по скорингу (сфера деятельности, размер бизнеса, внешний вид сайта). Смотрели основные разделы: Главная, О компании, Карьера, Устойчивое развитие, Направления продукции. А также дополнительный функционал. Например, разделение контактов по направлениям уменьшает объём страницы и упрощает поиск.
Информационная архитектура
Используя данные, полученные на бизнес-интервью и в результате бенчмарк-анализа, построили информационную архитектуру.
Сделали структуру шапки сайта — отразили разделы меню и страницы, которые войдут в эти разделы.
Далее составили подробную структуру всего сайта, расписали состав страниц и смысловых блоков. Это помогло UX-дизайнеру уже на этапе схемы понять, что будет включать та или иная страница.
Проектирование
На основе собранной информации с этапа аналитики подготовил прототипы для страниц сайта. Они стали основой при разработке дизайна.
Дизайн
Несмотря на то, что компания работает в горно-металлургической отрасли, клиент не хотел, чтобы сайт вызывал у пользователей привычные ассоциации с этой сферой — железо, грязь, тяжесть. СГМК уделяет большое внимание защите окружающей среды, а их партнёры в своей деятельности придерживаются целей в области устойчивого развития. И это нужно было отразить не только в контенте, но и в визуальном оформлении сайта.
В концепции использовали слайдеры с горами и чистым воздухом, чтобы сайт воспринимался свежим и лёгким. Кнопки сделали контурными, так они не утяжеляют внешний вид.
Продумали веб-анимации, чтобы сделать сайт динамичнее. Например:
Эффект параллакса на ключевых страницах — при пролистывании блоки и экраны накладываются друг на друга.
Кнопки на всех страницах с ховер-эффектом — при наведении изменяется цвет текста, заливка, обводка.
После согласования концепции подготовили дизайн всех страниц сайта и сделали адаптивы.
Интерфейсные решения
→ Главная
Стартовую страницу сделали презентационной карточкой компании. Разместили на ней короткие тексты и крупные фотографии, поделив тем самым на тематические блоки, из которых можно по кнопкам перейти на страницы с подробной информацией.
Например:
В первом экране расположили слайдер, в котором отражено позиционирование компании. На каждом слайде — ключевой тезис, который отличает компанию от других.
Ниже расположили блоки о компании: о начале пути и «СГМК сегодня». Контент показывает, какой путь проделала компания и как продолжает своё развитие.
Блок о продукции раскрывает специализацию компании с возможностью перехода в конкретный раздел.
Блоки о партнёрстве и сотрудничестве показывают СГМК как открытую компанию, готовую выстраивать взаимовыгодные отношения.
География присутствия закрепляет тезис, что СГМК — одна из крупнейших компаний в России.
→ Каталог продукции
Товары СГМК отличаются от привычных позиций в интернет-магазинах. Нам предстояло учесть особенности сферы и лаконично расположить большое количество информации в мини-карточке:
фотографию,
название (оно могло быть очень длинным),
описание,
направление (например, ферросплавы),
производителя,
ключевые характеристики, которые есть не для всех товаров,
кнопку заказа.
Чтобы показать, что у товара есть сертификат от производителя, использовали иконку и тултип с информацией.
В левой части страницы разместили фильтр, в котором можно выбрать необходимые параметры.
→ Реализация имущества
Помимо продажи продукции у компании есть направление «Реализация имущества». Всё имущество делится на две категории: «Реализация транспорта и оборудования» и «Реализация ТМЦ» (ТМЦ — товарно-материальные ценности).
Для разделения их на странице использовали табы. В этом разделе карточки товаров похожи на карточки из каталога продукции, только подстроили их по набору параметров и сделали разное отображение фотографий. Например, в реализации транспорта и оборудования разместили небольшой слайдер.
А для ТМЦ, у которых фотографий может не быть совсем, сделали это в виде вложения: информация о товарах подтягивается из excel-таблиц, потому что параметров много и если фото есть, оно отобразится.
→ Карьера
Компания крупная, внутри неё есть другие компании и несколько направлений деятельности, вакансии открыты в разных городах и сферах. Поэтому контент разделили на две страницы: «Работа в СГМК» и «Вакансии».
В левой части страницы «Работа в СГМК» разместили информацию о преимуществах работы в компании, обучении и развитии, карьерном росте и отдыхе.
Справа сделали виджет с вакансиями, который перемещается в процессе скроллинга и всегда остаётся в зоне видимости. В виджете есть табы, с помощью которых можно посмотреть все вакансии или для определённых сфер (производство, офис, айти и диджитал), прочитать краткое описание.
С этой страницы можно перейти на страницу со списком всех вакансий, который сделан по принципу карточек из каталога. В фильтре доступен выбор направления, города, опыта работы и компании.
Каждая вакансия имеет детальную страницу с подробным описанием.
→ Контакты
Информацию не стали размещать длинным списком, а поделили на смысловые единицы и разместили в табах. Это позволило сделать страницу короче, а поиск нужного контакта — более быстрым и удобным.
→ Поставщикам
СГМК закупает продукцию у других компаний. Нужно было подсветить эту деятельность, разместить информацию о принципах закупок, требованиях к поставщикам, перечне закупаемых услуг. На сайте реализовали это в виде раскрывающихся списков. Подобный функционал встречался у одного из конкурентов, клиенту понравился этот референс, но мы его переработали и адаптировали под наш сайт.
Также у компании есть действующий аукцион заявок. Аукцион — торговая площадка, работает на внешнем сайте. Интегрировали блок в страницу при разработке, а на проектировании и дизайне оставили место под таблицу, которая будет подтягиваться с другого ресурса.
Разработка
При разработке сайта использовали технологии Bitrix, Vite, Vanilla JavaScript, Sass.
→ Каталог и реализация имущества
Разработали в каталогах для поиска товаров и имущества фильтры на Ajax. В них можно быстро находить позиции по нужным параметрам. В каталоге продукции — простой фильтр с возможностью выбрать тип продукции. В каталоге реализации имущества можно выбрать несколько параметров (например, тип транспорта, год, марку). Их набор неограничен, любые можно добавить через административную панель сайта. Чтобы оформить заказ, необходимо заполнить заявку.
→ Вакансии
У компании много филиалов и департаментов со своими рекрутерами. Чтобы автоматизировать процесс, сократить расходы человеческих ресурсов и ресурсов компании на обновление вакансий, разработали модуль интеграции с HeadHunter. Он реализует выгрузку всех вакансий по городам и другим параметрам, и при обновлении на сайте HeadHunter регулярно обновляются вакансии на сайте СГМК (раз в час).
Результат
Разработали сайт, который стал визитной карточкой компании для клиентов, партнёров, поставщиков и соискателей.
На сайте можно узнать о целях компании, её ценностях и направлениях развития бизнеса.
В каталогах продукции и реализации имущества представлен ассортимент сырья и товаров.
Поставщики на одной странице сайта могут посмотреть принципы закупок, требования и списки документов, перечень действующих процедур закупок.
На отдельной странице собрана информация о целях и направлениях устойчивого развития и связанных с ними проектах, которые реализуются компанией.
Описание компании, её ценностей, условий труда помогает соискателям при выборе места работы.