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