Новый Втормет
Промышленность
Россия
Корпоративный сайт
Август 2023
«Новый Втормет» — крупный участник в сфере переработки лома, имеет 276 пунктов приёма чёрных и цветных металлов по всей России. Входит в тройку лидеров в отрасли и занимает 1-е место по количеству площадок.
В 2023 году «Новый Втормет» решил провести глобальный ребрендинг, чтобы создать лидирующий устойчивый бренд, который служит ориентиром по подходу и клиентоориентированности среди конкурентов.
Для этого требовался единый сайт, который в дальнейшем будет развивать франшизу.
Для создания нового сайта провели комплекс работ:
— Организовали серию бизнес-интервью с представителями клиента, собрали и оформили требования к новому сайту.
— Провели конкурентный анализ, чтобы определить, какие есть паттерны в отрасли, что важно и нужно пользователям.
— Построили модель информационных ожиданий (МИО) для разных сегментов целевой аудитории, чтобы не упустить при проектировании блоки и контент, который помогает пользователям в принятии решений.
— Собрали информационную архитектуру сайта на основе МИО.
— Спроектировали страницы сайта.
— Разработали дизайн-концепцию на базе брендбука.
— Подготовили дизайн внутренних страниц и адаптивы.
— Сделали фронтенд- и бэкенд-разработку.
Дальше расскажем об этих этапах подробнее.
✦ Бизнес-интервью
Начали с серии бизнес-интервью с представителями заказчика из разных отделов. Говорили об их внутренних процессах, зафиксировали цели и задачи нового сайта.
Также нам предоставили отчёт по исследованию целевой аудитории, который подготовило стороннее агентство.
✦ Конкурентный анализ
Проводили параллельно с интервью. Основных конкурентов назвал клиент, плюс наш UX-аналитик дополнил список несколькими компаниями, которые подходили по скорингу (сфера деятельности, позиционирование, посещаемость ресурса).
Помимо документа с результатами исследования, собрали в Фигме мудборд по ключевым страницам и блокам. Он помог UX-дизайнеру и на этапе построения информационной архитектуры, и в процессе проектирования.
✦ Модель информационных ожиданий и информационная архитектура
Используя данные из исследования, построили модель информационных ожиданий (МИО) для 4 персон. Из МИО вынесли все действия пользователей и распределили их по будущим страницам сайта в информационной архитектуре.
Кроме основных страниц сайта (например: главная, о компании, контакты) продумывали функционал и логику калькулятора, работу пользователя с прайс-листом и возможность выбора геолокации. Показывали на прототипах разные состояния и варианты этих частей интерфейса.
Разработку дизайн-концепции начали с изучения брендбука. Он содержал в себе элементы фирменного стиля, которые необходимо использовать для узнаваемости в онлайн-среде.
За основу дизайн-концепции взяли направление, близкое к фирстилю «Нового Втормета» — брутализм, контраст, технологичность.
В первую очередь думали над тем, как создать неповторимый образ бренда, который запомнится пользователям. Поэтому отказались от использования фотоконтента, чтобы уйти от стоковых решений в пользу узнаваемых форм на контрасте цветовых решений.
Подготовили два варианта: один с ярким оранжевым первым экраном, второй — сдержанный, в тёмных оттенках. Рубленый шрифт и графика не имеют скруглений. За счёт этого они вписываются в фирменный стиль, подчёркивая брутальность.
Клиент выбрал вариант, в котором основной цвет — серый, а оранжевый используется как акцентный.
Иконки услуг и преимуществ стилизовали, используя лишь фирменные паттерны.
✦ Калькулятор
Изначально в калькуляторе предполагалось всего 3 поля, но позже он превратился в подробный калькулятор, похожий на кредитный. С его помощью можно примерно понять, какие материалы и на какую сумму можно сдать. Предусмотрели возможность выбора услуги вывоза металла. От этого зависит итоговая цена.
✦ Прайс-лист
На странице сделали липкую навигацию. Она даёт возможность быстро перейти к нужному виду металла и посмотреть цены для разных видов лома из разных категорий. В самой таблице есть названия видов металлов, под каждым из них — обозначения видов лома и расшифровка, что именно к ним относится.
✦ Выбор локации
Функционал разместили в шапке сайта. Можно выбрать отдельно город и пункт приёма лома.
Возможны 3 сценария, когда какой пункт отображается:
— выбран пункт приёма по умолчанию, если не включена геолокация (показывается основной пункт приёма);
— выбран ближайший пункт приёма, если включена геолокация;
— выбран текущий пункт приёма, который уже выбирали ранее (при повторных заходах пользователя).
Пункт приёма можно изменить через ту же кнопку в шапке сайта. Есть возможность построить маршрут до этого пункта. Рядом расположили карту, на которой также можно выбрать подходящий пункт приёма лома.
Вёрстку сайта реализовали на HTML и Java Script. Так как дизайн выполнен в стилистике, которая подразумевает анимации, дизайнер описывал для программиста, где и какая анимация должна быть. Например, как должен вести себя анимированный баннер на главной странице. Также поработали над картой — при приближении и отдалении пункты перегруппировываются в кластеры в зависимости от масштаба.
Кодинг выполнили на Битриксе. Особое внимание уделили проработке функционала определения геопозиции. Это ключевой момент, так как цены на лом и акции зависят от пункта приёма. При смене пункта изменяются цены в прайс-листе, поэтому требовалась ещё настройка автоматизированного обмена данными с 1C. Сделали полную настройку сервера и доменного имени.
В итоге нам удалось разработать единую цифровую площадку, которая объединила 276 пунктов приема лома по всей России.
Новый сайт стал единой точкой входа для клиентов Втормета — на нём пользователи могут найти информацию об услугах и преимуществах, подобрать удобный пункт приёма лома. Калькулятор и прайс-лист позволяют узнать примерную стоимость лома разных типов.
Сайт запущен, но пока не доступен к просмотру, так как наполняется контентом на стороне заказчика.
UX-студия Everest с удовольствием обсудит вашу задачу