Задачи
- Спроектировать интерфейс онлайн-магазина на eCommerce-платформе «1С-Битрикс24 Интернет-магазин.
- Выполнить дизайн в минималистичном и легком стиле на основе готового шаблона «allcorp2.aspro», адаптировать новый сайт для всех разрешений гаджетов.
- Разработать структуру онлайн-магазина, внимательно составить раздел «Каталог», настроить модуль «Интернет-магазин» (Корзина, Оформление заказа, Персональный раздел покупателя).
- Составить пошаговый план рекламы проекта в поисковых системах.
Проектирование и решения
Для решения поставленной задачи, специалисты Digital Agency "ST" провели обширное UX-исследование. Были изучены 36 сайтов конкурентов в 13 регионах мира. Мы отработали более 50 онлайн-ресурсы брендов, продукцию которых реализует «rossvikcenter.ru», а также сайты их основных дистрибьюторов. Еще, разобрали группы в социальных сетях, отзывы клиентов, каталоги продукции других брендов по производству оборудования.
По результатам исследования, был сформирован набор поведенческих факторов целевой аудитории будущего онлайн-проекта. Разработали структуру наполнения онлайн-магазина, количество страниц, определили главное меню. Был написан пошаговый план работ по размещению рекламы в Яндекс, Google и группах соц. сетей.
Дизайн сайта на Битрикс для сервиса Rossvik center
Компания по продаже и обслуживаю шиномонтажного оборудования
Основное направление «rossvikcenter.ru» – это продажа оборудования, разного рода инструментов и расходников для обслуживания всех видов колес автотранспорта. Исходя их этого, дизайнеры переработали шаблон «allcorp2.aspro»: скомпоновали изображения реально существующего оборудования для слайдера, переделали отображение блоков, наполнили дизайн собственными визуальными элементами. 83% всех компонентов шаблона, для этого проекта, были модифицированы или переписаны начисто.
Главная страница «rossvikcenter.ru» стала удобной для пользователя, UI-дизайнер проделал большой объем работы. Перейдя на нее, посетитель сразу увидит: название бренда, описание деятельности компании, логически понятную навигацию, адрес, телефон. А также форму заказа обратного звонка, для консультации с менеджером компании. В правой части экрана выведен слайдер для ТОП предложений «rossvikcenter.ru». А слева – список разделов каталога продукции, разбитый по категориям, для быстрого поиска нужных товаров. Ниже расположен блок категорий продукции, который представлен с фотографиями, более 50% посетителей начинают «серфинг» по сайту именно с этого блока.
Адаптивный дизайн
В разработке мы использовали набор инструментов Bootstrap 4. Таким образом, все страницы сайта, включая «Корзину», страницы заказа, карточки товаров, «Личный кабинет» пользователя, правильно отображаются на всех мобильных платформах.
Новая цветовая палитра и шрифтовая группа
Стиль сайта должен быть легким и минималистичным, чтобы посетитель был сконцентрирован на предлагаемых товарах. Поэтому, наши дизайнеры определили 4 базовых цвета, нейтральных тонов. Оттенок «Джинсовый синий» призван привлекать внимание, в этим цветом выделяются важные элементы страницы: заголовки баннеров, кнопки, ссылки, прочие. Светлый оттенок «Кремовый хаки» – использован для логотипа компании, вывода дополнительной текстовой информации. «Сапфирово-синий» – нужен как фон для заголовков таблиц. А для отображения текста был выбран «Черно-коричневый» цвет, он хорошо контрастирует с белым фоном, но не «режет глаза».
Для вывода основного текстового наполнения страниц мы взяли шрифт «Ubuntu sans-serif», разной насыщенности.
Современный дизайн карточки товара
Страница карточки товара содержит нужную информацию: полное описание, характеристики, стоимость, остаток на складе, доставка, описание процесса заказа. Все страницы «Каталога» заполняются автоматически, выгрузка номенклатуры и описание карточек делалась на онлайн интеграции с базой данных 1С Предприятие.
Для раздела «Каталог», была интегрирована специальная система фильтров по параметрам, для облегчения поиска нужных материалов и инструментов.
Модуль «Корзина»
Модуль позволят управлять заказами, он автоматически составляет список, выбранных пользователем, товаров. Позиции в корзине будут храниться до завершения сессии, их можно удалить или перейти к оформлению заказа всей партии или по отдельности.
Структура сайта
Главными компонентами структуры онлайн-магазина являются пункты «Каталог» и «Как купить», эти раздел древовидную систему отражению страниц. Содержат полный перечень товаров компании и описание процесса заказа онлайн. Пункт «Производители» и «Акции» информируют о представленных брендах и ТОП предложениях «rossvikcenter.ru». А разделы «Компания» и «Контакты» предоставляют дополнительную информацию для покупателей.
Результаты
В начале 2020 года, специалисты Digital Agency "ST" запустили обновленный «rossvikcenter.ru» в сети. Заказчик принял готовый сайт под ключ в полном объеме, и дал наивысшую оценку проделанной работе с нашей стороны. Мы с нуля проработали интерфейс, общий дизайн, добавили необходимые блоки информации. Верстка сайта выполнена на высоком уровне, в полном соответствии с требованиями Яндекс и Google, также все страницы адаптированы под мобильные гаджеты, с сохранением полного функционала. Нужные модули настроены, каталог товаров интегрирован с системой 1С Предприятие. Вся текстовая информация переписана начисто и оптимизирована под поисковые системы.
Продвижение интернет-магазина «rossvikcenter.ru» проводится систематически на протяжении нескольких лет. Через некоторое время после запуска «rossvikcenter.ru» был веведен в ТОП выдачи поисковиков. В результате чего, посещаемость растет каждый отчетный период на 15-20%, и перевалила за 2500%, по сравнению с первым месяцем работы.