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

Главное о кейсе

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

Как проект изменил жизнь пользователей

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

Бизнес-задача и ее решение

Задача:

Компания "Роксол" занимается разработкой и производством смазочных материалов для промышленного оборудования. Для обновления визуальной составляющей сайта мы решили выделить позиционирование бренда и улучшить пользовательский опыт взаимодействия с контентом. Перед нами стояли задачи:

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

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

Разработка удобной навигации по сайту.

Решение:

Улучшили каталог, оптимизировав его структуру и содержание на основе аналитики сайта.

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

Исправили иерархию текстового контента на сайте.

Внесли изменения в структуру главной страницы и добавили новые блоки.

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

Крафт (мастерство), реализация, технические детали

Технологии:

Фронтенд: HTML, CSS, Javascript
Бэкенд: PHP, CMS OcStore
Графические редакторы: Figma

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Этапы работы над проектом:

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

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

Дизайн-концепция

Создали удобный и понятный дизайн корпоративного сайта, адаптированный под потребности целевой аудитории. Использовали 5-колоночную сетку для структурирования контента. Основным фоном выбрали бежевый цвет, а акцентный цвет – жёлтый, фирменный для компании "Роксол". Шрифт гротеск подчёркивает уверенность компании и хорошо сочетается с дизайном. Подобрали сочетающиеся цвета и текстовые стили для удобной иерархии. Скругления элементов ассоциируются с лёгкостью и мягкостью смазочных материалов.

Дизайн главной страницы

На первом экране главной страницы добавили 2 баннера, включая один с 3D-изображением подшипника, созданным с нуля. Этот баннер ассоциируется с использованием смазочных материалов в производственных машинах. Также включили блок с популярными товарами для привлечения внимания пользователей. Разместили блок "Аналоги", оптимизировав его содержимое и дополнив иконками для лучшего восприятия. Добавили два промо-блока для создания впечатления и запоминания сайта.

Дизайн каталога

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

Дизайн карточки товара

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

Дизайн-система

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

Дизайн остальных страниц

Примеры некоторых страниц, которые выполнены с сохранением визуальной стилистики.

Адаптивность

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

Проектирование анимаций

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

Вёрстка и анимация

Фронтенд сайта оптимизирован с помощью HTML, CSS и JavaScript, ускоряя загрузку страниц и улучшая индексацию поисковыми системами. Бэкенд реализован на PHP с использованием CMS OcStore для управления контентом. Особое внимание уделялось плавной и быстрой анимации, подчеркивающей высокий уровень компетенции и качества компании.

Скриншоты