Новый корпоративный сайт и онлайн-каталог
для компании ЗАО "Строймашсервис"
к 30-ти летию компании
О проекте
Рассказывает Богдан Квитка, CEO “Goodfellazz"

В ноябре 20-го в Goodfellazz обратились руководители компании “Строймашсервис" для разработки нового сайта. Моя команда села за подготовку коммерческого предложения, изучать конкурентов и референсы.

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

Выдержка из КП:

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

Мы начали изучать производственные сайты на другие тематики, различных заводов и производств. Просматривать CSS awards, Awwwards, Рейтинг рунета в поисках вдохновения.
1 часть — креативная: Главная страница, О компании, Производство.

2 часть — коммерческая: Онлайн-каталог, Страница товара, Контакты и др.

3 часть — техническая: Код (back-end & front-end), Админ. панель.
Основная сложность задачи была в том, что хотелось совместить креативный дизайн с простыми коммерческими потребностями. Сделать сайт технологичным и нестандартным.

Для этого, мы условно разделили проект на 3 части:
Главная
01
1900px
Main page
Модульная сетка
Grid System
02
03
Прототипирование
Prototyping
04
Каталог
1900px
320px
Для каталога сделали вторую кнопку меню в левом верхнем углу, чтобы используя ее, можно было легко подобрать гидроцилиндр: а) по типу (для экскаваторов, тракторов), б) по бренду техники (Caterpillar, Shimitsu и тд).
В категории товаров, мы поняли, что товары лучше отображать списком, так как фотографии будут однотипные, возможно не самые качественные. Плюс такое решение позволит отображать большее количество гидроцилиндров, встроить горизонтальные фильтры (ибо фильтров не так много), сортировку по различным параметрам. Фото отображается только на странице товара.
Страница товара - стандартная: фото, название, описание, характеристики, кнопка “заказать". Всё наглядно, просто, привычно. Так же добавили чертеж оборудования со всеми размерами.
05
Типографика и цвета
Din PRO Condensed Black
Geometria Regular
12 24 32 40 48
Желтый цвет, как цвет ассоциирующийся со строительной техникой. Сочетание - белого фона, черного, серого и сочного яркого желтого.
#332F47
#FFDA00
#FFDA00
#838395
#E8E8F3
#2D81FF
06
О компании
About company
1900px
320px
“У вас тот довольно редкий пример, когда компания существует около 30 лет на российском рынке. Это обязательно надо отобразить. Используя архивные фото и видео. Представьте себе отдельную страницу с заголовком История компании.” Выдержка из КП


Основной фишкой стал проект “Намедни”. Так, мы стали называть страницу “ О компании”. Когда изучали проект, сильно впечатлил тот факт, что компания существует с 1991 года. Первое, что пришло в голову: “Строймашсервис” - ровесник современного Российского государства.


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

Концепция понравилась заказчикам. Мы создали совместную рабочую группу. Просматривали и сканировали старые фотографии, опрашивали старожилов компании, отбирали исторические факты, изучая “Намедни” Парфенова и Википедию. Старались отображать меньше негатива, не хотелось влезать в политические дискуссии, поэтому несколько раз меняли одни факты на другие. Холодный исторический язык, меняли на более человечный.
07
Производство
Production
1900px
320px
Совместная группа, разобрала процесс производства гидроцилиндра на 20-30 ключевых моментов. Часть пришлось исключить - слишком большой объем информации.
Интересно, что производство - не только процесс, это станки и оборудование. Завод может производить гидроцилиндры длиной в несколько метров. Оборудование, которое используется на заводе, редкое, дорогое и специализированное. Используя анимацию, инфографику, фото и видео, шаг за шагом, мы отобразили производство гидроцилиндра.
10
Back-end & Front-end
1. Добавление и редактирование оборудования в ручном режиме
8. Добавление, редактирование и импорт брендов-производителей, моделей техники.
7. Создание и редактирование информационных страниц.
6. Создание и редактирование характеристик.
5. Добавление, редактирование и импорт категорий.
3. Получение и обработка заявок (заказов).
2. Экспорт/Импорт каталога (xls).
4. Добавление и управление менеджерами.
Разработали админ. панель, со следующим функционалом:
Back-end и Front-end сайта сделан на Laravel
c компонентами Vue Js. Быстрая загрузка страниц, валидный html-код, с использованием Ajax.
Вместо итога
Да, забыл написать о том, что всё это затевалось к 30-ти летнему юбилею компании - 20 июня 2021 года.

Полгода работы с прототипом, дизайном, каталогом, контентом и кодом. Десятки совещаний, личные встречи, работа совместной группы с владельцами компании.
“Богдан, доброе утро
Спасибо большое за наш новый сайт. Твоя команда сделала все на высшем уровне и у нас теперь есть полноценный сайт по гидроцилиндрам! Впереди еще много работы.“ из письма Заказчика

Впереди: доработка каталога на 2 тысячи позиций, подключение фильтров, оптимизация и многое другое. Для нашей команды это прекрасный опыт успешного взаимодействия с Заказчиком, работы с креативом и решением простых коммерческих задач.
19 июня, утром скидываем ссылкой рабочий вариант hydrocylinders.ru