аналитика, дизайн, вёрстка, программирование

Разработка сайта для производителя смазочных материалов HILL Corporation

Создали современный сайт с проработанной структурой каталога и запоминающимся дизайном для производителя смазочных материалов из Казахстана.

О клиенте

ТОО «High Industrial Lubricants & Liquids Corporation» (HILL) — ведущий производитель смазочных материалов для легкового и коммерческого транспорта в Казахстане. Компания изготавливает и продаёт свыше 400 видов масел и пластичных смазок для различных климатических условий.

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

HILL Corporation требовался новый сайт для успешного выхода на международный рынок и роста продвижения продукции в своей стране.

Какой сайт был нужен клиенту

С современным дизайном и функционалом

Текущий сайт морально устарел и практически не поддерживался в актуальном состоянии. Нужна была отстройка от конкурентов, в том числе брендов мирового уровня.

Для разной целевой аудитории

Требовалось учесть потребности всех сегментов ЦА: покупателей из секторов B2B и B2G, дистрибьюторов, инвесторов, профессиональных ассоциаций и сотрудников компании.

Задачи

Аналитика на страте работ, в том числе подробный анализ ниши. Требовалось не только определиться с ЦА и позиционированием, но и изучить и переосмыслить лучшее у конкурентов: важно было оформить и добавить в проект блоки и элементы, к которым привыкли потенциальные покупатели и партнёры на других сайтах отрасли.
Разработать структуру каталога товаров. У клиента не было систематизированного каталога, собранного в одном месте. Нужно было создать его с учетом аналитики и имеющегося ассортимента.
Создать дизайн страниц, позволяющий сайту HILL Corporation выделяться на фоне конкурентов и выглядеть на уровне веб-ресурсов зарубежных брендов.
Настроить и запрограммировать административную часть для удобного управления сайтом сотрудниками компании: для наполнения каталога и создания новых информационных страниц.

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

Евгений Золотов, руководитель проекта

Что клиент получил в итоге

яркий, живой сайт с запоминающимся дизайном, анимированными схемами, наглядным каталогом и удобной сквозной навигацией;
структурированный каталог товаров, собранный в процессе подготовки материалов для сайта;
рост заявок от соискателей, желающих работать в HILL Corporation.

Для полноценных статистических выводов с момента сдачи работ прошло ещё слишком мало времени. Однако наполненность сайта нужной пользователям информацией о товарах и компании уже даёт свои плоды. Так, по данным Метрики на ноябрь 2023 года, почти в 2 раза увеличилось время на сайте, в 1,5 раза снизился показатель отказов, а глубина просмотра увеличилась на 17%.

Стратегия

Мы действовали по классической стратегии при разработке сайта — принципу водопада: аналитика, проектирование, дизайн, верстка, программирование, наполнение контентом, базовая SEO-оптимизация, тестирование, запуск.

Некоторые работы получилось выполнять параллельно, что сократило сроки сдачи проекта. По договору разработка занимала 12 месяцев. В реальности получилось разработать сайт за 9 месяцев (ещё 1,5 месяца длилась подготовка к релизу со стороны клиента).

Аналитика и проектирование

Искренне считаем этот этап работ одним из самых важных. Именно на основании тщательных исследований строится дальнейшая работа над проектом. На этапе мы:

Провели несколько интервью со специалистами различных отделов и руководителями HILL Corporation. Это помогло составить портреты целевой аудитории, определить, кто является основными заказчиками и кого хотелось бы привлечь.
Для каждого сегмента определили основные задачи, с которыми обращаются в компанию и пути следования при реализации данных задач. Для этого отрисовали user-flow и определили, какие блоки на каких страницах должны присутствовать на сайте для плодотворного взаимодействия.
Параллельно велась работа по сбору семантики, составлению структуры сайта и анализ сайтов конкурентов.

Дизайн

Одной из задач нового сайта являлась отстройка от конкурентов. Хотелось уйти от примелькавшихся элементов декора (например, капли масла), типичных для сайтов производителей смазочных материалов. Требовалось показать тематику бизнеса другим способом.

Эффекты и анимация

