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