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

• О клиенте

• Задача

• Предпроектная аналитика

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

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

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

• Дизайн

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

• Результат

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

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

Основные цели клиента, которые он хотел достичь за счёт сайта:

• показать масштаб и возможности;
• повысить уровень знания и доверия среди b2b-аудитории;
• добавить дополнительные возможности коммуникации с клиентом через интерактивные сервисы.

Состояла из нескольких этапов: предпроектная аналитика, проектирование, разработка дизайн-концепции, дизайн внутренних страниц и адаптивов, фронтенд- и бэкенд-разработка.

Начали с серии бизнес-интервью с представителями заказчика из разных отделов:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• выбран пункт приёма по умолчанию, если не включена геолокация (в этом случае показывается основной пункт приёма);
• выбран ближайший пункт приёма, если включена геолокация;
• выбран текущий пункт приёма, который уже выбирали ранее (при повторных заходах пользователя).

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

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