Мы добавили плавную, “текучую” анимацию линий, некоторых изображений и текстовых блоков. С помощью неё пользователю транслируется ассоциация с основным продуктом организации — смазочными материалами.

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

Цвета

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

Шрифт

Еще одним способом сделать сайт уникальным стало использование платного шрифта TT Supermolot Neue. Это семейство включает в себя 73 шрифта, что даёт дизайнеру возможность воплотить практически все пожелания клиента, не отходя от общей концепции.

Хорошо читаемый, но достаточно убористый TT Supermolot Neue с характерным начертанием отлично подошёл, чтобы показать технологичность HILL Corporation и выделить сайт на фоне конкурентов.

Иллюстрации

Сайт получился достаточно запоминающимся и интересным для пользователя во многом и благодаря своей наполненности изображениями.

За время работы над проектом клиент предоставил не только качественные фото команды, производства и товаров, но и с помощью нейросети отрисовал дополнительные иллюстрации и оформил их в едином стиле. Шёл 2023 год всё-таки — без нейронок никуда=)

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

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

Евгений Золотов, руководитель проекта

Главная

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

Главная

Каталог

Каталог продукции — двухуровневый. Делить каталог ниже второго уровня не стали, исходя из рекомендаций SEO-специалиста. Чем ниже уровень вложенности, тем меньший вес она имеет для поисковых систем.

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

Карточка товара

Детальная страница продукции закрывает все потребности потенциальных покупателей. На странице выводятся:

Варианты упаковки (с фото разных ракурсов)
Кнопка для добавления в корзину
Допуски и сертификаты выданные данному продукту
Характеристики
Текстовое описание
Документация (тех.паспорта, маркетинговые материалы и прочее)
Блоки перелинковки с услугами и похожими товарами
Форма обратной связи с возможностью задать вопрос сразу в нужный отдел компании.

каталог

Корзина на vue.js

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

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

Информационные разделы

Помимо каталога, сайт имеет и другие, стандартные для промышленной организации, разделы, посвященные компании и производству. На сайте HILL Corporation это не одна страница, а целые группы страниц, наполненные текстом и иллюстрациями, максимально раскрывающими пользователям все подробности, связанные с организационной структурой, историей компании, изготовлением продукции.

Тонкая подстройка внешнего вида

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

другие страницы

Уникальные схемы

На информационных разделах сайта добавлено несколько анимированных и интерактивных схем:

На странице “О компании” внедрена интерактивная карта завода;
На странице “Производство” добавлена плавная анимация для схемы производства товарных масел.
На странице “Особенности бренда Fastroil” наглядно описываются особенности упаковки продукции. В целях защиты бренда тут крупно показаны и подробно описаны элементы этикеток и тары.

Разница между Алматы и Санкт-Петербургом +3 часа. Это накладывает некоторые ограничения на коммуникацию, которую в итоге приходилось планировать на утро. Несмотря на это, связь поддерживалась регулярно: еженедельные статусные встречи и несколько дополнительных созвонов в течение недели.

Длительные онлайн-встречи с коллегой со стороны клиента помогли:

держать темп проекта (итог — сдали раньше срока);
управлять ожиданиями клиента, а также вовремя корректировать процесс создания сайта в соответствии с новыми вводными от руководства и маркетологов HILL Corporation;
планировать и контролировать количество ресурсов агентства для разработки.

Евгений Золотов, руководитель проекта

Выводы

Новый сайт закрыл потребности всех сегментов целевой аудитории HILL Corporation: потенциальных клиентов, партнёров, сотрудников компании.

На сайте стало больше полезной информации и ее стало удобнее искать: как данные о продукции, так и об организации;
Начали поступать заявки от соискателей, ищущих работу в HILL Corporation;
У сотрудников коммерческого отдела компании появился доступ к полному каталогу в наглядном и удобном виде.

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

Считаем, что с помощью нового сайта HILL Corporation сможет быстро и эффективно начать активное продвижение своей продукции как в Казахстане, так и на зарубежных рынках. И мы ему в этом поможем — уже начались работы по seo-продвижению.

hillcorporation.kz