Корпоративный сайт для «Нового Втормета»

«Новый Втормет» — крупный участник в сфере переработки лома, имеет 276 пунктов приёма чёрных и цветных металлов по всей России. Входит в тройку лидеров в отрасли и занимает 1-е место по количеству площадок.

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

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

Для этого требовался единый сайт, который в дальнейшем будет развивать франшизу.

Для создания нового сайта провели комплекс работ:

— Организовали серию бизнес-интервью с представителями клиента, собрали и оформили требования к новому сайту.

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

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

— Собрали информационную архитектуру сайта на основе МИО.

— Спроектировали страницы сайта.

— Разработали дизайн-концепцию на базе брендбука.

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

— Сделали фронтенд- и бэкенд-разработку.

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

✦ Бизнес-интервью

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

Также нам предоставили отчёт по исследованию целевой аудитории, который подготовило стороннее агентство.

✦ Конкурентный анализ

Проводили параллельно с интервью. Основных конкурентов назвал клиент, плюс наш UX-аналитик дополнил список несколькими компаниями, которые подходили по скорингу (сфера деятельности, позиционирование, посещаемость ресурса).

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

✦ Модель информационных ожиданий и информационная архитектура

Используя данные из исследования, построили модель информационных ожиданий (МИО) для 4 персон: разовых ломосдатчиков, ломосдатчиков-профессионалов, партнёров и управляющих.

Из МИО вынесли все действия пользователей и распределили их по будущим страницам сайта в информационной архитектуре.

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

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

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

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

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

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

Иконки услуг и преимуществ стилизовали, используя лишь фирменные паттерны.

✦ Калькулятор

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

✦ Прайс-лист

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

✦ Выбор локации

Функционал разместили в шапке сайта. Можно выбрать отдельно город и пункт приёма лома.

Возможны 3 сценария, когда какой пункт отображается:

— выбран пункт приёма по умолчанию, если не включена геолокация (показывается основной пункт приёма);

— выбран ближайший пункт приёма, если включена геолокация;

— выбран текущий пункт приёма, который уже выбирали ранее (при повторных заходах пользователя).

Пункт приёма можно изменить через ту же кнопку в шапке сайта. Есть возможность построить маршрут до этого пункта. Рядом расположили карту, на которой также можно выбрать подходящий пункт приёма лома.

Вёрстку сайта реализовали на HTML и Java Script. Так как дизайн выполнен в стилистике, которая подразумевает анимации, дизайнер описывал для программиста, где и какая анимация должна быть. Например, как должен вести себя анимированный баннер на главной странице. Также поработали над картой — при приближении и отдалении пункты перегруппировываются в кластеры в зависимости от масштаба.

Кодинг выполнили на Битриксе. Особое внимание уделили проработке функционала определения геопозиции. Это ключевой момент, так как цены на лом и акции зависят от пункта приёма. При смене пункта изменяются цены в прайс-листе, поэтому требовалась ещё настройка автоматизированного обмена данными с 1C. Сделали полную настройку сервера и доменного имени.

В итоге нам удалось разработать единую цифровую площадку, которая объединила более шести разрозненных сайтов и 276 пунктов приема лома по всей России.

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

Сайт запущен, но пока не доступен к просмотру, так как наполняется контентом на стороне заказчика.