Сайт для производителя пресс-форм New Form, который показывает масштаб завода

Заказчик

New Form, российско-китайская производственно-инжиниринговая компания: пресс-формы, литьё пластика, прототипы, автоматизация. 60 000 м? площадей в России и Китае, работает с 1994 года.

Задача

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

Заказчик

New Form это российско-китайская производственно-инжиниринговая компания. Она закрывает полный цикл: проектирует и изготавливает пресс-формы, льёт изделия из пластика под давлением, делает прототипы на 3D-принтере, запускает серийные производства и автоматизирует заводы. У компании четыре производственные площадки, три в Китае и одна в России, общей площадью 60 000 м². Работает с 1994 года, среди задач, которые она закрывает, есть проекты для Газпрома.

Производство New Form: 60 000 м? площадей в России и Китае

С чем пришёл клиент

Старый сайт New Form работал на Битриксе и не передавал масштаб компании. Посетитель видел небольшую мастерскую, хотя за сайтом стояли российская инженерная школа и мощности китайских заводов.

Клиент назвал три проблемы:

1. Нет структуры. Сложные услуги, от литья под давлением до изготовления оснастки, были свалены в одну кучу.
2. Сайта не видно в поиске. Органического трафика он почти не приносил.
3. Разрыв в образе. Компания работает на уровне федеральных заказчиков, но сайт выглядел как студенческий проект.

Цель проекта клиент сформулировал так: новый образ бренда в сети, который подчеркнёт федеральный масштаб и избавит от образа «мастерской с одним принтером». Задача для нас: структура и дизайн корпоративного сайта, на который потом встанут личный кабинет клиента и маркетплейс комплектующих.

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

Инженер New Form в цеху у пресс-формы

Что мы сделали

1. Разобрали путь клиента

В нише пресс-форм клиенты приходят тремя путями: с отраслевых выставок, по рекомендации и через поиск оборудования. Последний путь оказался самым показательным. Люди ищут термопластавтомат (ТПА) и не понимают, что сначала им нужна пресс-форма.

Отсюда главный вывод. Сайт продаёт услуги и при этом учит: объясняет порядок работ и ведёт посетителя от идеи изделия до серийного выпуска. Под эту логику мы собрали структуру сайта.

Путь клиента на сайте: блок «Всё начинается с пресс-формы» объясняет порядок работ

2. Начали с чёрно-белого прототипа

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

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

3. Сделали форму основой визуального языка

В основу дизайна легли сложные объёмные формы. Это метафора того, чем занимается компания: New Form отливает идеи в точные физические изделия.

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

Палитру выбрали смелую для промышленности: яркий розовый и глубокий фиолетовый. Среди серых сайтов конкурентов такой сайт узнаётся с первого экрана.

Матрёшки из логотипа: визуальный код сайта

4. Добавили персонажа

Сквозным героем сайта стала 3D-голова Эйнштейна. Её модели прислал клиент, а мы сделали из неё рассказчика: за каждой формой стоят интеллект и точный расчёт. В блоке услуг голова перекрашивается вместе с карточкой и кнопкой, когда посетитель переключает направление.

«Мы выстроили прямую связь между формой изделий компании и визуальным языком сайта. Типографика должна была передать серьёзность бренда и его динамику одновременно», говорит Илья Мельник, дизайнер студии «Арбуз».

3D-голова Эйнштейна, сквозной персонаж сайта

5. Собрали первый экран для двух аудиторий

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

Голос компании оставили живым. На кнопке заявки в шапке каждой страницы стоит фраза самой New Form: «Превратить ХЗ в ТЗ». Заголовки направлений написаны с юмором, а страницу «Услуги» открывает зацикленное видео.

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

6. Показали людей

В команде New Form много женщин-инженеров. Мы сделали это частью бренда и ушли от стереотипных «мужчин в касках». Живые лица добавили компании открытости, а в B2B это прямой путь к доверию.

Инженеры New Form на сайте вместо «мужчин в касках»

7. Собрали сайт на MODX

Главная, страницы четырёх направлений и ремонта пресс-форм, «О компании», портфолио, блог и контакты. Тексты главной, услуг и раздела о компании написали мы. Кейсы и статьи компания добавляет сама через админку, для этого мы записали видеоинструкцию.

Результаты

• Четыре ключевых направления (пресс-формы, автоматизация, прототипирование, изготовление изделий) получили свои страницы, цвета и визуальный ряд.
• SEO-структура заложена с этапа прототипа: сайт готов бороться за высокочастотные запросы отрасли в Яндексе и Google.
• New Form получил сайт, который не стыдно показывать на международных выставках.
• Отдел продаж вместо сайта-визитки получил рабочий маркетинговый инструмент. Теперь компания выглядит в сети так же масштабно, как её производство.

3D-пресс-форма в цветах New Form: одна из страниц направлений

Видео, экраны и подробности собраны в полном кейсе на сайте студии «Арбуз».

Перейти на сайт