Корпоративный сайт «Сибирской горно-металлургической компании»

• О клиенте

• Задача

• Сбор требований с бизнеса

• Бенчмаркинг

• Информационная архитектура

• Проектирование

• Дизайн

• Интерфейсные решения

• Разработка

• Результат

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

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

Перед стартом проекта разработали дорожную карту, которая включала следующие пункты:

• проведение бизнес-интервью с руководящими лицами разных отделов и структур компании;
• бенчмарк-анализ;
• построение информационной архитектуры нового сайта;
• подготовка прототипов всех страниц;
• разработка дизайн-концепции;
• подготовка дизайн-макетов и адаптивов всех страниц;
• вёрстка и программирование сайта.

Дальше расскажем о каждом этапе подробнее.

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

Параллельно с интервью проводили бенчмарк-анализ.

Посмотрели, как позиционируют себя другие компании. Например, как представлена информация о партнёрах, продукции, экологии.

Для анализа выбрали 13 сайтов. Часть из них назвал заказчик, часть предложили сами, выбрав подходящие по скорингу (сфера деятельности, размер бизнеса, внешний вид сайта). Смотрели основные разделы: Главная, О компании, Карьера, Устойчивое развитие, Направления продукции. А также дополнительный функционал. Например, разделение контактов по направлениям уменьшает объём страницы и упрощает поиск.

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

Сделали структуру шапки сайта — отразили разделы меню и страницы, которые войдут в эти разделы.

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

На основе собранной информации с этапа аналитики подготовил прототипы для страниц сайта. Они стали основой при разработке дизайна.

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

Несмотря на то, что компания работает в горно-металлургической отрасли, клиент не хотел, чтобы сайт вызывал у пользователей привычные ассоциации с этой сферой, как с чем-то тяжёлым и тёмным. СГМК уделяет большое внимание защите окружающей среды, а их партнёры в своей деятельности придерживаются целей в области устойчивого развития. И это нужно было отразить не только в контенте, но и в визуальном оформлении сайта.

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

Продумали веб-анимации, чтобы сделать сайт динамичнее. Например:

• Эффект параллакса на ключевых страницах — при пролистывании блоки и экраны накладываются друг на друга.
• Кнопки на всех страницах с ховер-эффектом — при наведении изменяется цвет текста, заливка, обводка.

После согласования концепции подготовили дизайн всех страниц сайта и сделали адаптивы.

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

Например:

• В первом экране расположили слайдер, в котором отражено позиционирование компании. На каждом слайде — ключевой тезис, который отличает компанию от других.
• Ниже расположили блоки о компании: о начале пути и «СГМК сегодня». Контент показывает, какой путь проделала компания и как продолжает своё развитие.
• Блок о продукции раскрывает специализацию компании с возможностью перехода в конкретный раздел.
• Блоки о партнёрстве и сотрудничестве показывают СГМК как открытую компанию, готовую выстраивать взаимовыгодные отношения.

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

• фотографию,
• название (оно могло быть очень длинным),
• описание,
• направление (например, ферросплавы),
• производителя,
• ключевые характеристики, которые есть не для всех товаров,
• кнопку заказа.

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

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

Помимо продажи продукции у компании есть направление «Реализация имущества». Всё имущество делится на две категории: «Реализация транспорта и оборудования» и «Реализация ТМЦ» (ТМЦ — товарно-материальные ценности).

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

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

Компания крупная, внутри неё есть другие компании и несколько направлений деятельности, вакансии открыты в разных городах и сферах. Поэтому контент разделили на две страницы: «Работа в СГМК» и «Вакансии».

В левой части страницы «Работа в СГМК» разместили информацию о преимуществах работы в компании, обучении и развитии, карьерном росте и отдыхе.

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

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

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

При разработке сайта использовали технологии Bitrix, Vite, Vanilla JavaScript, Sass.

Разработали в каталогах для поиска товаров и имущества фильтры на Ajax. В них можно быстро находить позиции по нужным параметрам. В каталоге продукции — простой фильтр с возможностью выбрать тип продукции. В каталоге реализации имущества можно выбрать несколько параметров (например, тип транспорта, год, марку). Их набор неограничен, любые можно добавить через административную панель сайта. Чтобы оформить заказ, необходимо заполнить заявку.

Разработали сайт, который стал визитной карточкой компании для клиентов, партнёров, поставщиков и соискателей.

1. На сайте можно узнать о целях компании, её ценностях и направлениях развития бизнеса.

2. В каталогах продукции и реализации имущества представлен ассортимент сырья и товаров.

3. Поставщики на одной странице сайта могут посмотреть принципы закупок, требования и списки документов, перечень действующих процедур закупок.

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

5. Описание компании, её ценностей, условий труда помогает соискателям при выборе места работы.